Merge commit 'b5b9558136f02741e7ba472e09b244bf055a294b' into develop

components/Settings/LayoutSettings.js

@@ -18,6 +18,8 @@ export const LayoutSettings = ({
   setUsePDFView,
   trainMenu,
   setTrainMenu,
+  uiSetting,
+  setUiSetting,
   trainPosition,
   setTrainPosition,
   headerSize,
@@ -38,6 +40,17 @@ export const LayoutSettings = ({
             falseText={"本家\n(文字アイコン)"}
             trueText={"オリジナル\n(車種アイコン)"}
           />
+          <SwitchArea
+            str="列車表示"
+            bool={uiSetting}
+            setBool={setUiSetting}
+            falseImage={require("../../assets/configuration/layout_default.jpg")}
+            trueImage={require("../../assets/configuration/layout_tokyo.jpg")}
+            falseText={"本家"}
+            trueText={"オリジナル"}
+            falseValue="default"
+            trueValue="tokyo"
+          />
           <SwitchArea
             str="トップメニュー表示"
             bool={mapSwitch}

components/Settings/settings.js

@@ -39,6 +39,7 @@ export default function Setting(props) {
   const [trainPosition, setTrainPosition] = useState(false);
   const [headerSize, setHeaderSize] = useState("default");
   const [startPage, setStartPage] = useState(false);
+  const [uiSetting, setUiSetting] = useState("tokyo");
   useLayoutEffect(() => {
     AS.getItem("iconSwitch").then(setIconSetting);
     AS.getItem("mapSwitch").then(setMapSwitch);
@@ -48,6 +49,7 @@ export default function Setting(props) {
     AS.getItem("trainPositionSwitch").then(setTrainPosition);
     AS.getItem("headerSize").then(setHeaderSize);
     AS.getItem("startPage").then(setStartPage);
+    AS.getItem("uiSetting").then(setUiSetting);
   }, []);
   const testNFC = async () => {
     //const result = await ExpoFelicaReader.scan();
@@ -63,6 +65,7 @@ export default function Setting(props) {
       AS.setItem("trainPositionSwitch", trainPosition.toString()),
       AS.setItem("headerSize", headerSize),
       AS.setItem("startPage", startPage.toString()),
+      AS.setItem("uiSetting", uiSetting),
     ]).then(() => Updates.reloadAsync());
   };
   return (
@@ -114,6 +117,8 @@ export default function Setting(props) {
             setTrainMenu={setTrainMenu}
             trainPosition={trainPosition}
             setTrainPosition={setTrainPosition}
+            uiSetting={uiSetting}
+            setUiSetting={setUiSetting}
             testNFC={testNFC}
             updateAndReload={updateAndReload}
             headerSize={headerSize}

components/atom/SwitchArea.js

@@ -8,6 +8,8 @@ export const SwitchArea = ({
   trueImage,
   falseText,
   trueText,
+  falseValue = false,
+  trueValue = true,
   children,
 }) => {
   return (
@@ -37,7 +39,7 @@ export const SwitchArea = ({
           bool={bool}
           setBool={setBool}
           color="red"
-          value={false}
+          value={falseValue}
           image={falseImage}
           subText={falseText}
         />
@@ -45,7 +47,7 @@ export const SwitchArea = ({
           bool={bool}
           setBool={setBool}
           color="red"
-          value={true}
+          value={trueValue}
           image={trueImage}
           subText={trueText}
         />

lib/webViewInjectjavascript.ts

@@ -2,13 +2,15 @@ type InjectJavascriptData = (
   a: string,
   b: string,
   c: string,
-  d: string
+  d: string,
+  e: string
 ) => string;
 export const injectJavascriptData: InjectJavascriptData = (
   mapSwitch,
   iconSetting,
   stationMenu,
-  trainMenu
+  trainMenu,
+  uiSetting
 ) => {
   // 一番上のメニュー非表示　地図スイッチによって切り替え
   const topMenu =
@@ -1247,10 +1249,16 @@ export const injectJavascriptData: InjectJavascriptData = (
     const returnText1 = (isWanman ? "ワンマン " : "") + trainName + viaData;
     const returnText2 = (ToData ? ToData+"行 " : ToData)+ TrainNumber;
     行き先情報.innerText = "";
+    ${uiSetting === "tokyo" ? `
       行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color:black;text-align:center;'>" + (ToData ? ToData + "行 " : ToData) + "</p>");
       行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + returnText1 + "</p>");
       行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;padding:0;color:black;text-align:center;'>" + TrainNumber + (JRF ? "":"レ") + "</p>");
       行き先情報.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', "<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>");
+      `}
       }
   `;
 
@@ -1293,6 +1301,7 @@ const setNewTrainItem = (element)=>{
 const setStrings = () =>{
   try {
     const elements = document.querySelectorAll('#disp > div > div > div[onclick]');
+    const setNewTrainItemUI = ()=>{
       const elementBaseBase = document.querySelectorAll('[id^="stationBlock"]');
       elementBaseBase.forEach(e=>{ //それぞれの駅ブロック横一列
         e.style.display = 'flex';
@@ -1345,6 +1354,9 @@ const setStrings = () =>{
         aaa(x[2],"right");
         
       });
+    }
+    
+    ${uiSetting === "tokyo" ? `setNewTrainItemUI();`: ``}
     for (let element of elements) {
       if(element.getAttribute('offclick')){ continue; }
       element.setAttribute('offclick',element.getAttribute('onclick'))
@@ -1375,7 +1387,7 @@ const setStrings = () =>{
         }
       ` : ""}
       nameReplace(列車名データ,列番データ,行き先情報,hasProblem); 
-      setNewTrainItem(element);
+      ${uiSetting === "tokyo" ? `setNewTrainItem(element);`: ``}
     }
     try{
       for(let d of document.getElementById('disp').childNodes){

stateBox/useTrainMenu.js

@@ -16,6 +16,8 @@ const initialState = {
   setMapSwitch: () => {},
   stationMenu: undefined,
   setStationMenu: () => {},
+  uiSetting: undefined,
+  setUiSetting: () => {},
   LoadError: false,
   setLoadError: () => {},
   trainInfo: {
@@ -58,12 +60,16 @@ export const TrainMenuProvider = ({ children }) => {
   //駅情報画面用
   const [trainMenu, setTrainMenu] = useState("true");
 
+  //GUIデザインベース
+  const [uiSetting, setUiSetting] = useState("tokyo");
+
   //地図表示テキスト
   const injectJavascript = injectJavascriptData(
     mapSwitch,
     iconSetting,
     stationMenu,
-    trainMenu
+    trainMenu,
+    uiSetting
   );
 
   useEffect(() => {
@@ -75,6 +81,8 @@ export const TrainMenuProvider = ({ children }) => {
     ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true });
     //列車メニュースイッチ
     ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true", u: true });
+    //GUIデザインベーススイッチ
+    ASCore({ k: "uiSetting", s: setUiSetting, d: "tokyo", u: true });
   }, []);
 
   return (
@@ -90,6 +98,8 @@ export const TrainMenuProvider = ({ children }) => {
         setMapSwitch,
         stationMenu,
         setStationMenu,
+        uiSetting,
+        setUiSetting,
         LoadError,
         setLoadError,
         trainInfo,