Manage settings from web interface

.github/workflows/pre-commit-updates.yaml

@@ -21,3 +21,4 @@ jobs:
           body: Update pre-commit hooks
           labels: dependencies
           delete-branch: True
+          assignees: "fredclausen"

.pre-commit-config.yaml

@@ -76,3 +76,13 @@ repos:
       - id: fmt
       - id: cargo-check
       - id: clippy
+
+  - repo: https://github.com/doublify/pre-commit-rust
+    rev: v1.0
+    hooks:
+      - id: fmt
+        args: ["--manifest-path", "./sh-frontend/Cargo.toml", "--"]
+      - id: cargo-check
+        args: ["--manifest-path", "./sh-frontend/Cargo.toml"]
+      - id: clippy
+        args: ["--manifest-path", "./sh-frontend/Cargo.toml"]

README.md

@@ -32,6 +32,7 @@ Sorry, there is no migration path from ACARS Hub to SDR-E Hub. The data that ACA
   - [x] GitHub CI
   - [ ] FIXME/TODO Cleanup
   - [ ] Code documentation
+  - [ ] Unit Tests
 - [ ] Alpha 2
   - [ ] Connect to data providers
     - [ ] ADSB
@@ -43,17 +44,20 @@ Sorry, there is no migration path from ACARS Hub to SDR-E Hub. The data that ACA
   - [ ] Display data on the web interface
   - [ ] FIXME/TODO Cleanup
   - [ ] Code documentation
+  - [ ] Unit Tests
 - [ ] Alpha 3
   - [ ] Implement database storage
     - [ ] RRD style data storage for relevant stats
     - [ ] SQL storage for historical data
     - [ ] General stats
   - [ ] FIXME/TODO Cleanup
   - [ ] Code documentation
+  - [ ] Unit Tests
 - [ ] Beta 1
   - [ ] Focus on interface; clean it up, mobile functionality, etc
   - [ ] FIXME/TODO Cleanup
   - [ ] Code documentation
+  - [ ] Unit Tests
 
 ## Thank you
 
@@ -63,7 +67,7 @@ ACARS Hub was a labor of love driven by the boundless enthusiasm of everyone tha
 
 ### Why Rust?
 
-I chose Rust mostly because I wanted to. The other option was to stick with python and TypeScript/NodeJS, which would have been signifiantly easier. The code would have been easier to write, the support of npm packages to do tasks is much bigger, and lastly the ability to search the web and find answers to questions is so much easier.
+I chose Rust mostly because I wanted to. The other option was to stick with python and TypeScript/NodeJS, which would have been much easier. The code would have been easier to write, the support of npm packages to do tasks is much bigger, and lastly the ability to search the web and find answers to questions is so much easier.
 
 That said, one of the main goals of this project was to be as performant as possible, as well as a unified code base that could generate both a web application and a desktop application. Rust makes this pretty easy.
 

sh-frontend/Cargo.toml

@@ -43,17 +43,18 @@ anyhow = "1.0.86"
 futures = "0.3.30"
 gloo = "0.11.0"
 gloo-utils = "0.2.0"
-leaflet = "0.4.0"
+leaflet = "0.4.1"
 log = "0.4.21"
-serde = { version = "1.0.202", features = ["derive"] }
-serde_derive = "1.0.202"
+serde = { version = "1.0.203", features = ["derive"] }
+serde_derive = "1.0.203"
 serde_json = "1.0.117"
 reqwasm = "0.5.0"
 yew = { version = "0.21.0", features = ["csr"] }
+yew-alert = "0.1.0"
 yewdux = "0.10.0"
 yew-websocket = "1.21.0"
 yew-router = "0.18.0"
-yew-hooks = "0.3.1"
+yew-hooks = "0.3.2"
 wasm-bindgen = "0.2.92"
 wasm-bindgen-futures = "0.4.42"
 wasm-logger = "0.2.0"
@@ -63,6 +64,7 @@ web-sys = { version = "0.3.69", features = [
     "HtmlCollection",
     "KeyboardEvent",
     "EventTarget",
+    "HtmlFormElement",
 ] }
 
 sh-common = { path = "../src/libraries/sh-common" }

sh-frontend/css/app.scss

@@ -0,0 +1,15 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "utility/base";
+@use "utility/buttons";
+@use "utility/alerts";
+@use "components/search";
+@use "components/navbar";
+@use "components/live";
+@use "components/settings";
+@use "components/footer";
+
+@import url("https://unpkg.com/[email protected]/dist/leaflet.css");

sh-frontend/css/components/_footer.scss

@@ -0,0 +1,21 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "../config/colors";
+@use "../config/config";
+@use "../mixins/border" as b;
+
+.footer {
+  margin-top: config.$normal-margin;
+  padding: 0rem;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  @include b.border;
+
+  & > div {
+    margin: config.$double-margin;
+  }
+}

sh-frontend/css/components/_live.scss

@@ -0,0 +1,40 @@
+// Copyright (C) 2024 Fred Clausen
+// Use of this source code is governed by an MIT-style
+// license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+@use "../config/colors";
+@use "../config/config";
+@use "../mixins/border" as b;
+
+@mixin live_panel($width: 100%, $margin-left: 0rem) {
+  margin: 0px;
+  margin-top: config.$normal-margin;
+  margin-left: $margin-left;
+  height: 100%;
+  width: $width;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  @include b.border;
+  display: block;
+}
+
+.live-panel-left {
+  @include live_panel(24rem);
+
+  @media (max-width: config.$transition-to-mobile) {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
+.live-panel-right {
+  @include live_panel(100%, config.$double-margin);
+
+  @media (max-width: config.$transition-to-mobile) {
+    & {
+      display: none;
+    }
+  }
+}