Merge branch 'zleyyij:main' into main

Author: PipeItToDevNull

.gitignore

@@ -1,3 +1,2 @@
 target/
 .DS_Store
-src/config.js

Dockerfile

@@ -5,7 +5,7 @@ FROM alpine:3.20 as builder
 RUN apk add --no-cache \
     build-base rustup
 RUN rustup-init -y
-RUN /root/.cargo/bin/cargo install wasm-pack wasm-bindgen-cli
+RUN /root/.cargo/bin/cargo install wasm-pack
 
 # create the app directory and copy in source
 RUN mkdir -p /app

src/index.html

@@ -24,40 +24,40 @@
     <span class="material-symbols-outlined minimize-icon">close</span>
     <span class="material-symbols-outlined maximize_icon">menu</span>
     <div class="sidebar">
-        <div id="sidebar-container">
-            <div style="flex-direction:row;">
-                <img id="logo" src="assets/logo.png">
-                <div id="sidebarControls">
-
-                    <label for="multiPointGraphCheckbox" style="color:#FFFFFF">
-                        <input type="checkbox" id="multiPointGraphCheckbox" name="multiPointGraphCheckbox">
-                        Select Multiple Datapoints to Graph
-                    </label>
-                    <div id="multiPointUI" style="display: none;">
-                        <input type="checkbox" id="remapCheckbox" name="remapCheckbox">
-                        <label for="remapCheckbox" style="color:#FFFFFF">Normalize Datapoints</label>
-                        <div class="custom-file">
-                            <input
-                                    type="button"
-                                    id="createMultiPointGraph"
-                                    value="Create Graph"
-                                    name="createMultiPointGraph"
-                                    class="custom-file-input"
-                            />
-                            <label for="createMultiPointGraph" class="custom-file-label">Create Graph</label>
-                        </div>
+        <div style="flex-direction:row;">
+            <img id="logo" src="assets/logo.png">
+            <div class="custom-file" id="fileUpload">
+                <input type="file" id="uploadedFile" class="custom-file-input" accept=".csv"/>
+                <label class="custom-file-label" for="uploadedFile">Choose file</label>
+                <label for="multiPointGraphCheckbox" style="color:#FFFFFF">
+                    <input type="checkbox" id="multiPointGraphCheckbox" name="multiPointGraphCheckbox">
+                    Select Multiple Datapoints to Graph
+                </label>
+                <div id="multiPointUI" style="display: none;">
+                    <input type="checkbox" id="remapCheckbox" name="remapCheckbox">
+                    <label for="remapCheckbox" style="color:#FFFFFF">Normalize Datapoints</label>
+                    <div class="custom-file">
+                        <input
+                                type="button"
+                                id="createMultiPointGraph"
+                                value="Create Graph"
+                                name="createMultiPointGraph"
+                                class="custom-file-input"
+                        />
+                        <label for="createMultiPointGraph" class="custom-file-label">Create Graph</label>
                     </div>
                 </div>
-                <div id="searchDiv" class="form-control">
-                    <input
-                            type="text"
-                            id="graphSearch"
-                            class="searchbar"
-                            placeholder="Add graph"
-                    />
-                </div>
-                <ul class="scrollbar scrollbar-frozen-dreams" id="searchResults" style="list-style: none"></ul>
             </div>
+
+            <div id="searchDiv" class="form-control">
+                <input
+                        type="text"
+                        id="graphSearch"
+                        class="searchbar"
+                        placeholder="Add graph"
+                />
+            </div>
+            <ul class="scrollbar scrollbar-frozen-dreams" id="searchResults" style="list-style: none"></ul>
         </div>
     </div>
 
@@ -67,9 +67,7 @@
         <div class="loading_icon" id="loadingIcon" style="display: none"></div>
         <div id="welcomeMessage">
             <h2>Welcome to HWGV!</h2>
-            <p>Drag and drop a HWinfo .csv file, select <strong>Choose file</strong> or paste a link to the file you wish to view.</p>
-            <input type="file" id="uploadedFile" class="custom-file-input" accept=".csv"/>
-            <label class="custom-file-label" for="uploadedFile">Choose file</label>
+            <p>Drag and drop a HWinfo .csv file or select <strong>Choose file</strong> to upload. You can also paste a link to the file below.</p>
             <input type="url" id="urlInput" placeholder="Paste link here" pattern="/http.*csv/gi"></input>
         </div>
     </div>

src/scripts/index.js

@@ -1,7 +1,6 @@
 // TODO; get rid of jquery
 import hwgv_parser, { parse_csv } from "./parser/pkg/hwgv_parser.js";
 import { buildGraphs, makeSearchResults } from "./ui.js";
-import { API_URL } from '../config.js';
 
 // initialize the wasm import
 // this should be preloaded
@@ -229,26 +228,16 @@ export async function parseCSV(
 
 // if a file is uploaded using the upload button, do the thing
 let upCheck = document.getElementById("uploadedFile");
-const apiUrl = `${API_URL}`;
-
-// This is a very hacky way to extract a URL and manually encode the &
-// You must operate on the raw string rather than using the URL property
-//  because `urlParams.get("url")` will terminate at the first &
 const urlParams = new URLSearchParams(window.location.search);
-let ampersandUrl = urlParams.toString().replace('url=', '');
-let csvUrl = ampersandUrl.replace(/&/g, '%26');
-
-console.log(`Raw URL: ${urlParams}`);
-console.log(`Clean URL: ${csvUrl}`);
-
 if (urlParams.get("url") == null) {
-    upCheck.onchange = function () {
-        document.getElementById("loadingIcon").style.display = "";
-        document.getElementById("welcomeMessage").style.display = "none";
+  upCheck.onchange = function () {
+    document.getElementById("loadingIcon").style.display = "";
+    document.getElementById("welcomeMessage").style.display = "none";
     parseCSV(document.getElementById("uploadedFile").files[0]);
-    };
+  };
 } else {
-  fetch(`${apiUrl}/?url=${csvUrl}`).then(file =>
+  // TODO: make it so that this whole schtick isn't hardcoded
+  fetch(`https://api.47c.in/hw/?url=${urlParams.get("url")}`).then(file =>
     file.blob().then(blb => parseCSV(blb))
   );
 }

src/scripts/parser/.gitignore

@@ -1,5 +1,4 @@
 /target
 /Cargo.lock
 /pkg
-.DS_Store
-/src/config.js
+.DS_Store

src/styles/charttheme.css

@@ -2,7 +2,7 @@
 @import 'https://code.highcharts.com/css/highcharts.css';
 
 .highcharts-background {
-    fill: var(--dark00);
+    fill: #3B4252;
 }
 
 .highcharts-title, .highcharts-subtitle, .highcharts-yaxis .highcharts-axis-title {

src/styles/style.css

@@ -16,25 +16,15 @@ File organization:
 
 */
 
-:root {
-    --dark00: #191C24;
-    --dark0: #222630;
-    --dark1: #333948;
-    --dark2: #3B4254;
-    --dim: #AAAAAA;
-    --white0: #F3F4F7;
-    --pink: #fdcbf1;
-    --purple: #B48EAD;
-    --blue: #AEE2FE;
-}
+
 
 :root {
     --sidebar-width: 14rem;
 }
 
 body {
     display: flex;
-    background-color: var(--dark00);
+    background-color: #3B4252;
     min-height: 100%;
     min-width: 100%;
     margin: 0;
@@ -52,43 +42,40 @@ html {
     display: flex;
 }
 
-#sidebarControls {
+#fileUpload {
     margin-top: 20px;
 }
 
-#sidebar-container {
-    padding-right: 1rem;
-}
-
 .scrollbar-frozen-dreams::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-    background-color: var(--white0);
+    background-color: #F5F5F5;
     border-radius: 10px;
 }
 
 .scrollbar-frozen-dreams::-webkit-scrollbar {
     width: 12px;
-    background-color: var(--white0);
+    background-color: #F5F5F5;
 }
 
 .scrollbar-frozen-dreams::-webkit-scrollbar-thumb {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
-    background-image: -webkit-gradient(linear, left bottom, left top, from(var(--pink)), color-stop(1%, var(--pink)),
+    background-image: -webkit-gradient(linear, left bottom, left top, from(#fdcbf1), color-stop(1%, #fdcbf1),
     to(#e6dee9));
-    background-image: -webkit-linear-gradient(bottom, var(--pink) 0%, var(--pink) 1%, #e6dee9 100%);
-    background-image: linear-gradient(to top, var(--pink) 0%, var(--pink) 1%, #e6dee9 100%);
+    background-image: -webkit-linear-gradient(bottom, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
+    background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
 }
 
 
 /* Sidebar*/
 .button:hover {
-    background-color: var(--dark1);
+    background-color: #3B4252;
 }
 
 .button {
-    background-color: var(--purple);
-    color: var(--white0);
+    background-color: #B48EAD;
+    border: none;
+    color: white;
     /*padding: 10px 10px;*/
     text-align: center;
     text-decoration: none;
@@ -107,7 +94,7 @@ input[type="checkbox"] {
 }
 
 .sidebar {
-    background-color: var(--dark0);
+    background-color: #2E3440;
     position: fixed;
     flex-direction: column;
     width: var(--sidebar-width);
@@ -124,7 +111,7 @@ input[type="checkbox"] {
 }
 
 .material-symbols-outlined {
-    color: var(--white0);
+    color: #F5F5F5;
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* IE10+/Edge */
@@ -153,7 +140,7 @@ input[type="checkbox"] {
 
 .minimize-icon:hover, .maximize_icon:hover {
     cursor: pointer;
-    color: var(--dim);
+    color: #AAAAAA;
 }
 
 
@@ -173,21 +160,14 @@ input[type="checkbox"] {
     margin: 0;
 }
 
-#uploadedFile.custom-file-input {
+#uploadedFile::file-selector-button, #uploadedFile::-webkit-file-upload-button {
     display: none;
 }
 
-.custom-file-label::after {
+.custom-file .custom-file-label::after {
     display: none;
 }
 
-.custom-file-label {
-    position: relative;
-    color: var(--dark00);
-    background-color: var(--white0);
-    border: inherit;
-}
-
 #searchResults {
     list-style-type: none;
     width: 100%;
@@ -196,17 +176,16 @@ input[type="checkbox"] {
     padding: 0;
     margin-top: 2%;
     overflow-y: scroll;
+    position: absolute;
     z-index: 200;
 }
 
 #searchResults li button {
     display: inline-block;
     width: 100%;
-    background-color: inherit;
-    border-top: none;
-    border-left: none;
-    border-right: none;
-    color: var(--white0);
+    background-color: #4c566a;
+    border: 1px solid #F5F5F5;
+    color: white;
     padding: 5px 8px;
     text-align: center;
     text-decoration: none;
@@ -220,13 +199,12 @@ input[type="checkbox"] {
 }
 
 #searchResults li button:hover {
-    background-color: var(--dark1);
+    background-color: #3B4252;
 }
 
 #searchDiv {
     margin-top: 10%;
-    border: none;
-    background-color: inherit;
+    border-radius: 0;
     width: 100%;
     position: relative;
     top: 0;
@@ -245,16 +223,16 @@ input[type="checkbox"] {
 }
 
 .overlay input[type="url"] {
-    background-color: inherit;
-    border-color: var(--white0);
-    border-radius: .25rem;
+    background-color: #00000000;
+    border-color: #ffffff;
     border-style: solid;
-    color: var(--dim);
+    color: #aaaaaa;
 }
 .overlay ::placeholder {
     color: #999999;
 }
 
+
 .loading_icon {
     position: absolute;
     left: calc(50% + var(--sidebar-width));
@@ -265,7 +243,7 @@ input[type="checkbox"] {
     margin: -30px 0 0 -76px;
     border: 5px solid rgba(0, 0, 0, 0);
     border-radius: 50%;
-    border-top: 5px solid var(--blue);
+    border-top: 5px solid #b5def8;
     -webkit-animation: spin 2s linear infinite;
     animation: spin 1.5s linear infinite;
 }
@@ -293,6 +271,8 @@ input[type="checkbox"] {
     width: 100%;
 }
 
+
+
 /*Charts*/
 .charts {
     padding-top: 10px;