procon_bypass_man-web 0.1.0

data/src/lib/http_client.ts

@@ -0,0 +1,93 @@
+import axios from 'axios';
+import { PbmStats } from "../types/pbm_stats";
+import { Button } from "../types/button";
+import { LayerKey } from "../types/layer_key";
+import { ButtonsSettingType } from "../types/buttons_setting_type";
+
+interface DirPathApiResponse {
+  result: string,
+  root_path: string,
+}
+
+interface SettingPathApiResponse {
+  result: string,
+  setting_path: string,
+}
+
+interface PostApiResponse {
+  result: string,
+}
+
+interface StatsApiResponse {
+  stats: PbmStats,
+  result: string,
+  pid: number | null,
+}
+
+export interface SettingApiResponse {
+  result: string,
+  setting: ButtonsSettingType,
+  setting_group_by_button: any,
+  installed_macros: Array<string>,
+  installed_modes: Array<string>,
+}
+
+interface SettingDigestApiResponse {
+  result: string,
+  digest: string,
+}
+
+export class HttpClient {
+  constructor() {
+  };
+
+  getDirPath() {
+    const path = "/api/pbm_root__path";
+    return axios.get<DirPathApiResponse>(`/api/pbm_root_path`);
+  }
+
+  postDirPath(dirPath: string) {
+    return axios.post<PostApiResponse>(`/api/pbm_root_path`, { root_path: dirPath });
+  }
+
+  getSettingPath() {
+    return axios.get<SettingPathApiResponse>( "/api/pbm_setting_path");
+  }
+
+  postSettingPath(settingPath: string) {
+    const path = "/api/pbm_setting_path"
+    return axios.post<PostApiResponse>(`${path}`, { setting_path: settingPath });
+  }
+
+  getPbmStats() {
+    const path = "/api/pbm_stats";
+    return axios.get<StatsApiResponse>(`${path}`);
+  }
+
+  startPbm() {
+    const path = "/api/start_pbm";
+    return axios.post<PostApiResponse>(`${path}`);
+  }
+
+  stopPbm() {
+    const path = "/api/stop_pbm";
+    return axios.post<PostApiResponse>(`${path}`);
+  }
+
+  reloadPbmSetting() {
+    const path = "/api/reload_pbm_setting";
+    return axios.post<PostApiResponse>(`${path}`);
+  }
+
+  getSetting() {
+    return axios.get<SettingApiResponse>("/api/pbm_setting");
+  }
+
+  postSetting(settingYaml: string) {
+    return axios.post<PostApiResponse>("/api/pbm_setting", { setting_yaml: settingYaml });
+  }
+
+  getSettingDigest() {
+    return axios.get<SettingDigestApiResponse>("/api/pbm_setting_digest");
+  }
+}

data/src/pages/bpm_page.tsx

@@ -0,0 +1,92 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useEffect } from "react";
+import { HttpClient } from "../lib/http_client";
+import { PbmStats } from "../types/pbm_stats";
+
+type Prop = {
+};
+
+const httpClient = new HttpClient();
+
+export const BpmPage= ({}:Prop) => {
+  const [pbmStats, setPbmStats] = useState("");
+
+  const handlePbmStats = (e: React.MouseEvent<HTMLElement>) => {
+    httpClient.getPbmStats()
+      .then(function (response) {
+        setPbmStats(`${response.data.stats}(${response.data.pid})`);
+      })
+  }
+  const handleStartPbm = (e: React.MouseEvent<HTMLElement>) => {
+    httpClient.startPbm()
+      .then(function (response) {
+        if(response.data.result === "ok") {
+          setPbmStats("waiting" as PbmStats);
+        } else {
+          setPbmStats("error" as PbmStats);
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      })
+  }
+
+  const handleStopPbm = (e: React.MouseEvent<HTMLElement>) => {
+    httpClient.stopPbm()
+      .then(function (response) {
+        if(response.data.result === "ok") {
+          setPbmStats("waiting" as PbmStats);
+        } else {
+          setPbmStats("error" as PbmStats);
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      })
+  }
+
+  const handleReloadPbmSetting = (e: React.MouseEvent<HTMLElement>) => {
+    httpClient.reloadPbmSetting()
+      .then(function (response) {
+        if(response.data.result === "ok") {
+          setPbmStats("stopped" as PbmStats);
+        } else {
+          setPbmStats("error" as PbmStats);
+        }
+      })
+      .catch(function (error) {
+        console.log(error);
+      })
+  }
+
+  const isShowRestartButton = () => {
+    return pbmStats == "running";
+  }
+
+  const isShowStartButton = () => {
+    return pbmStats == "stopped";
+  }
+
+  const isShowStopButton = () => {
+    return pbmStats == "running";
+  }
+
+  useEffect(() => {
+    httpClient.getPbmStats()
+      .then(function (response) {
+        setPbmStats(`${response.data.stats}(${response.data.pid})`);
+      })
+  }, [])
+
+  return (
+    <>
+      <h2>PBMのステータス: {pbmStats}</h2>
+      <input type="button" onClick={handlePbmStats} value="現在のステータスを取得する" />
+      {isShowStopButton() && <input type="button" onClick={handleStopPbm} value="停止する" />}
+      {isShowStartButton() && <input type="button" onClick={handleStartPbm} value="開始する" />}
+      {pbmStats === "running" && <input type="button" onClick={handleReloadPbmSetting} value="設定を再読み込みする" />}
+    </>
+  )
+}

data/src/pages/buttons_setting_page.tsx

@@ -0,0 +1,281 @@
+/** @jsx jsx */
+
+import { jsx, css } from '@emotion/react'
+import React, { useState, useEffect, useContext, useRef } from "react";
+import { ButtonsSetting } from "../components/buttons_setting";
+import { Button, buttons } from "../types/button";
+import { LayerKey, layerKeys } from "../types/layer_key";
+import { ButtonInLayer, ButtonsInLayer, ButtonsSettingType, Layers, Flip, Macro, StructMacro, ModeTable, StructMode } from "../types/buttons_setting_type";
+import { HttpClient, SettingApiResponse } from "../lib/http_client";
+import { ButtonState } from "./../lib/button_state";
+import { ButtonStateDiff } from "./../lib/button_state_diff";
+import { ButtonsSettingContext, } from "./../contexts/buttons_setting";
+import { ButtonsSettingConverter } from "./../lib/buttons_setting_converter";
+import { disableFlipType, alwaysFlipType, flipIfPressedSelfType, flipIfPressedSomeButtonsType, ignoreButtonsInFlipingType, remapType, closeMenuType, applyMacroType, installMacroType, installModeType, applyModeType } from "../reducers/layer_reducer";
+import { ButtonsModal } from "../components/buttons_modal";
+import { InstallableMacros } from "../components/installable_macros";
+import { InstallableModes } from "../components/installable_modes";
+import _ from 'lodash';
+import md5 from 'md5';
+
+const httpClient = new HttpClient();
+
+interface LayerRef {
+  setVisibility(status: string): string;
+};
+
+export const ButtonsSettingPage = () => {
+  const { loaded, setLoaded, layers, layersDispatch, prefixKeys, setPrefixKeys } = useContext(ButtonsSettingContext);
+  const [selectedLayer, setSelectedLayer] = useState<LayerKey>("up");
+  const layerRefs = layerKeys.map((l) => ({} as LayerRef));
+  const [initializedSetting, setInitializedSetting] = useState({} as ButtonsSettingType)
+  const [infoMessage, setInfoMessage] = useState(undefined as undefined | string)
+
+  const switchLayer = (event:  React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (event.target instanceof HTMLElement) {
+      setSelectedLayer(event.target.dataset.layerKey as LayerKey);
+      layerRefs.forEach(r => r.setVisibility("hidden"));
+      layerRefs[
+        Number(event.target.dataset.layerKeyIndex)
+      ].setVisibility("shown");
+    }
+  }
+  const exportSetting = () => {
+    const body = ButtonsSettingConverter({ prefixKeys: prefixKeys, layers: layers })
+    var data = new Blob([body], { type: 'text/yaml' })
+    var csvURL = window.URL.createObjectURL(data);
+    const tempLink = document.createElement('a');
+    tempLink.href = csvURL;
+    tempLink.setAttribute('download', 'setting.yml');
+    tempLink.click();
+  }
+  const applySetting = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    httpClient.postSetting(
+      ButtonsSettingConverter({ prefixKeys: prefixKeys, layers: layers })
+    ).then(
+      function (response) {
+        alert("設定ファイルのパスへ書き込みが完了しました");
+        reset();
+      });
+  }
+  const changes = (): Array<string> => {
+    return ButtonStateDiff({
+      before: initializedSetting,
+      after: { prefix_keys_for_changing_layer: prefixKeys, layers: layers },
+    })
+  }
+  const reset = () => {
+    setInitializedSetting({
+      prefix_keys_for_changing_layer: prefixKeys,
+      layers: _.cloneDeep(layers),
+    });
+    isUptodate()
+  }
+  const isUptodate = () => {
+    httpClient.getSettingDigest().then(function (response) {
+      const digest = md5(
+        ButtonsSettingConverter({ prefixKeys: prefixKeys, layers: layers })
+      )
+      console.log("digest:", digest);
+      if(digest === response.data.digest) {
+        console.log("最新です")
+        setInfoMessage("設定が反映済みです。")
+      } else {
+        setInfoMessage("設定が未反映です. PBMの再起動が必要です。")
+      }
+    }).catch(function (error) {
+      if (error.response.status === 404) {
+        setInfoMessage("PBMを起動していません。")
+      } else {
+        console.log("想定外のエラーです");
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (loaded) {
+      reset();
+
+      layerRefs[0].setVisibility("shown");
+      return;
+    }
+
+    httpClient.getSetting()
+      .then(function (response) {
+        const body = response.data.setting_group_by_button as SettingApiResponse;
+
+        if(body.installed_macros) {
+          body.installed_macros.forEach((installed_macro: string) => {
+            layersDispatch({ type: installMacroType, payload: { installed_macro: installed_macro }});
+          })
+        }
+
+        if(body.installed_modes) {
+          body.installed_modes.forEach((modeName: string) => {
+            layersDispatch({ type: installModeType, payload: { installed_mode: modeName } });
+          })
+        }
+
+        setPrefixKeys(response.data.setting.prefix_keys_for_changing_layer);
+        const layers = layerKeys.reduce((a, key) => {
+          a[key] = response.data.setting_group_by_button.layers[key];
+          return a;
+        }, {} as Layers)
+
+        layerKeys.forEach((layerKey) => {
+          const macroTable = layers[layerKey].macro as Macro
+          if(macroTable) {
+            Object.entries(macroTable).forEach((val, i) => {
+              const name = val[0];
+              const ifPressed = val[1];
+              const macro = { name: name, if_pressed: ifPressed } as StructMacro
+              layersDispatch({ type: applyMacroType, payload: { layerKey: layerKey, macro: macro }});
+            })
+          }
+          const modeTable = layers[layerKey].mode as ModeTable;
+          if(modeTable) {
+            Object.entries(modeTable).forEach((val, i) => {
+              const name = val[0];
+              const mode = { name: name } as StructMode;
+              layersDispatch({ type: applyModeType, payload: { layerKey: layerKey, mode: mode }});
+            })
+          } else {
+            layersDispatch({ type: applyModeType, payload: { layerKey: layerKey, mode: { name: "disable" } }});
+          }
+
+          buttons.forEach((button) => {
+            const buttonState = new ButtonState(
+              button,
+              layers[layerKey][button]?.flip, layers[layerKey][button]?.remap,
+            );
+            const flip = layers[layerKey][button]?.flip || {} as Flip
+
+            if(layers[layerKey][button] === undefined) {
+              layersDispatch({ type: closeMenuType, payload: { layerKey: layerKey, button: button }});
+            } else if (layers[layerKey][button].remap?.to) {
+              layersDispatch({ type: remapType, payload: { layerKey: layerKey, button: button, targetButtons: layers[layerKey][button].remap?.to }});
+            } else if (buttonState.hasFlipSetting()) {
+              layersDispatch({ type: ignoreButtonsInFlipingType, payload: { layerKey: layerKey, button: button, targetButtons: flip.force_neutral }});
+
+              if(buttonState.isDisabledFlip()) {
+                layersDispatch({ type: disableFlipType, payload: { layerKey: layerKey, button: button }});
+              } else if (buttonState.isAlwaysFlip()) {
+                layersDispatch({ type: alwaysFlipType, payload: { layerKey: layerKey, button: button }});
+              } else if (buttonState.isFlipIfPressedSelf()) {
+                layersDispatch({ type: flipIfPressedSelfType, payload: { layerKey: layerKey, button: button }});
+              } else if (buttonState.isFlipIfPressedSomeButtons()) {
+                layersDispatch({ type: flipIfPressedSomeButtonsType, payload: { layerKey: layerKey, button: button, targetButtons: layers[layerKey][button].flip?.if_pressed }});
+              }
+            } else {
+              console.log("unexpectですです!!!!!!!!!!!!!");
+            }
+          });
+        });
+
+        setLoaded(true);
+      }).catch(function (error) {
+        if (error.response.status === 404) {
+          setInfoMessage("設定ファイルのパスが未設定です")
+        } else {
+          console.log("想定外のエラーです");
+        }
+      })
+
+  }, [loaded]);
+
+  const layersTabStyle = () => {
+    return css`
+      list-style: none;
+      display:flex;
+      margin: 0;
+      padding: 0;
+      border-left: 1px solid #aaa;
+      margin-bottom: 30px;
+      li {
+        border-top: 1px solid #aaa;
+        border-right: 1px solid #aaa;
+        &.active {
+          border-bottom: 1px solid #white;
+        }
+        &.inactive {
+          border-bottom: 1px solid #aaa;
+        }
+        a {
+          padding: 20px;
+          display: block;
+          &:hover {
+           cursor:pointer;
+          }
+        }
+      }
+    `;
+  }
+  const liClassName = (layer: LayerKey) => {
+    if(layer === selectedLayer) {
+      return "active"
+    } else {
+      return "inactive"
+    };
+  }
+  const handlePrefixKeysField = () => {
+    setOpenModal(true)
+    setModalTitle("キープレフィックスの変更")
+    setModalPrefillButtons(prefixKeys);
+    setModalCallbackOnSubmit(() => setPrefixKeys);
+    setModalCloseCallback(() => setOpenModal);
+  }
+
+  // for modal
+  const [openModal, setOpenModal] = useState(false)
+  const [modalCallbackOnSubmit, setModalCallbackOnSubmit] = useState(undefined as any)
+  const [modalCloseCallback, setModalCloseCallback] = useState(undefined as any)
+  const [modalTitle, setModalTitle] = useState("")
+  const [modalPrefillButtons, setModalPrefillButtons] = useState<Array<Button>>([])
+
+  return(
+    <>
+      <div css={css`display: table`}>
+        <div css={css`display: table-cell; width: 400px;`}>
+          <h2>設定ファイルの変更</h2>
+          <div>
+            <a href="#" onClick={exportSetting}>エクスポートする</a>
+          </div>
+
+          <h3>インストール可能なマクロ</h3>
+          {loaded && <InstallableMacros />}
+
+          <h3>インストール可能なモード</h3>
+          {loaded && <InstallableModes />}
+
+          <h3>設定中のプレフィックスキー</h3>
+          <div css={css`position: relative; margin-bottom: 20px;`}>
+            <input type="text" value={prefixKeys.join(", ")} readOnly={true} onClick={handlePrefixKeysField} />
+            {openModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={modalPrefillButtons} positionOnShown={"stay"} />}
+          </div>
+        </div>
+        <div css={css`display: table-cell`}>
+          <h2></h2>
+          <div>
+            <a href="#" onClick={applySetting}>変更した設定でsetting.ymlへ上書きする</a>
+            <div>{infoMessage}</div>
+            <ul>
+              {loaded && changes().map((c, i) => <li key={i}>{c}</li>)}
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <ul css={layersTabStyle()}>
+        {layerKeys.map((l, index) => (
+          <li key={l} className={`${liClassName(l)}`}>
+            <a data-layer-key-index={index} data-layer-key={l} onClick={switchLayer}>{l}</a>
+          </li>
+        ))}
+      </ul>
+
+      {loaded && layerKeys.map((l, index) => (<ButtonsSetting key={index} layerKey={l} layerRef={layerRefs[index]} />))}
+      {!loaded && "loading..."}
+    </>
+  )
+}