Cleanup and maintenance

package.json

@@ -112,6 +112,7 @@
     "@appigram/react-rangeslider": "2.2.10",
     "@octokit/core": "^4.2.1",
     "@serialport/parser-delimiter": "^10.0.0",
+    "@types/react-rangeslider": "^2.2.4",
     "@xstate/react": "^3.2.2",
     "async": "^3.2.4",
     "axios": "^1.4.0",

src/renderer/App.jsx

@@ -21,32 +21,32 @@ import { ToastContainer, toast } from "react-toastify";
 import { ThemeProvider } from "styled-components";
 import { ipcRenderer } from "electron";
 import path from "path";
-import withRouter from "./utils/withRouter";
-import i18n from "./i18n";
+import withRouter from "@Renderer/utils/withRouter";
+import i18n from "@Renderer/i18n";
 
-import Focus from "../api/focus";
-import "../api/keymap";
-import "../api/colormap";
 import "react-toastify/dist/ReactToastify.css";
 
-import GlobalStyles from "./theme/GlobalStyles";
-import Light from "./theme/LightTheme";
-import Dark from "./theme/DarkTheme";
+import GlobalStyles from "@Renderer/theme/GlobalStyles";
+import Light from "@Renderer/theme/LightTheme";
+import Dark from "@Renderer/theme/DarkTheme";
 
-import SelectKeyboard from "./views/SelectKeyboard";
-import FirmwareUpdate from "./views/FirmwareUpdate";
-import LayoutEditor from "./views/LayoutEditor";
-import MacroEditor from "./views/MacroEditor";
-import SuperkeysEditor from "./views/SuperkeysEditor";
-import Preferences from "./views/Preferences";
-import Wireless from "./views/Wireless";
-import Welcome from "./views/Welcome";
+import SelectKeyboard from "@Renderer/views/SelectKeyboard";
+import FirmwareUpdate from "@Renderer/views/FirmwareUpdate";
+import LayoutEditor from "@Renderer/views/LayoutEditor";
+import MacroEditor from "@Renderer/views/MacroEditor";
+import SuperkeysEditor from "@Renderer/views/SuperkeysEditor";
+import Preferences from "@Renderer/views/Preferences";
+import Wireless from "@Renderer/views/Wireless";
+import Welcome from "@Renderer/views/Welcome";
 
-import Header from "./modules/NavigationMenu";
-import ToastMessage from "./component/ToastMessage";
-import { IconNoSignal } from "./component/Icon";
+import Header from "@Renderer/modules/NavigationMenu";
+import ToastMessage from "@Renderer/component/ToastMessage";
+import { IconNoSignal } from "@Renderer/component/Icon";
 
-import Store from "./utils/Store";
+import Store from "@Renderer/utils/Store";
+import Focus from "../api/focus";
+import "../api/keymap";
+import "../api/colormap";
 
 const store = Store.getStore();
 
@@ -95,7 +95,7 @@ class App extends React.Component {
     // Loading font to be sure it wont blink
     // document.fonts.load("Libre Franklin");
 
-    const fontFace = new FontFace("Libre Franklin", "./theme/fonts/LibreFranklin/LibreFranklin-VariableFont_wght.ttf");
+    const fontFace = new FontFace("Libre Franklin", "@Renderer/theme/fonts/LibreFranklin/LibreFranklin-VariableFont_wght.ttf");
     console.log("Font face: ", fontFace);
     document.fonts.add(fontFace);
 

src/renderer/component/Modal/AdvancedBatterySettingsModal.jsx → src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx

@@ -12,27 +12,60 @@ import Title from "@Renderer/component/Title";
 import { Badge } from "@Renderer/component/Badge";
 import { RegularButton } from "@Renderer/component/Button";
 import { ToggleButtons } from "@Renderer/component/ToggleButtons";
+import { AdvancedEnergyManagementProps } from "@Renderer/types/wireless";
 
-import i18n from "../../i18n";
+import i18n from "@Renderer/i18n";
 
-function AdvancedBatterySettingsModal({ showModal, setShowModal }) {
+function AdvancedBatterySettingsModal(props: AdvancedEnergyManagementProps) {
+  const { wireless, changeWireless, showModal, setShowModal } = props;
   const RFModes = [
     {
       name: "Low",
-      value: "low",
+      value: 0,
       index: 0,
     },
     {
       name: "Medium",
-      value: "medium",
+      value: 1,
       index: 1,
     },
     {
       name: "High",
-      value: "high",
+      value: 2,
       index: 2,
     },
   ];
+
+  const setBrightness = async (value: number) => {
+    const newWireless = { ...wireless };
+    newWireless.brightness = (value * 255) / 100;
+    changeWireless(newWireless);
+  };
+
+  const setBrightnessUG = async (value: number) => {
+    const newWireless = { ...wireless };
+    newWireless.brightnessUG = (value * 255) / 100;
+    changeWireless(newWireless);
+  };
+
+  const setIdleleds = async (value: number) => {
+    const newWireless = { ...wireless };
+    newWireless.idleleds = value * 60;
+    changeWireless(newWireless);
+  };
+
+  const setFade = async (value: any) => {
+    const newWireless = { ...wireless };
+    newWireless.fade = value.target.checked ? 1 : 0;
+    changeWireless(newWireless);
+  };
+
+  const setRfPower = async (value: number) => {
+    const newWireless = { ...wireless };
+    newWireless.rf.power = value;
+    changeWireless(newWireless);
+  };
+
   return (
     <Modal size="xl" show={showModal} onHide={() => setShowModal(false)} aria-labelledby="contained-modal-title-vcenter" centered>
       <Modal.Header closeButton>
@@ -52,7 +85,7 @@ function AdvancedBatterySettingsModal({ showModal, setShowModal }) {
               <Col lg={5}>
                 <div className="slider-wrapper">
                   <span className="tagsfix slider-label">0%</span>
-                  <Slider min={1} max={100} value={80} onChange={() => {}} />
+                  <Slider min={1} max={100} value={Math.round((wireless.brightness * 100) / 255)} onChange={setBrightness} />
                   <span className="tagsfix slider-label">100%</span>
                 </div>
               </Col>
@@ -64,11 +97,23 @@ function AdvancedBatterySettingsModal({ showModal, setShowModal }) {
               <Col lg={5}>
                 <div className="slider-wrapper">
                   <span className="tagsfix slider-label">0%</span>
-                  <Slider min={1} max={100} value={80} onChange={() => {}} />
+                  <Slider min={1} max={100} value={Math.round((wireless.brightnessUG * 100) / 255)} onChange={setBrightnessUG} />
                   <span className="tagsfix slider-label">100%</span>
                 </div>
               </Col>
             </Row>
+            <Row className="card-preferences--option justify-between">
+              <Col lg={5}>
+                <Title text={i18n.wireless.energyManagement.settings.idleLedsTime} headingLevel={6} />
+              </Col>
+              <Col lg={5}>
+                <div className="slider-wrapper">
+                  <span className="tagsfix slider-label">off </span>
+                  <Slider min={0} max={60} value={Math.round(wireless.idleleds / 60)} onChange={setIdleleds} />
+                  <span className="tagsfix slider-label">60 min</span>
+                </div>
+              </Col>
+            </Row>
           </Card.Body>
         </Card>
         <Card className="overflowFix card-preferences card-preferences--battery mt-4">
@@ -81,7 +126,7 @@ function AdvancedBatterySettingsModal({ showModal, setShowModal }) {
               <Col sm={8} lg={5}>
                 <Title text={i18n.wireless.energyManagement.settings.highlightLayerChangingDesc} headingLevel={6} />
               </Col>
-              <Form.Check type="switch" id="toggleLayerHighlight" checked={false} onChange={() => {}} />
+              <Form.Check type="switch" id="toggleLayerHighlight" checked={wireless.fade === 1} onChange={setFade} />
             </Row>
           </Card.Body>
         </Card>
@@ -99,13 +144,13 @@ function AdvancedBatterySettingsModal({ showModal, setShowModal }) {
                   headingLevel={6}
                 />
               </Col>
-              <ToggleButtons selectDarkMode={() => {}} value="medium" listElements={RFModes} style="flex" size="sm" />
-            </Row>
-            <Row className="card-preferences--option justify-between">
-              <Col sm={8} lg={5}>
-                <Title text={i18n.wireless.energyManagement.settings.reduceRFFrequency} headingLevel={6} />
-              </Col>
-              <Form.Check type="switch" id="toggleLayerHighlight" checked={false} onChange={() => {}} />
+              <ToggleButtons
+                selectDarkMode={setRfPower}
+                value={wireless.rf.power}
+                listElements={RFModes}
+                style="flex"
+                size="sm"
+              />
             </Row>
           </Card.Body>
         </Card>