UI patches (#905)

- Show 0 clients when NT server props are undefined
- Add Prettier 

---------

Co-authored-by: Matthew Morley <matthew.morley.ca@gmail.com>

photon-client/src/views/CameraSettingsView.vue

@@ -9,24 +9,24 @@ import { useStateStore } from "@/stores/StateStore";
 const cameraViewType = computed<number[]>({
   get: (): number[] => {
     // Only show the input stream in Color Picking Mode
-    if(useStateStore().colorPickingMode) return [0];
+    if (useStateStore().colorPickingMode) return [0];
 
     // Only show the output stream in Driver Mode or Calibration Mode
-    if(useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode) return [1];
+    if (useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode) return [1];
 
     const ret: number[] = [];
-    if(useCameraSettingsStore().currentPipelineSettings.inputShouldShow) {
+    if (useCameraSettingsStore().currentPipelineSettings.inputShouldShow) {
       ret.push(0);
     }
-    if(useCameraSettingsStore().currentPipelineSettings.outputShouldShow) {
+    if (useCameraSettingsStore().currentPipelineSettings.outputShouldShow) {
       ret.push(1);
     }
 
-    if(ret.length === 0) return [0];
+    if (ret.length === 0) return [0];
 
     return ret;
   },
-  set: v => {
+  set: (v) => {
     useCameraSettingsStore().currentPipelineSettings.inputShouldShow = v.includes(0);
     useCameraSettingsStore().currentPipelineSettings.outputShouldShow = v.includes(1);
     useCameraSettingsStore().changeCurrentPipelineSetting({ inputShouldShow: v.includes(0) }, false);
@@ -36,22 +36,12 @@ const cameraViewType = computed<number[]>({
 
 <template>
   <div>
-    <v-row
-      no-gutters
-      class="pa-3"
-    >
-      <v-col
-        cols="12"
-        md="7"
-      >
+    <v-row no-gutters class="pa-3">
+      <v-col cols="12" md="7">
         <CamerasCard />
         <CalibrationCard />
       </v-col>
-      <v-col
-        class="pl-md-3 pt-3 pt-md-0"
-        cols="12"
-        md="5"
-      >
+      <v-col class="pl-md-3 pt-3 pt-md-0" cols="12" md="5">
         <CamerasView v-model="cameraViewType" />
       </v-col>
     </v-row>

photon-client/src/views/DashboardView.vue

@@ -10,57 +10,42 @@ import { useStateStore } from "@/stores/StateStore";
 const cameraViewType = computed<number[]>({
   get: (): number[] => {
     // Only show the input stream in Color Picking Mode
-    if(useStateStore().colorPickingMode) return [0];
+    if (useStateStore().colorPickingMode) return [0];
 
     // Only show the output stream in Driver Mode or Calibration Mode
-    if(useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode) return [1];
+    if (useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isCalibrationMode) return [1];
 
     const ret: number[] = [];
-    if(useCameraSettingsStore().currentPipelineSettings.inputShouldShow) {
+    if (useCameraSettingsStore().currentPipelineSettings.inputShouldShow) {
       ret.push(0);
     }
-    if(useCameraSettingsStore().currentPipelineSettings.outputShouldShow) {
+    if (useCameraSettingsStore().currentPipelineSettings.outputShouldShow) {
       ret.push(1);
     }
 
-    if(ret.length === 0) return [0];
+    if (ret.length === 0) return [0];
 
     return ret;
   },
-  set: v => {
-    useCameraSettingsStore().changeCurrentPipelineSetting({
-      inputShouldShow: v.includes(0),
-      outputShouldShow: v.includes(1)
-    }, true);
+  set: (v) => {
+    useCameraSettingsStore().changeCurrentPipelineSetting(
+      {
+        inputShouldShow: v.includes(0),
+        outputShouldShow: v.includes(1)
+      },
+      true
+    );
   }
 });
 </script>
 
 <template>
-  <v-container
-    class="pa-3"
-    fluid
-  >
-    <v-row
-      no-gutters
-      align="center"
-      justify="center"
-    >
-      <v-col
-        cols="12"
-        class="pb-3 pr-lg-3"
-        lg="8"
-        align-self="stretch"
-      >
+  <v-container class="pa-3" fluid>
+    <v-row no-gutters align="center" justify="center">
+      <v-col cols="12" class="pb-3 pr-lg-3" lg="8" align-self="stretch">
         <CamerasCard v-model="cameraViewType" />
       </v-col>
-      <v-col
-        cols="12"
-        class="pb-3"
-        lg="4"
-        style="display: flex; flex-direction: column"
-        align-self="stretch"
-      >
+      <v-col cols="12" class="pb-3" lg="4" style="display: flex; flex-direction: column" align-self="stretch">
         <CameraAndPipelineSelectCard />
         <StreamConfigCard v-model="cameraViewType" />
       </v-col>

photon-client/src/views/DocsView.vue

@@ -3,27 +3,16 @@ const devMode = process.env.NODE_ENV === "development";
 </script>
 
 <template>
-  <div
-    style="overflow:hidden; height:100%; width:100%"
-  >
-    <div
-      v-if="devMode"
-      style="width: 100%; height: 100%; padding: 16px"
-    >
+  <div style="overflow: hidden; height: 100%; width: 100%">
+    <div v-if="devMode" style="width: 100%; height: 100%; padding: 16px">
       <span style="color: white; font-weight: bold">
-        PhotonClient is in development mode so the documentation page will not load.
-        Please recompile in production mode with the documentation copied over after a full build.
+        PhotonClient is in development mode so the documentation page will not load. Please recompile in production mode
+        with the documentation copied over after a full build.
       </span>
     </div>
-    <div
-      v-else
-      style="width: 100%; height: 100%"
-    >
+    <div v-else style="width: 100%; height: 100%">
       <!--suppress HtmlUnknownTarget -->
-      <iframe
-        src="docs/index.html"
-        style="overflow:hidden; height:100%; width:100%; border: 0"
-      />
+      <iframe src="docs/index.html" style="overflow: hidden; height: 100%; width: 100%; border: 0" />
     </div>
   </div>
 </template>

photon-client/src/views/NotFoundView.vue

@@ -1,18 +1,14 @@
 <template>
   <div class="not-found-container">
     <div>
-      <v-card-title style="color: white; padding-bottom: 36px; font-size: 42px;">
+      <v-card-title style="color: white; padding-bottom: 36px; font-size: 42px">
         The page you are looking for isn't here
       </v-card-title>
-      <v-card-subtitle style="color: white; font-size: 18px;">
+      <v-card-subtitle style="color: white; font-size: 18px">
         Please use the sidebar to find what you are looking for
       </v-card-subtitle>
     </div>
-    <img
-      src="@/assets/images/notfound.webp"
-      alt="missing-page"
-      style="margin-top: 64px"
-    >
+    <img src="@/assets/images/notfound.webp" alt="missing-page" style="margin-top: 64px" />
   </div>
 </template>