UI experimental redesign

.github/workflows/build.yml

@@ -1,32 +1,32 @@
 name: Build
 
 on:
-  push:
-    branches:
-      - master
-  pull_request:
-    branches:
-      - master
+    push:
+        branches:
+            - master
+    pull_request:
+        branches:
+            - master
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Install dependencies
-        run: npm ci
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - name: Use Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+            - name: Install dependencies
+              run: npm ci
 
-      - name: Build
-        env:
-          NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npm run build
+            - name: Build
+              env:
+                  NODE_OPTIONS: '--max_old_space_size=4096'
+              run: npm run build
 
-      - uses: actions/upload-artifact@v4
-        with:
-          name: mission-control
-          path: ./dist
-          retention-days: 1
+            - uses: actions/upload-artifact@v4
+              with:
+                  name: mission-control
+                  path: ./dist
+                  retention-days: 1

.github/workflows/deploy.yml

@@ -1,44 +1,44 @@
 name: Deploy
 
 on:
-  push:
-    branches:
-      - master
+    push:
+        branches:
+            - master
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Install dependencies
-        run: npm ci
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - name: Use Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+            - name: Install dependencies
+              run: npm ci
 
-      - name: Build
-        env:
-          NODE_OPTIONS: '--max_old_space_size=4096'
-          GH_PAGES: 'true'
-        run: npm run build
+            - name: Build
+              env:
+                  NODE_OPTIONS: '--max_old_space_size=4096'
+                  GH_PAGES: 'true'
+              run: npm run build
 
-      - name: Upload static files as artifact
-        id: deployment
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: dist/
-  deploy:
-    permissions:
-      contents: read
-      pages: write
-      id-token: write
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
+            - name: Upload static files as artifact
+              id: deployment
+              uses: actions/upload-pages-artifact@v3
+              with:
+                  path: dist/
+    deploy:
+        permissions:
+            contents: read
+            pages: write
+            id-token: write
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        runs-on: ubuntu-latest
+        needs: build
+        steps:
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v4

.github/workflows/lint.yml

@@ -1,24 +1,24 @@
 name: Lint
 
 on:
-  push:
-    branches:
-      - master
-  pull_request:
-    branches:
-      - master
+    push:
+        branches:
+            - master
+    pull_request:
+        branches:
+            - master
 
 jobs:
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Install dependencies
-        run: npm ci
+    lint:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - name: Use Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+            - name: Install dependencies
+              run: npm ci
 
-      - name: Lint
-        run: npm run lint-check -- --max-warnings 0
+            - name: Lint
+              run: npm run lint-check -- --max-warnings 0

.gitignore

@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# Web
 node_modules
 .DS_Store
 dist
@@ -20,10 +21,11 @@ coverage
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
-.lens/*
+.lens/*

.prettierignore

@@ -0,0 +1,14 @@
+node_modules
+dist
+dist-ssr
+coverage
+.vite
+
+/cypress/videos/
+/cypress/screenshots/
+
+.DS_Store
+.idea
+.vscode
+
+public/site.webmanifest

.prettierrc.json

@@ -1,8 +1,8 @@
 {
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": true,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "printWidth": 100,
-  "trailingComma": "all"
+    "$schema": "https://json.schemastore.org/prettierrc",
+    "semi": true,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "printWidth": 100,
+    "trailingComma": "all"
 }

.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+    // SETTINGS
+    "files.exclude": {
+        "dist/": true,
+        "node_modules/": true,
+    },
+
+    // FORMATTING
+    "[vue]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[json]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[jsonc]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[scss]": {
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "js/ts.experimental.useTsgo": false
+}

README.md

@@ -15,11 +15,11 @@ For a code-level overview, check out the [Code Overview](./docs/code_overview.md
 To develop code for the mission control, please follow the setup below:
 
 1. Install Node.js version 22.11.0 (LTS) (Long-term support Updated 11/6/2024)
-   - **Windows and macOS**:
-   1. If different node version is already installed, delete it from your system or if using version manager, switch to it.
-      - **Windows**: https://stackoverflow.com/questions/20711240/how-to-completely-remove-node-js-from-windows (Tested 11/6/2024)
-   2. [Download version 22.11.0 (LTS)](https://nodejs.org/en/download/prebuilt-installer) and run the installer
-   - **Linux**: [Follow Instructions to install 22.11.0 (LTS)](https://nodejs.org/en/download/package-manager) (Not tested)
+    - **Windows and macOS**:
+    1. If different node version is already installed, delete it from your system or if using version manager, switch to it.
+        - **Windows**: https://stackoverflow.com/questions/20711240/how-to-completely-remove-node-js-from-windows (Tested 11/6/2024)
+    2. [Download version 22.11.0 (LTS)](https://nodejs.org/en/download/prebuilt-installer) and run the installer
+    - **Linux**: [Follow Instructions to install 22.11.0 (LTS)](https://nodejs.org/en/download/package-manager) (Not tested)
 2. Run `git clone https://github.com/TrickfireRobotics/mission-control.git` in terminal **(not in the URC Docker Container)**
 3. Run `cd mission-control` to open the repository
 4. Run `npm install` to install dependencies
@@ -28,7 +28,7 @@ To develop code for the mission control, please follow the setup below:
 
 1. Run `npm run dev`
 2. While running open another VSCode window to the URC repo in the docker environment
-   - Run `./build.sh` and `./launch.sh` commands in the container terminal
+    - Run `./build.sh` and `./launch.sh` commands in the container terminal
 3. On the mission control, navigate to the setting tab and change the websocket to where the urc is ran
 
 TABLE 1: Connection

docs/code_overview.md

@@ -3,12 +3,12 @@
 Picture below shows how Camera and Controller interact with the codebase
 ![mission control overview](./resources/mission_control_overview.png)
 
-- **store**: Put all global states here. Every store should have one purpose. Put subscribers and publishers here, so that there is one place to find the topic names.
-- **components**: Single file component vue files that contain localized state (aka other components will not use it). Do not directly use createSubscriber and createPublisher here. Instead put them into the store.
-- **lib**: [Vue Composables](https://vuejs.org/guide/reusability/composables) and any large amount of .ts files goes here.
-- **pages** Each tab in the navbar has its pages. Generally, there should be no state stored here as the components and store should have them.
-- **App.vue**: Pubs and Subs that are always running and not part of a component such as the controller should be ran here.
-- **types.ts** Put all global types here.
+-   **store**: Put all global states here. Every store should have one purpose. Put subscribers and publishers here, so that there is one place to find the topic names.
+-   **components**: Single file component vue files that contain localized state (aka other components will not use it). Do not directly use createSubscriber and createPublisher here. Instead put them into the store.
+-   **lib**: [Vue Composables](https://vuejs.org/guide/reusability/composables) and any large amount of .ts files goes here.
+-   **pages** Each tab in the navbar has its pages. Generally, there should be no state stored here as the components and store should have them.
+-   **App.vue**: Pubs and Subs that are always running and not part of a component such as the controller should be ran here.
+-   **types.ts** Put all global types here.
 
 ## Design choices
 

docs/getting_started.md

@@ -16,33 +16,33 @@ The mission-control repo is completely separate from the urc-2023 as it is webpa
 
 ## Recommended IDE Setup
 
-- [VSCode](https://code.visualstudio.com/)
+-   [VSCode](https://code.visualstudio.com/)
 
-- [Vue DevTools Chrome Extension](https://devtools.vuejs.org/getting-started/installation): Can Inspect Components State and integrated with Pinia, allowing to see store's state.
+-   [Vue DevTools Chrome Extension](https://devtools.vuejs.org/getting-started/installation): Can Inspect Components State and integrated with Pinia, allowing to see store's state.
 
 ## Libraries/Tools/Technologies that We Utilize
 
 In this particular codebase, we use the following libraries/tools/technologies. Please familiarize yourself with the concepts below:
 
-- Vue [Official Tutorial](https://vuejs.org/tutorial/#step-1) (We specifically use Vue 3 Composition API Single File Component)
-  - Prop drilling
-  - Reactiveness (when to use refs vs not)
-  - Lifecycle Hooks
-    - Read about Keep Alive onActivate() and onDeactivated() hooks vs onMounted() and onUnmounted() hooks
-- [Typescript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html)
-  - Difference between Primitives and object types and their respective naming convention
-- [Pinia](https://pinia.vuejs.org/) (Global state management store)
-  - How to create a store
-  - How to use a store
-- ROS2 (Robot Operating System)
-  - high level understanding of:
-    - Subscribers and Publisher paradigm
-    - Topics, messageTypes
-  - Please refer to the [urc-2023 documentation](https://github.com/TrickfireRobotics/urc-2023) for more information about Ros
-- HTML/SCSS
-- [Roslibjs Source Code](https://github.com/RobotWebTools/roslibjs)
-- Node Package Manager (NPM)
-  - Difference between dependency and Dev-dependency and when installing packages, which one to install too.
+-   Vue [Official Tutorial](https://vuejs.org/tutorial/#step-1) (We specifically use Vue 3 Composition API Single File Component)
+    -   Prop drilling
+    -   Reactiveness (when to use refs vs not)
+    -   Lifecycle Hooks
+        -   Read about Keep Alive onActivate() and onDeactivated() hooks vs onMounted() and onUnmounted() hooks
+-   [Typescript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html)
+    -   Difference between Primitives and object types and their respective naming convention
+-   [Pinia](https://pinia.vuejs.org/) (Global state management store)
+    -   How to create a store
+    -   How to use a store
+-   ROS2 (Robot Operating System)
+    -   high level understanding of:
+        -   Subscribers and Publisher paradigm
+        -   Topics, messageTypes
+    -   Please refer to the [urc-2023 documentation](https://github.com/TrickfireRobotics/urc-2023) for more information about Ros
+-   HTML/SCSS
+-   [Roslibjs Source Code](https://github.com/RobotWebTools/roslibjs)
+-   Node Package Manager (NPM)
+    -   Difference between dependency and Dev-dependency and when installing packages, which one to install too.
 
 ## So... what should I do now?