Rename MJPEG streams when camera name changes (#136)

* Rename MJPEG streams when camera name changes

* Change camera name to HTTP request

This allows us to wait for it to for sure be done

* Fix reload logic

* whee lnt

* Reload on backend connect too

* Update CameraAndPipelineSelect.vue

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

@@ -14,6 +14,11 @@
         name: "CvImage",
         // eslint-disable-next-line vue/require-prop-types
         props: ['address', 'scale', 'maxHeight', 'maxHeightMd', 'maxHeightXl', 'colorPicking', 'id', 'disconnected'],
+        data() {
+            return {
+                seed: 1.0,
+            }
+        },
         computed: {
             styleObject: {
                 get() {
@@ -41,9 +46,17 @@
             },
             src: {
               get() {
-                return this.disconnected ? require("../../assets/noStream.jpg") : this.address;
+                return this.disconnected ? require("../../assets/noStream.jpg") : this.address + "?" + this.seed // This prevents caching
               },
             },
         },
+        mounted() {
+            this.reload(); // Force reload image on creation
+        },
+        methods: {
+            reload() {
+                this.seed = new Date().getTime();
+            }
+        },
     }
 </script>

photon-client/src/components/pipeline/CameraAndPipelineSelect.vue

@@ -34,7 +34,7 @@
           :hover="true"
           text="edit"
           tooltip="Edit camera name"
-          @click="toCameraNameChange"
+          @click="changeCameraName"
         />
         <div v-else>
           <CVicon
@@ -292,13 +292,23 @@
             }
         },
         methods: {
-            toCameraNameChange() {
+            changeCameraName() {
                 this.newCameraName = this.$store.getters.cameraList[this.currentCameraIndex];
                 this.isCameraNameEdit = true;
             },
             saveCameraNameChange() {
                 if (this.checkCameraName === "") {
-                    this.handleInputWithIndex("changeCameraName", this.newCameraName);
+                    // this.handleInputWithIndex("changeCameraName", this.newCameraName);
+                    this.axios.post('http://' + this.$address + '/api/setCameraNickname',
+                        {name: this.newCameraName, cameraIndex: this.$store.getters.currentCameraIndex})
+                        // eslint-disable-next-line
+                        .then(r => {
+                            this.$emit('camera-name-changed')
+                        })
+                        .catch(e => {
+                            console.log("HTTP error while changing camera name " + e);
+                            this.$emit('camera-name-changed')
+                        })
                     this.discardCameraNameChange();
                 }
             },