[PhotonClient] Update dependencies to latest, update assets, and styling fixes (#767)

Currently, there is a difficult-to-reproduce bug where the backend reports that camera calibration was successful in logs via the logger but then throws an exception causing the backend to return a 500 error code with no request body which causes the frontend to interpret this as a failed calibration attempt. This ultimately leads to the entire instance of photonvision crashing and requiring the entire pi to be restarted. It is believed this issue resides inside the ConfigManager's saving action following the calibration update but is not confirmed.

photon-client/src/components/common/cv-image.vue

@@ -7,7 +7,7 @@
     :alt="alt"
     @click="clickHandler"
     @error="loadErrHandler"
-  />
+  >
 </template>
 
 <script>
@@ -34,7 +34,7 @@
                       "margin-right": "auto",
                       "max-height": this.maxHeight,
                       height: `${this.scale}%`,
-                      cursor: (this.colorPicking ? `url(${require("../../assets/eyedropper.svg")}),` : "pointer") + "default",
+                      cursor: (this.colorPicking ? `url(${require("../../assets/icons/eyedropper.svg")}),` : "pointer") + "default",
                     };
 
                     if (this.$vuetify.breakpoint.xl) {
@@ -50,10 +50,10 @@
             },
             src: {
               get() {
-                var port = this.getCurPort();
+                const port = this.getCurPort();
                 if(port <= 0){
-                  //Invalid port, keep it spinny
-                  return require("../../assets/loading.gif");
+                  //Invalid port, keep it spiny
+                  return require("../../../public/loading.svg");
                 } else {
                   //Valid port, connect
                   return this.getSrcURLFromPort(port);
@@ -66,13 +66,13 @@
         },
         methods: {
             getCurPort(){
-              var port = -1;
+              let port = -1;
               if(this.disconnected){
                 //Disconnected, port is unknown.
                 port = -1;
               } else {
                 //Connected - get the port
-                if(this.id == 'raw-stream'){
+                if(this.id === 'raw-stream'){
                   port = this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].inputStreamPort
                 } else {
                   port = this.$store.state.cameraSettings[this.$store.state.currentCameraIndex].outputStreamPort
@@ -92,7 +92,7 @@
               if(this.colorPicking){
                 this.$emit('click', event);
               } else {
-                var port = this.getCurPort();
+                const port = this.getCurPort();
                 if(port <= 0){
                   console.log("No valid port, ignoring click.");
                 } else {

photon-client/src/components/common/cv-input.vue

@@ -4,7 +4,7 @@
       dense
       align="center"
     >
-      <v-col :cols="12 - (inputCols || 8)">
+      <v-col :cols="labelCols || (12 - (inputCols || 8))">
         <tooltipped-label
           :tooltip="tooltip"
           :text="name"
@@ -36,7 +36,7 @@
           TooltippedLabel
         },
         // eslint-disable-next-line vue/require-prop-types
-        props: ['name', 'value', 'disabled', 'errorMessage', 'inputCols', 'rules', 'tooltip'],
+        props: ['name', 'value', 'disabled', 'errorMessage', 'inputCols', 'labelCols', 'rules', 'tooltip'],
         data() {
             return {}
         },

photon-client/src/components/common/cv-range-slider.vue

@@ -106,7 +106,7 @@ export default {
 
       await this.delay(200).then(() => {
         let i = 0;
-        if (this.prependFocused === false && this.appendFocused === true) {
+        if (!this.prependFocused && this.appendFocused) {
           i = 1;
         }