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/components/common/cv-range-slider.vue

@@ -2,34 +2,37 @@
 import { computed } from "vue";
 import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
 
-const props = withDefaults(defineProps<{
-  label?: string,
-  tooltip?: string,
-  // TODO fully update v-model usage in custom components on Vue3 update
-  // value: [number, number] | WebsocketNumberPair, // Vue doesnt like Union types for the value prop for some reason.
-  value: [number, number],
-  min: number,
-  max: number,
-  step?: number,
-  sliderCols?: number,
-  disabled?: boolean,
-  inverted?: boolean,
-}>(), {
-  step: 1,
-  disabled: false,
-  inverted: false,
-  sliderCols: 10
-});
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    tooltip?: string;
+    // TODO fully update v-model usage in custom components on Vue3 update
+    // value: [number, number] | WebsocketNumberPair, // Vue doesnt like Union types for the value prop for some reason.
+    value: [number, number];
+    min: number;
+    max: number;
+    step?: number;
+    sliderCols?: number;
+    disabled?: boolean;
+    inverted?: boolean;
+  }>(),
+  {
+    step: 1,
+    disabled: false,
+    inverted: false,
+    sliderCols: 10
+  }
+);
 
 const emit = defineEmits<{
-  (e: "input", value: [number, number]): void
+  (e: "input", value: [number, number]): void;
 }>();
 
 const localValue = computed<[number, number]>({
-  get: ():[number, number] => {
+  get: (): [number, number] => {
     return Object.values(props.value) as [number, number];
   },
-  set: v => emit("input", v)
+  set: (v) => emit("input", v)
 });
 
 const changeFromSlot = (v: number, i: number) => {
@@ -42,15 +45,9 @@ const changeFromSlot = (v: number, i: number) => {
 
 <template>
   <div>
-    <v-row
-      dense
-      align="center"
-    >
+    <v-row dense align="center">
       <v-col :cols="12 - sliderCols">
-        <tooltipped-label
-          :tooltip="tooltip"
-          :label="label"
-        />
+        <tooltipped-label :tooltip="tooltip" :label="label" />
       </v-col>
       <v-col :cols="sliderCols">
         <v-range-slider
@@ -79,7 +76,7 @@ const changeFromSlot = (v: number, i: number) => {
               :step="step"
               type="number"
               style="width: 60px"
-              @input="v => changeFromSlot(v, 0)"
+              @input="(v) => changeFromSlot(v, 0)"
             />
           </template>
           <template #append>
@@ -95,7 +92,7 @@ const changeFromSlot = (v: number, i: number) => {
               :step="step"
               type="number"
               style="width: 60px"
-              @input="v => changeFromSlot(v, 1)"
+              @input="(v) => changeFromSlot(v, 1)"
             />
           </template>
         </v-range-slider>