feat(webui): change server config through UI (#294)

src/controllers/custom/getConfigDataController.ts

@@ -0,0 +1,8 @@
+import { RequestHandler } from "express";
+import configFile from "@/config.json";
+
+const getConfigDataController: RequestHandler = (_req, res) => {
+    res.json(configFile);
+};
+
+export { getConfigDataController };

src/controllers/custom/updateConfigDataController.ts

@@ -0,0 +1,16 @@
+import { RequestHandler } from "express";
+import path from "path";
+import fs from "fs";
+const rootDir = path.join(__dirname, "../../..");
+
+const updateConfigDataController: RequestHandler = (req) => {
+    const updateSettingsData = req.body;
+    
+    fs.writeFile(path.join(rootDir, "config.json"), updateSettingsData, function(err:any) {
+        if(err) {
+            return console.log(err);
+        }
+    });
+};
+
+export { updateConfigDataController };

src/routes/custom.ts

@@ -2,6 +2,8 @@ import express from "express";
 import { getItemListsController } from "@/src/controllers/custom/getItemListsController";
 import { createAccountController } from "@/src/controllers/custom/createAccountController";
 import { addItemController } from "@/src/controllers/custom/addItemController";
+import { getConfigDataController } from "@/src/controllers/custom/getConfigDataController";
+import { updateConfigDataController } from "@/src/controllers/custom/updateConfigDataController";
 
 const customRouter = express.Router();
 
@@ -10,4 +12,7 @@ customRouter.get("/getItemLists", getItemListsController);
 customRouter.post("/createAccount", createAccountController);
 customRouter.post("/addItem", addItemController);
 
+customRouter.get("/config", getConfigDataController);
+customRouter.post("/config", updateConfigDataController);
+
 export { customRouter };

src/routes/webui.ts

@@ -19,6 +19,9 @@ webuiRouter.use("/webui", (req, res, next) => {
 });
 
 // Serve virtual routes
+webuiRouter.get("/webui/settings", (_req, res) => {
+    res.sendFile(path.join(rootDir, "static/webui/index.html"));
+});
 webuiRouter.get("/webui/inventory", (_req, res) => {
     res.sendFile(path.join(rootDir, "static/webui/index.html"));
 });

static/webui/index.html

@@ -67,15 +67,21 @@
                                     Mods
                                 </a>
                             </li>
+                            <li class="nav-item">
+                                <a
+                                    class="nav-link"
+                                    href="/webui/settings"
+                                    data-bs-dismiss="offcanvas"
+                                    data-bs-target="#sidebar"
+                                >
+                                    Settings
+                                </a>
+                            </li>
                         </ul>
                     </div>
                 </div>
             </div>
             <div>
-                <p id="refresh-note" class="mb-4">
-                    Note: Changes made here will only be reflected in-game when the game re-downloads your inventory.
-                    Visiting the navigation should be the easiest way to trigger that.
-                </p>
                 <div data-route="/webui/" data-title="Login | OpenWF WebUI">
                     <p>Login using your OpenWF account credentials.</p>
                     <form onsubmit="doLogin();return false;">
@@ -89,6 +95,10 @@
                     </form>
                 </div>
                 <div data-route="/webui/inventory" data-title="Inventory | OpenWF WebUI">
+                    <p id="refresh-note" class="mb-4">
+                        Note: Changes made here will only be reflected in-game when the game re-downloads your inventory.
+                        Visiting the navigation should be the easiest way to trigger that.
+                    </p>
                     <div class="card mb-4">
                         <h5 class="card-header">Add Items</h5>
                         <form class="card-body input-group" onsubmit="doAcquireMiscItems();return false;">
@@ -133,6 +143,10 @@
                     </div>
                 </div>
                 <div data-route="/webui/mods" data-title="Mods | OpenWF WebUI">
+                    <p id="refresh-note" class="mb-4">
+                        Note: Changes made here will only be reflected in-game when the game re-downloads your inventory.
+                        Visiting the navigation should be the easiest way to trigger that.
+                    </p>
                     <div class="row">
                         <div class="col-xxl-6">
                             <div class="card mb-4">
@@ -189,6 +203,62 @@
                         </div>
                     </div>
                 </div>
+                <div data-route="/webui/settings" data-title="Settings | OpenWF WebUI">
+                    <div class="card mb-4">
+                        <h5 class="card-header">Change Settings</h5>
+                        <form class="card-body" onsubmit="doChangeSettings();return false;">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="skipStoryModeChoice"  />
+                                <label label class="form-check-label" for="skipStoryModeChoice">Skip Story Mode Choice?</label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="skipTutorial"  />
+                                <label label class="form-check-label" for="skipTutorial">Skip Tutorial?</label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="unlockAllScans"  />
+                                <label label class="form-check-label" for="unlockAllScans">Unlock All Scans?</label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="unlockAllMissions"  />
+                                <label label class="form-check-label" for="unlockAllMissions">Unlock All Missions?</label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="unlockAllQuests"  />
+                                <label label class="form-check-label" for="unlockAllQuests">Unlock All Quests?</label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="completeAllQuests"  />
+                                <label label class="form-check-label" for="completeAllQuests">Complete All Quests?</label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="infiniteResources"  />
+                                <label label class="form-check-label" for="infiniteResources">Infinite Credits and Platinum?</label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="unlockallShipFeatures"  />
+                                <label label class="form-check-label" for="unlockallShipFeatures">Unlock All Ship Features?</label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="unlockAllShipDecorations"  />
+                                <label label class="form-check-label" for="unlockAllShipDecorations">Unlock All Ship Decorations?</label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="unlockAllFlavourItems"  />
+                                <label label class="form-check-label" for="unlockAllFlavourItems">Unlock All Accessories?</label>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="unlockAllSkins"  />
+                                <label label class="form-check-label" for="unlockAllSkins">Unlock All Skins?</label>
+                            </div>
+                            <div class="form-check">
+                                <label label class="form-check-label" for="spoofMasteryRank">Spoofed Mastery Rank (-1 to disable)</label>
+                                <input class="form-control" id="spoofMasteryRank" type="number" min="-1" value="" />
+                            </div>
+                            <button class="btn btn-primary" type="submit">Save Settings</button>
+                        </form>
+                    </div>
+                </div>
             </div>
         </div>
         <datalist id="datalist-warframes"></datalist>

static/webui/script.js

@@ -15,6 +15,7 @@ function loginFromLocalStorage() {
             window.accountId = data.id;
             window.authz = "accountId=" + data.id + "&nonce=" + data.Nonce;
             updateInventory();
+            fetchSettings();
         },
         () => {
             logout();
@@ -618,3 +619,47 @@ function doAcquireMod() {
 $("#mod-to-acquire").on("input", () => {
     $("#mod-to-acquire").removeClass("is-invalid");
 });
+
+function fetchSettings() {
+    fetch('/custom/config')
+        .then((response) => response.json())
+        .then((json) => Object.entries(json).forEach((entry) => {
+            const [key, value] = entry;
+            var x = document.getElementById(`${key}`);
+            if (x!=null) {
+                if (x.type == "checkbox") {
+                    if (value === true) {
+                        x.setAttribute("checked", "checked")
+                    } 
+                } else if (x.type == "number") {
+                    x.setAttribute("value", `${value}`)
+                }
+            }
+        }));
+}
+
+function doChangeSettings() {
+    fetch('/custom/config')
+        .then((response) => response.json())
+        .then((json) => {
+            for(var i in json) {
+                var x = document.getElementById(`${i}`);
+                if (x!=null) {
+                    if (x.type == "checkbox") {
+                        if (x.checked === true) {
+                            json[i]=true;
+                        } else {
+                            json[i]=false;
+                        }
+                    } else if (x.type == "number") {
+                        json[i]=parseInt(x.value);
+                    }
+                }
+            }
+            $.post({
+                url: "/custom/config",
+                contentType: "text/plain",
+                data: JSON.stringify(json, null, 2)
+                })
+            })
+}