diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json index effc164..3c5361e 100644 --- a/frontend/.prettierrc.json +++ b/frontend/.prettierrc.json @@ -1,7 +1,8 @@ { - "$schema": "https://json.schemastore.org/prettierrc", - "semi": false, - "singleQuote": true, - "arrowParens": "avoid" + "$schema": "https://json.schemastore.org/prettierrc", + "semi": true, + "singleQuote": true, + "arrowParens": "always", + "tabWidth": 4 } diff --git a/frontend/src/App.vue b/frontend/src/App.vue index a78fb6f..f721f2c 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,7 +1,7 @@ diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss index fd419f3..a697381 100644 --- a/frontend/src/assets/main.scss +++ b/frontend/src/assets/main.scss @@ -5,12 +5,12 @@ $text-color: $light-gray; $background-color: $dark-gray; body { - color: $text-color; - background-color: $background-color; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - align-content: center; - min-height: 100vh; + color: $text-color; + background-color: $background-color; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-content: center; + min-height: 100vh; } diff --git a/frontend/src/components/GraphAxis.vue b/frontend/src/components/GraphAxis.vue index 58946b0..d0f8f65 100644 --- a/frontend/src/components/GraphAxis.vue +++ b/frontend/src/components/GraphAxis.vue @@ -1,303 +1,321 @@ diff --git a/frontend/src/components/SvgGraph.vue b/frontend/src/components/SvgGraph.vue index 257625c..d31f721 100644 --- a/frontend/src/components/SvgGraph.vue +++ b/frontend/src/components/SvgGraph.vue @@ -1,141 +1,142 @@ diff --git a/frontend/src/components/TelemetryLine.vue b/frontend/src/components/TelemetryLine.vue index 6f22910..adb1f4d 100644 --- a/frontend/src/components/TelemetryLine.vue +++ b/frontend/src/components/TelemetryLine.vue @@ -1,120 +1,121 @@ diff --git a/frontend/src/composables/telemetry.ts b/frontend/src/composables/telemetry.ts index 54f117f..ce13cec 100644 --- a/frontend/src/composables/telemetry.ts +++ b/frontend/src/composables/telemetry.ts @@ -1,29 +1,29 @@ -import { ref, toValue, watchEffect } from 'vue' -import { type MaybeRefOrGetter } from 'vue' +import { ref, toValue, watchEffect } from 'vue'; +import { type MaybeRefOrGetter } from 'vue'; export interface TelemetryDefinition { - uuid: string - name: string - data_type: string + uuid: string; + name: string; + data_type: string; } export function useTelemetry(name: MaybeRefOrGetter) { - const data = ref(null) - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const error = ref(null) + const data = ref(null); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const error = ref(null); - watchEffect(async () => { - const name_value = toValue(name) + watchEffect(async () => { + const name_value = toValue(name); - try { - const res = await fetch(`/api/tlm/${name_value}`) - data.value = await res.json() - error.value = null - } catch (e) { - data.value = null - error.value = e - } - }) + try { + const res = await fetch(`/api/tlm/${name_value}`); + data.value = await res.json(); + error.value = null; + } catch (e) { + data.value = null; + error.value = e; + } + }); - return { data, error } + return { data, error }; } diff --git a/frontend/src/composables/ticker.ts b/frontend/src/composables/ticker.ts index 81b27cc..79880cb 100644 --- a/frontend/src/composables/ticker.ts +++ b/frontend/src/composables/ticker.ts @@ -1,19 +1,19 @@ -import { onMounted, onUnmounted, ref, shallowRef } from 'vue' +import { onMounted, onUnmounted, ref, shallowRef } from 'vue'; export function useNow(update_ms: number) { - const handle = shallowRef(undefined) - const now = ref(Date.now()) + const handle = shallowRef(undefined); + const now = ref(Date.now()); - onMounted(() => { - handle.value = setInterval(() => { - now.value = Date.now() - }, update_ms) - }) - onUnmounted(() => { - if (handle.value) { - clearInterval(handle.value) - } - }) + onMounted(() => { + handle.value = setInterval(() => { + now.value = Date.now(); + }, update_ms); + }); + onUnmounted(() => { + if (handle.value) { + clearInterval(handle.value); + } + }); - return now + return now; } diff --git a/frontend/src/composables/websocket.ts b/frontend/src/composables/websocket.ts index 722a9e9..143c098 100644 --- a/frontend/src/composables/websocket.ts +++ b/frontend/src/composables/websocket.ts @@ -1,138 +1,143 @@ import { - computed, - type MaybeRefOrGetter, - onMounted, - onUnmounted, - ref, - type Ref, - shallowRef, - toValue, - watch, -} from 'vue' -import type { TelemetryDefinition } from '@/composables/telemetry' + computed, + type MaybeRefOrGetter, + onMounted, + onUnmounted, + ref, + type Ref, + shallowRef, + toValue, + watch, +} from 'vue'; +import type { TelemetryDefinition } from '@/composables/telemetry'; export interface TelemetryDataItem { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - value: any - timestamp: string + // eslint-disable-next-line @typescript-eslint/no-explicit-any + value: any; + timestamp: string; } interface TlmValue { - uuid: string - value: TelemetryDataItem + uuid: string; + value: TelemetryDataItem; } export class WebsocketHandle { - websocket: WebSocket | null - should_be_connected: boolean - connected: Ref - on_telem_value: Map void>> + websocket: WebSocket | null; + should_be_connected: boolean; + connected: Ref; + on_telem_value: Map void>>; - constructor() { - this.websocket = null - this.should_be_connected = false - this.connected = ref(false) - this.on_telem_value = new Map() - } - - connect() { - this.should_be_connected = true - if (this.websocket != null) { - return + constructor() { + this.websocket = null; + this.should_be_connected = false; + this.connected = ref(false); + this.on_telem_value = new Map(); } - this.websocket = new WebSocket( - location.protocol.replace('http', 'ws') + '//' + location.host + '/ws', - ) - this.websocket.addEventListener('open', () => { - this.connected.value = true - }) - this.websocket.addEventListener('close', () => { - if (this.should_be_connected) { - this.disconnect() - setTimeout(() => { - this.connect() - }, 1000) - } - }) - this.websocket.addEventListener('error', () => { - if (this.should_be_connected) { - this.disconnect() - setTimeout(() => { - this.connect() - }, 1000) - } - }) - this.websocket.addEventListener('message', event => { - const message = JSON.parse(event.data) - if (message['TlmValue']) { - const tlm_value = message['TlmValue'] as TlmValue - const listeners = this.on_telem_value.get(tlm_value.uuid) - if (listeners) { - listeners.forEach(listener => { - listener(tlm_value.value) - }) + connect() { + this.should_be_connected = true; + if (this.websocket != null) { + return; } - } - }) - } - disconnect() { - this.should_be_connected = false - if (this.websocket == null) { - return + this.websocket = new WebSocket( + location.protocol.replace('http', 'ws') + + '//' + + location.host + + '/ws', + ); + this.websocket.addEventListener('open', () => { + this.connected.value = true; + }); + this.websocket.addEventListener('close', () => { + if (this.should_be_connected) { + this.disconnect(); + setTimeout(() => { + this.connect(); + }, 1000); + } + }); + this.websocket.addEventListener('error', () => { + if (this.should_be_connected) { + this.disconnect(); + setTimeout(() => { + this.connect(); + }, 1000); + } + }); + this.websocket.addEventListener('message', (event) => { + const message = JSON.parse(event.data); + if (message['TlmValue']) { + const tlm_value = message['TlmValue'] as TlmValue; + const listeners = this.on_telem_value.get(tlm_value.uuid); + if (listeners) { + listeners.forEach((listener) => { + listener(tlm_value.value); + }); + } + } + }); } - this.connected.value = false - this.websocket.close() - this.websocket = null - this.on_telem_value.clear() - } - - listen_to_telemetry(telemetry: MaybeRefOrGetter) { - const value_result = ref(null) - - const uuid = computed(() => { - const tlm = toValue(telemetry) - if (tlm) { - return tlm.uuid - } - return null - }) - - watch([uuid, this.connected], ([uuid_value, connected]) => { - if (connected && uuid_value) { - this.websocket?.send( - JSON.stringify({ - RegisterTlmListener: { - uuid: uuid_value, - }, - }), - ) - if (!this.on_telem_value.has(uuid_value)) { - this.on_telem_value.set(uuid_value, []) + disconnect() { + this.should_be_connected = false; + if (this.websocket == null) { + return; } - this.on_telem_value.get(uuid_value)?.push(value => { - value_result.value = value - }) - } - }) - return value_result - } + this.connected.value = false; + this.websocket.close(); + this.websocket = null; + this.on_telem_value.clear(); + } + + listen_to_telemetry( + telemetry: MaybeRefOrGetter, + ) { + const value_result = ref(null); + + const uuid = computed(() => { + const tlm = toValue(telemetry); + if (tlm) { + return tlm.uuid; + } + return null; + }); + + watch([uuid, this.connected], ([uuid_value, connected]) => { + if (connected && uuid_value) { + this.websocket?.send( + JSON.stringify({ + RegisterTlmListener: { + uuid: uuid_value, + }, + }), + ); + if (!this.on_telem_value.has(uuid_value)) { + this.on_telem_value.set(uuid_value, []); + } + this.on_telem_value.get(uuid_value)?.push((value) => { + value_result.value = value; + }); + } + }); + + return value_result; + } } -export const WEBSOCKET_SYMBOL = Symbol() +export const WEBSOCKET_SYMBOL = Symbol(); export function useWebsocket() { - const handle = shallowRef(new WebsocketHandle()) + const handle = shallowRef(new WebsocketHandle()); - onMounted(() => { - handle.value.connect() - }) - onUnmounted(() => { - handle.value.disconnect() - }) + onMounted(() => { + handle.value.connect(); + }); + onUnmounted(() => { + handle.value.disconnect(); + }); - return handle + return handle; } diff --git a/frontend/src/graph/axis.ts b/frontend/src/graph/axis.ts index 3b799a7..3a53162 100644 --- a/frontend/src/graph/axis.ts +++ b/frontend/src/graph/axis.ts @@ -1,20 +1,20 @@ -import type { Ref } from 'vue' +import type { Ref } from 'vue'; export enum AxisSide { - Right, - Left, - Hidden, + Right, + Left, + Hidden, } export enum AxisType { - Linear, - Logarithmic, + Linear, + Logarithmic, } -export const AXIS_DATA = Symbol() +export const AXIS_DATA = Symbol(); export interface AxisData { - axis_update_watch: Ref - max_y_callback: (y: number) => void - min_y_callback: (y: number) => void - y_map: (y: number) => number + axis_update_watch: Ref; + max_y_callback: (y: number) => void; + min_y_callback: (y: number) => void; + y_map: (y: number) => number; } diff --git a/frontend/src/graph/graph.ts b/frontend/src/graph/graph.ts index 6e1e876..b73823e 100644 --- a/frontend/src/graph/graph.ts +++ b/frontend/src/graph/graph.ts @@ -1,12 +1,12 @@ -import type { MaybeRefOrGetter } from 'vue' +import type { MaybeRefOrGetter } from 'vue'; -export const GRAPH_DATA = Symbol() +export const GRAPH_DATA = Symbol(); export interface GraphData { - border_top_bottom: MaybeRefOrGetter - min_x: MaybeRefOrGetter - max_x: MaybeRefOrGetter - width: MaybeRefOrGetter - height: MaybeRefOrGetter - x_map: (x: number) => number + border_top_bottom: MaybeRefOrGetter; + min_x: MaybeRefOrGetter; + max_x: MaybeRefOrGetter; + width: MaybeRefOrGetter; + height: MaybeRefOrGetter; + x_map: (x: number) => number; } diff --git a/frontend/src/main.ts b/frontend/src/main.ts index df6d8ba..6a6ae40 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -1,11 +1,11 @@ -import './assets/main.scss' +import './assets/main.scss'; -import { createApp } from 'vue' -import App from './App.vue' -import router from './router' +import { createApp } from 'vue'; +import App from './App.vue'; +import router from './router'; -const app = createApp(App) +const app = createApp(App); -app.use(router) +app.use(router); -app.mount('#app') +app.mount('#app'); diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts index a9a0761..e739c88 100644 --- a/frontend/src/router/index.ts +++ b/frontend/src/router/index.ts @@ -1,14 +1,14 @@ -import { createRouter, createWebHistory } from 'vue-router' +import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - name: 'home', - component: () => import('../views/HomeView.vue'), - }, - ], -}) + history: createWebHistory(import.meta.env.BASE_URL), + routes: [ + { + path: '/', + name: 'home', + component: () => import('../views/HomeView.vue'), + }, + ], +}); -export default router +export default router; diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index 197f6a7..813bded 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -1,28 +1,28 @@