feat: Add settings page

tosuapp · Feb 28, 2024 · d667bcb · d667bcb
1 parent 11fea7b
commit d667bcb
Show file tree

Hide file tree

Showing 9 changed files with 1,091 additions and 1,072 deletions.
diff --git a/packages/common/utils/config.ts b/packages/common/utils/config.ts
@@ -185,3 +185,8 @@ export const refreshConfig = (httpServer: any, refresh: boolean) => {
     if (updated) wLogger.info(`Config ${status}ed`);
     configureLogger();
 };
+
+export const writeConfig = (httpServer: any, text: string) => {
+    fs.writeFileSync(configPath, text, 'utf8');
+    refreshConfig(httpServer, true);
+};
diff --git a/packages/server/assets/homepage.html b/packages/server/assets/homepage.html
@@ -19,6 +19,7 @@
     <div class="tabs flexer">
       <a href="/?tab=0" class="tab-item">Installed</a>
       <a href="/?tab=1" class="tab-item">Available</a>
+      <a href="/?tab=2" class="tab-item">Settings</a>
       <div class="indent-left">
         <input class="search-bar" type="text" placeholder="search">
         <!-- <a href="https://github.com/cyperdark/osu-counters/?tab=readme-ov-file#how-to-submit-pp-counter" target="_blank" class="button submit-button">Submit</a> -->

diff --git a/packages/server/assets/homepage.js b/packages/server/assets/homepage.js
diff --git a/packages/server/assets/homepage.min.css b/packages/server/assets/homepage.min.css
@@ -8,6 +8,7 @@
     --button-download: #568cc7;
     --button-delete: #d57397;
     --button-open: #73a6d5;
+    --button-save: #73a6d5;
     --submit-delete: #56c763;
     --notification-block-green: #56c763;
     --notification-color-green: #191e25;
@@ -16,6 +17,8 @@
     --search-color-2: #707f8d;
     --search-color-1: #cbd8e5;
     --search-block: #3f4e5d;
+    --header-color: #939393;
+    --header-background: #14171c;
 }
 * {
     position: relative;
@@ -71,13 +74,80 @@ iframe {
     -moz-user-select: none;
     user-select: none;
 }
+header {
+    position: sticky;
+    font-size: 0.9em;
+    color: var(--header-color);
+    top: 0;
+    gap: 1.2em;
+    height: 2em;
+    z-index: 2;
+}
+header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -1000px;
+    right: -1000px;
+    bottom: 0;
+    background: var(--header-background);
+}
+header a {
+    text-decoration: none;
+    color: var(--header-color) !important;
+    gap: 0.7em;
+    transition: filter 0.2s ease;
+}
+header a img {
+    width: 1.2em;
+    height: 1.2em;
+}
+header a:hover {
+    filter: brightness(1.2);
+}
+header a::before,
+header a::after {
+    content: '';
+    -webkit-mask-image: var(--icon-image);
+    mask-image: var(--icon-image);
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    width: 1em;
+    height: 1em;
+    background-color: var(--header-color);
+}
+header a.github {
+    --icon-image: url('/images/github.svg');
+}
+header a.github::after {
+    display: none;
+}
+header a.sbmt {
+    --icon-image: url('/images/link.svg');
+}
+header a.sbmt::before {
+    display: none;
+}
+header a.discord {
+    --icon-image: url('/images/discord.svg');
+}
+header a.discord::before {
+    width: 1.3em;
+}
+header a.discord::after {
+    display: none;
+}
+.imglink {
+    font-size: 0.9em;
+}
 main {
     display: grid;
     min-height: 0;
-    margin-top: 1em;
+    margin-top: 2em;
     margin-bottom: 3em;
 }
 footer {
+    font-weight: 600;
     text-align: center;
     font-size: 0.8em;
     position: sticky;
@@ -113,7 +183,7 @@ a {
 .tabs {
     justify-content: center;
     position: sticky;
-    top: 1em;
+    top: 2em;
     width: calc(100% - 1.5em);
     margin: 0 auto;
     gap: 1em;
@@ -237,6 +307,7 @@ a {
     }
 }
 .button {
+    white-space: nowrap;
     text-decoration: none;
     font-size: 0.9em;
     font-weight: 700;
@@ -292,6 +363,10 @@ a {
     color: var(--background-1);
     background: var(--button-open);
 }
+.save-button {
+    color: var(--background-1);
+    background: var(--button-save);
+}
 .submit-button {
     display: block;
     color: var(--background-1);
@@ -324,3 +399,91 @@ a {
     filter: grayscale(1);
     opacity: 0.5;
 }
+.settings {
+    display: grid;
+    gap: 0.8em;
+    color: var(--block-color-1);
+    padding: 1em;
+    background: var(--block-1);
+    border-radius: 0.3em;
+}
+.settings .si-btn {
+    margin-top: 1em;
+}
+.si div:nth-child(1) {
+    width: 25em;
+}
+.si p,
+.si .settings-note {
+    filter: brightness(0.8);
+    font-size: 0.8em;
+    max-width: 25em;
+}
+.si .settings-note {
+    margin-top: 0.5em;
+    font-style: italic;
+}
+.si input[type='text'],
+.si input[type='number'] {
+    font-size: 0.9em;
+    font-family: inherit;
+    color: var(--search-color-1);
+    width: 20em;
+    padding: 0.2em 0.6em;
+    background: var(--search-block);
+    outline: 0;
+    border-radius: 0.2em;
+    border: 0;
+    transition: 0.2s ease;
+    transition-property: filter, opacity;
+}
+.si input[type='text']::-moz-placeholder,
+.si input[type='number']::-moz-placeholder {
+    color: var(--search-color-2);
+}
+.si input[type='text']::placeholder,
+.si input[type='number']::placeholder {
+    color: var(--search-color-2);
+}
+.si-checkbox {
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    gap: 0.4em;
+    height: 1em;
+}
+.si-checkbox input {
+    display: none;
+}
+.si-checkbox input:checked ~ .checkmark::before {
+    scale: 0.7;
+    background: var(--search-color-1);
+}
+.si-checkbox input:checked ~ .status::before {
+    content: 'Enabled';
+}
+.si-checkbox .checkmark {
+    background: #637a91;
+    width: 1em;
+    height: 1em;
+    border-radius: 0.2em;
+    overflow: hidden;
+    display: block;
+}
+.si-checkbox .checkmark::before {
+    content: '';
+    display: block;
+    width: 1em;
+    height: 1em;
+    scale: 1;
+    background: #637a91;
+    transition: background 0.1s ease, scale 0.3s ease;
+    border-radius: 0.2em;
+}
+.si-checkbox .status {
+    font-size: 0.9em;
+}
+.si-checkbox .status::before {
+    content: 'Disabled';
+}
diff --git a/packages/server/index.ts b/packages/server/index.ts
@@ -8,7 +8,7 @@ import { Websocket } from './utils/socket';
 
 export class Server {
     instanceManager: any;
-    app = new HttpServer();
+    app = new HttpServer(this);
 
     constructor({ instanceManager }: { instanceManager: any }) {
         this.instanceManager = instanceManager;

diff --git a/packages/server/router/index.ts b/packages/server/router/index.ts
@@ -181,6 +181,48 @@ export default function buildBaseApi(app: HttpServer) {
         }
     });
 
+    app.route('/api/settingsSave', 'POST', (req, res) => {
+        const body = req.body;
+        // try {
+        //     body = JSON.parse(req.body);
+        // } catch (error) {
+        //     return sendJson(res, {
+        //         error: (error as any).message,
+        //     });
+        // };
+
+        if (body == '') {
+            return sendJson(res, {
+                error: 'No settings'
+            });
+        }
+
+        writeConfig(app.Server, body);
+
+        sendJson(res, {
+            status: 'updated'
+        });
+    });
+
+    app.route(/\/images\/(?<filePath>.*)/, 'GET', (req, res) => {
+        // @KOTRIK REMOVE THAT SHIT
+        fs.readFile(
+            path.join(
+                'F:/coding/wip/tosu/packages/server/assets/',
+                'images',
+                req.params.filePath
+            ),
+            (err, content) => {
+                res.writeHead(200, {
+                    'Content-Type': getContentType(req.params.filePath)
+                });
+                // console.log(res.getHeaders(), req.params, err, path.join('F:/coding/wip/tosu/packages/server/assets/', 'images', req.params.filePath));
+
+                res.end(content);
+            }
+        );
+    });
+
     app.route('/homepage.min.css', 'GET', (req, res) => {
         // @KOTRIK REMOVE THAT SHIT
         fs.readFile(