Merge commit 'acd5d0bb882139379fe5e409f3b7f291a7a14dcf' into develop

This commit is contained in:
harukin-expo-dev-env 2025-07-18 15:34:11 +00:00
commit d18e0f71e3
2 changed files with 153 additions and 111 deletions

View File

@ -50,26 +50,10 @@ export const SearchUnitBox = ({
flexDirection: "column", flexDirection: "column",
display: "flex", display: "flex",
flex: 1, flex: 1,
alignContent: "center",
justifyContent: "flex-end",
}} }}
> >
<View
style={{
backgroundColor: "white",
borderRadius: 25,
height: 30,
paddingRight: 10,
paddingLeft: 10,
flex: 1,
}}
>
<TextInput
placeholder="駅名や駅ナンバリングを入力してフィルタリングします。"
onEndEditing={() => {}}
onChange={(ret) => setInput(ret.nativeEvent.text)}
value={input}
style={{ flex: 1 }}
/>
</View>
<View style={{ flexDirection: "row", alignItems: "center" }}> <View style={{ flexDirection: "row", alignItems: "center" }}>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
@ -87,43 +71,88 @@ export const SearchUnitBox = ({
style={{ marginRight: 10 }} style={{ marginRight: 10 }}
/> />
</TouchableOpacity> </TouchableOpacity>
{Object.keys(lineList_LineWebID).map((d) => ( <View
<TouchableOpacity style={{
style={{ backgroundColor: "white",
flex: 1, borderRadius: 25,
backgroundColor: height: 30,
lineColorList[stationIDPair[lineList_LineWebID[d]]], paddingRight: 10,
padding: 5, paddingLeft: 10,
marginHorizontal: 2, flex: 1,
borderRadius: 10, flexDirection: "row",
borderColor: "white", alignItems: "center",
borderWidth: 1, justifyContent: "center",
borderStyle: "solid", }}
alignItems: "center", >
opacity: <TextInput
isSearchMode == stationIDPair[lineList_LineWebID[d]] placeholder="駅名や駅ナンバリングを入力してフィルタリングします。"
? 1 onEndEditing={() => {}}
: !isSearchMode onChange={(ret) => setInput(ret.nativeEvent.text)}
? 1 value={input}
: 0.5, style={{ flex: 1 }}
zIndex: 10, />
}} {input && (
onPress={() => { <TouchableOpacity
const id = stationIDPair[lineList_LineWebID[d]]; onPress={() => setInput("") }
const s = isSearchMode == id ? undefined : id; style={{
if (!s) return; padding: 3,
setisSearchMode(s); borderRadius: 15,
}} backgroundColor: "lightgray",
key={stationIDPair[lineList_LineWebID[d]]} }}
>
<Text
style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
> >
{stationIDPair[lineList_LineWebID[d]]} <Ionicons
</Text> name="close"
</TouchableOpacity> size={20}
))} color="white"
/>
</TouchableOpacity>
)}
</View>
</View> </View>
{!input && (
<View style={{ flexDirection: "row", alignItems: "center" }}>
{Object.keys(lineList_LineWebID).map((d) => (
<TouchableOpacity
style={{
flex: 1,
backgroundColor:
lineColorList[stationIDPair[lineList_LineWebID[d]]],
padding: 5,
marginHorizontal: 2,
borderRadius: 10,
borderColor: "white",
borderWidth: 1,
borderStyle: "solid",
alignItems: "center",
opacity:
isSearchMode == stationIDPair[lineList_LineWebID[d]]
? 1
: !isSearchMode
? 1
: 0.5,
zIndex: 10,
}}
onPress={() => {
const id = stationIDPair[lineList_LineWebID[d]];
const s = isSearchMode == id ? undefined : id;
if (!s) return;
setisSearchMode(s);
}}
key={stationIDPair[lineList_LineWebID[d]]}
>
<Text
style={{
color: "white",
fontWeight: "bold",
fontSize: 20,
}}
>
{stationIDPair[lineList_LineWebID[d]]}
</Text>
</TouchableOpacity>
))}
</View>
)}
</View> </View>
)} )}
</TouchableOpacity> </TouchableOpacity>

View File

@ -73,7 +73,8 @@ export const injectJavascriptData: InjectJavascriptData = (
const trainIcon = ` const trainIcon = `
const setStationIcon = (setIconElem,img,hasProblem) =>{ const setStationIcon = (setIconElem,img,hasProblem) =>{
const position = setIconElem.getAttribute("style").includes("left"); const position = setIconElem.getAttribute("style").includes("left");
setIconElem.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:"+(position ? 'left' : 'right')+";height:22px;margin: 2px;'>"); const marginData = ${uiSetting === "tokyo" ? `"5px"`: `"2px"`}
setIconElem.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:"+(position ? 'left' : 'right')+";height:22px;margin: "+marginData+";'>");
setIconElem.remove(); setIconElem.remove();
} }
@ -1052,7 +1053,7 @@ export const injectJavascriptData: InjectJavascriptData = (
return undefined; return undefined;
} }
} }
const nameReplace = (,,,hasProblem) =>{ const nameReplace = (,,,hasProblem,isLeft) =>{
let isWanman = false; let isWanman = false;
let trainName = ""; let trainName = "";
let trainType = ""; let trainType = "";
@ -1344,14 +1345,9 @@ export const injectJavascriptData: InjectJavascriptData = (
} }
const gradient = getColors.length > 1 ? "linear-gradient(130deg, " + getColors[0] + " 0%, "+ getColors[0]+"50%, "+ getColors[1]+"50%, " + getColors[1] + " 100%)" : getColors[0]; const gradient = getColors.length > 1 ? "linear-gradient(130deg, " + getColors[0] + " 0%, "+ getColors[0]+"50%, "+ getColors[1]+"50%, " + getColors[1] + " 100%)" : getColors[0];
.insertAdjacentHTML('beforebegin', "<p style='font-size:6px;padding:0;color:black;text-align:center;'>" + TrainNumber + (JRF ? "":"レ") + "</p>");
.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + (isWanman ? "ワンマン " : "") + "</p>"); .insertAdjacentHTML('beforebegin', "<div style='width:100%;display:flex;flex:1;flex-direction:"+(isLeft ? "column-reverse" : "column") + ";'><p style='font-size:6px;padding:0;color:black;text-align:center;'>" + TrainNumber + (JRF ? "":"レ") + "</p><div style='flex:1;'></div><p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + (isWanman ? "ワンマン " : "") + "</p><p style='font-size:6px;font-weight:bold;padding:0;color: black;text-align:center;border-style:solid;border-width: "+(!!yosan2Color ? "2px" : "0px")+";border-color:" + yosan2Color + "'>" + viaData + "</p><p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + trainName + "</p><div style='width:100%;background:" + gradient + ";'><p style='font-size:10px;font-weight:bold;padding:0;margin:0;color:white;align-items:center;align-content:center;text-align:center;text-shadow:1px 1px 0px #00000030, -1px -1px 0px #00000030,-1px 1px 0px #00000030, 1px -1px 0px #00000030,1px 0px 0px #00000030, -1px 0px 0px #00000030,0px 1px 0px #00000030, 0px -1px 0px #00000030;'>" + (ToData ? ToData + "行" : ToData) + "</p></div><div style='width:100%;background:" + trainTypeColor + ";border-radius:"+(isLeft ? "4px 4px 0 0" : "0 0 4px 4px")+";'><p style='font-size:10px;font-weight:bold;font-style:italic;padding:0;color: white;text-align:center;'>" + trainType + "</p></div><p style='font-size:8px;font-weight:bold;padding:0;text-align:center;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p></div>");
.insertAdjacentHTML('beforebegin', "<p style='font-size:6px;font-weight:bold;padding:0;color: black;text-align:center;border-bottom-style:solid;border-bottom-width: "+(!!yosan2Color ? "2px" : "0px")+";border-color:" + yosan2Color + "'>" + viaData + "</p>"); `: `
.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + trainName + "</p>");
.insertAdjacentHTML('beforebegin', "<div style='width:100%;background:" + gradient + ";'><p style='font-size:10px;font-weight:bold;padding:0;margin:0;color:white;align-items:center;align-content:center;text-align:center;text-shadow:1px 1px 0px #00000030, -1px -1px 0px #00000030,-1px 1px 0px #00000030, 1px -1px 0px #00000030,1px 0px 0px #00000030, -1px 0px 0px #00000030,0px 1px 0px #00000030, 0px -1px 0px #00000030;'>" + (ToData ? ToData + "行" : ToData) + "</p></div>");
.insertAdjacentHTML('beforebegin', "<div style='width:100%;background:" + trainTypeColor + ";'><p style='font-size:10px;font-weight:bold;font-style:italic;padding:0;color: white;text-align:center;'>" + trainType + "</p></div>");
.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;text-align:center;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p>");
`: `
.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: black;'>" + returnText1 + "</p>"); .insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: black;'>" + returnText1 + "</p>");
.insertAdjacentHTML('beforebegin', "<div style='display:inline-flex;flex-direction:row;'><p style='font-size:10px;font-weight: bold;padding:0;color:black;'>" + (ToData ? ToData + "行 " : ToData) + "</p><p style='font-size:10px;padding:0;color:black;'>" + TrainNumber + (JRF ? "":"レ") + "</p></div>"); .insertAdjacentHTML('beforebegin', "<div style='display:inline-flex;flex-direction:row;'><p style='font-size:10px;font-weight: bold;padding:0;color:black;'>" + (ToData ? ToData + "行 " : ToData) + "</p><p style='font-size:10px;padding:0;color:black;'>" + TrainNumber + (JRF ? "":"レ") + "</p></div>");
.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p>"); .insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p>");
@ -1373,7 +1369,7 @@ const setNewTrainItem = (element,hasProblem)=>{
}else if(JRFTemp){ }else if(JRFTemp){
element.style.borderColor = 'rgba(0, 134, 158, 0.8)'; element.style.borderColor = 'rgba(0, 134, 158, 0.8)';
}else{ }else{
element.style.borderColor = 'white'; element.style.borderColor = 'black';
} }
element.style.borderWidth = '2px'; element.style.borderWidth = '2px';
element.style.borderStyle = 'solid'; element.style.borderStyle = 'solid';
@ -1410,12 +1406,12 @@ const setNewTrainItem = (element,hasProblem)=>{
element.addEventListener('touchend', () => element.style.transform = 'scale(1)'); element.addEventListener('touchend', () => element.style.transform = 'scale(1)');
if(element.getAttribute("style").includes("left")){ if(element.getAttribute("style").includes("left")){
// borderを使って五角形を生成 下り // borderを使って五角形を生成 下り
element.style.borderRadius = '10% 10% 40% 40%'; element.style.borderRadius = '30px 30px 120px 120px';
element.style.flexDirection = 'column-reverse'; element.style.flexDirection = 'column-reverse';
} }
else if(element.getAttribute("style").includes("right")){ else if(element.getAttribute("style").includes("right")){
// borderを使って五角形を生成 上り // borderを使って五角形を生成 上り
element.style.borderRadius = '40% 40% 10% 10%'; element.style.borderRadius = '120px 120px 30px 30px';
element.style.flexDirection = 'column'; element.style.flexDirection = 'column';
} }
@ -1425,57 +1421,70 @@ const setStrings = () =>{
try { try {
const elements = document.querySelectorAll('#disp > div > div > div[onclick]'); const elements = document.querySelectorAll('#disp > div > div > div[onclick]');
const setNewTrainItemUI = ()=>{ const setNewTrainItemUI = ()=>{
const elementBaseBase = document.querySelectorAll('[id^="stationBlock"]'); const aaa = (x2,pos) => {
elementBaseBase.forEach(e=>{ //それぞれの駅ブロック横一列 x2.style.display = 'flex';
x2.style.flexDirection = 'row';
if(pos == "right"){
x2.style.alignItems = 'flex-start';
x2.style.justifyContent = 'flex-start';
}else if(pos == "left"){
x2.style.alignItems = 'flex-end';
x2.style.justifyContent = 'flex-end';
}
x2.style.flexWrap = 'wrap';
x2.style.width = '100%';
x2.style.height = "100%";
}
const aaa2 = (x2) => {
x2.style.display = 'flex';
x2.style.flexDirection = 'row';
x2.style.alignItems = 'center';
x2.style.justifyContent = 'center';
x2.style.flexWrap = 'wrap';
x2.style.width = '100%';
x2.style.height = "unset";
const x3 = x2.querySelectorAll(":scope > div");
x3.forEach(i=>{
i.style.position = "unset";
i.style.display = "flex";
i.style.flexDirection = "column";
i.style.flex = "1";
i.style.backgroundColor = "#00000000";
i.querySelectorAll(":scope > *").forEach(j=>{
j.style.width = "100%";
j.style.textAlign = "center";
j.style.margin = "5px";
j.style.padding = "5px";
});
});
}
const layoutBase = (e)=>{
e.style.display = 'flex'; e.style.display = 'flex';
e.style.height = "unset"; e.style.height = "unset";
e.style.flexDirection = 'row'; e.style.flexDirection = 'row';
//e.style.alignItems = "left";
e.style.justifyContent = 'center'; e.style.justifyContent = 'center';
const x = e.querySelectorAll(':scope > div');//配下のdiv要素を選択 }
//x[0] 登りブロック x[2] 下りブロック x[1] 駅ブロック const elementBaseBase = document.querySelectorAll('[id^="stationBlock"]');
const aaa = (x2,pos) => { const elementNotBase = document.querySelectorAll('#disp > [id*=""]');
x2.style.display = 'flex'; elementNotBase.forEach(e=>{
x2.style.flexDirection = 'row'; layoutBase(e);
if(pos == "right"){ const x = e.querySelectorAll(':scope > [id^="Up"], :scope > [id^="Id"], :scope > [id^="Down"]');//配下のdiv要素を選択
x2.style.alignItems = 'flex-start'; aaa(x[0],"left");
x2.style.justifyContent = 'flex-start'; aaa2(x[1]);
}else if(pos == "left"){ aaa(x[2],"right");
x2.style.alignItems = 'flex-end'; const upTrainCrossBarElement = e.querySelector(':scope > [id="upTrainCrossBar"]');
x2.style.justifyContent = 'flex-end'; if (upTrainCrossBarElement) {
} upTrainCrossBarElement.style.left = '0px';
x2.style.flexWrap = 'wrap'; }
x2.style.width = '100%'; });
x2.style.height = "100%"; elementBaseBase.forEach(e=>{ //それぞれの駅ブロック横一列
layoutBase(e);
} const x = e.querySelectorAll(':scope > div');//配下のdiv要素を選択
const aaa2 = (x2) => { //x[0] 登りブロック x[2] 下りブロック x[1] 駅ブロック
x2.style.display = 'flex';
x2.style.flexDirection = 'row';
x2.style.alignItems = 'center';
x2.style.justifyContent = 'center';
x2.style.flexWrap = 'wrap';
x2.style.width = '100%';
x2.style.height = "unset";
const x3 = x2.querySelectorAll(":scope > div");
x3.forEach(i=>{
i.style.position = "unset";
i.style.display = "flex";
i.style.flexDirection = "column";
i.style.flex = "1";
i.style.backgroundColor = "#00000000";
i.querySelectorAll(":scope > *").forEach(j=>{
j.style.width = "100%";
j.style.textAlign = "center";
j.style.margin = "5px";
j.style.padding = "5px";
});
});
}
aaa(x[0],"left"); aaa(x[0],"left");
aaa2(x[1]); aaa2(x[1]);
aaa(x[2],"right"); aaa(x[2],"right");
}); });
} }
@ -1486,6 +1495,9 @@ const setStrings = () =>{
var = element.getElementsByTagName("p")[0]; var = element.getElementsByTagName("p")[0];
${uiSetting === "tokyo" ? ` ${uiSetting === "tokyo" ? `
element.querySelector("img").insertAdjacentHTML('beforebegin',"<div style='flex:1;'></div>");
element.querySelector("img").insertAdjacentHTML('afterend',"<div style='flex:1;'></div>");
element.querySelector("img").style.padding = '5px';
element.style.position = 'relative'; element.style.position = 'relative';
if(element.getElementsByTagName("p")[1] != undefined){ if(element.getElementsByTagName("p")[1] != undefined){
element.getElementsByTagName("p")[1].innerText = element.getElementsByTagName("p")[1].innerText.replace("(","").replace(")",""); element.getElementsByTagName("p")[1].innerText = element.getElementsByTagName("p")[1].innerText.replace("(","").replace(")","");
@ -1506,6 +1518,7 @@ const setStrings = () =>{
element.getElementsByTagName("p")[1].style.top = '0px'; element.getElementsByTagName("p")[1].style.top = '0px';
} }
}`: ``} }`: ``}
const isLeft = element.getAttribute("style").includes("left");
var = element.getAttribute('offclick').split('"')[1]; var = element.getAttribute('offclick').split('"')[1];
var = element.getAttribute('offclick').split('"')[3]; var = element.getAttribute('offclick').split('"')[3];
const trainData = trainPositionDatas.filter(e=>!(e.Pos && e.Pos.includes("予告窓"))).find(e => e.TrainNum == ); const trainData = trainPositionDatas.filter(e=>!(e.Pos && e.Pos.includes("予告窓"))).find(e => e.TrainNum == );
@ -1530,7 +1543,7 @@ const setStrings = () =>{
} }
} }
` : ""} ` : ""}
nameReplace(,,,hasProblem); nameReplace(,,,hasProblem,isLeft);
${uiSetting === "tokyo" ? `setNewTrainItem(element,hasProblem);`: ``} ${uiSetting === "tokyo" ? `setNewTrainItem(element,hasProblem);`: ``}
} }
try{ try{