core: remove save button

plugins/core/package-lock.json

@@ -1,12 +1,12 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.81",
+   "version": "0.0.82",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.0.81",
+         "version": "0.0.82",
          "license": "Apache-2.0",
          "dependencies": {
             "@scrypted/sdk": "file:../../sdk",

plugins/core/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.81",
+   "version": "0.0.82",
    "description": "Scrypted Core plugin. Provides the UI, websocket, and engine.io APIs.",
    "author": "Scrypted",
    "license": "Apache-2.0",

plugins/core/ui/src/common/Grower.vue

@@ -4,7 +4,11 @@
       <slot v-bind:item="item" v-bind:onInput="setIndex(index)"></slot>
     </div>
 
-    <v-btn @click="add">{{ addButton }}</v-btn>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn @click="add">{{ addButton }}</v-btn>
+      <v-btn v-if="saveButton" @click="$emit('save')">{{ saveButton }}</v-btn>
+    </v-card-actions>
     <slot name="append-outer"></slot>
   </div>
 </template>
@@ -17,20 +21,24 @@ export default {
     empty: undefined,
     addButton: {
       default: "Add",
-      type: String
-    }
+      type: String,
+    },
+    saveButton: {
+      default: undefined,
+      type: String,
+    },
   },
   mixins: [CustomValue],
   methods: {
     setIndex(index) {
-      return entry => {
-          this.lazyValue[index] = entry;
-          this.onInput();
+      return (entry) => {
+        this.lazyValue[index] = entry;
+        this.onInput();
       };
     },
     add() {
       this.lazyValue.push(cloneDeep(this.empty));
-    }
-  }
+    },
+  },
 };
 </script>

plugins/core/ui/src/common/Storage.vue

@@ -1,9 +1,11 @@
 <template>
   <Grower
+    saveButton="Save Storage"
     addButton="Add Storage Entry"
     v-model="lazyValue"
     :empty="{ key: '', value:''}"
     @input="onInput"
+    @save="$emit('save')"
   >
     <template v-slot:default="slotProps">
       <StorageEntry v-model="slotProps.item" @input="slotProps.onInput"></StorageEntry>

plugins/core/ui/src/common/StorageEntry.vue

@@ -1,24 +1,31 @@
 <template>
-  <v-flex>
     <v-layout row>
+  <v-flex xs5 class="pr-0 pt-1 pb-1">
       <v-text-field
+      dense
         ref="variableName"
         outlined
         label="Storage Key"
         xs6
         v-model="lazyValue.key"
         @input="onInput"
+        hide-details
       ></v-text-field>
+  </v-flex>
+  <v-flex xs7 class="pl-0 pt-1 pb-1">
+
       <v-text-field
+      dense
         ref="variableValue"
         outlined
         label="Storage Value"
         xs6
         v-model="lazyValue.value"
         @input="onInput"
+        hide-details
       ></v-text-field>
-    </v-layout>
   </v-flex>
+    </v-layout>
 </template>
 <script>
 import CustomValue from "./CustomValue.vue";

plugins/core/ui/src/components/Device.vue

@@ -83,19 +83,41 @@
             <v-container>
               <v-layout>
                 <v-flex xs12>
-                  <v-text-field
-                    v-model="name"
-                    label="Name"
-                    required
-                  ></v-text-field>
+                  <v-text-field dense v-model="name" label="Name" required outlined>
+                    <template v-slot:append-outer>
+                      <v-btn
+                        v-if="name !== device.name"
+                        color="success"
+                        text
+                        class="shift-up"
+                        @click="saveName"
+                      >
+                        <v-icon>send</v-icon>
+                      </v-btn>
+                    </template>
+                  </v-text-field>
                   <v-select
+                    dense
                     v-if="inferredTypes.length > 1"
                     :items="inferredTypes"
                     label="Type"
                     outlined
                     v-model="type"
-                  ></v-select>
+                  >
+                    <template v-slot:append-outer>
+                      <v-btn
+                        v-if="type !== device.type"
+                        color="success"
+                        text
+                        class="shift-up"
+                        @click="saveType"
+                      >
+                        <v-icon>send</v-icon>
+                      </v-btn>
+                    </template>
+                  </v-select>
                   <v-combobox
+                    dense
                     v-if="
                       hasFixedPhysicalLocation(type, deviceState.interfaces)
                     "
@@ -104,7 +126,19 @@
                     v-model="room"
                     label="Room"
                     required
-                  ></v-combobox>
+                  >
+                    <template v-slot:append-outer>
+                      <v-btn
+                        v-if="room !== device.room"
+                        color="success"
+                        text
+                        class="shift-up"
+                        @click="saveRoom"
+                      >
+                        <v-icon>send</v-icon>
+                      </v-btn>
+                    </template>
+                  </v-combobox>
                 </v-flex>
               </v-layout>
             </v-container>
@@ -162,28 +196,8 @@
                   </v-card-actions>
                 </v-card>
               </v-dialog>
-
-              <v-btn color="primary" v-if="!loading" text @click="save"
-                >Save</v-btn
-              >
             </v-card-actions>
           </v-card>
-          <v-alert
-            outlined
-            v-model="showSave"
-            dismissible
-            close-text="Close Alert"
-            type="success"
-            >Saved.</v-alert
-          >
-          <v-alert
-            outlined
-            v-model="showSaveError"
-            dismissible
-            close-text="Close Alert"
-            type="success"
-            >There was an error while saving. Please check the logs.</v-alert
-          >
         </v-flex>
 
         <v-flex xs12 v-if="!ownerDevice && pluginData">
@@ -311,16 +325,17 @@
               class="green-gradient subtitle-1 text--white font-weight-light"
               >Storage</v-card-title
             >
-              <v-container>
-                <v-layout>
-                  <v-flex xs12>
-                    <Storage
-                      v-model="pluginData.storage"
-                      @input="onChange"
-                    ></Storage>
-                  </v-flex>
-                </v-layout>
-              </v-container>
+            <v-container>
+              <v-layout>
+                <v-flex xs12>
+                  <Storage
+                    v-model="pluginData.storage"
+                    @input="onChange"
+                    @save="saveStorage"
+                  ></Storage>
+                </v-flex>
+              </v-layout>
+            </v-container>
           </v-card>
         </v-flex>
 
@@ -552,7 +567,9 @@ export default {
     if (this.needsLoad) {
       this.reload();
     }
-    this.device.refresh?.(undefined, true);
+    this.device?.listen(undefined, (eventSource, eventDetails, eventData) => {
+      if (eventDetails.eventInterface === "Storage") this.reloadStorage();
+    });
   },
   destroyed() {
     this.cleanupListener();
@@ -581,8 +598,6 @@ export default {
         showConsole: false,
         showRepl: false,
         showDelete: false,
-        showSave: false,
-        showSaveError: false,
         pluginData: undefined,
         name: undefined,
         room: undefined,
@@ -646,6 +661,14 @@ export default {
       await installNpm(this.pluginData.pluginId);
       this.reload();
     },
+    async reloadStorage() {
+      if (!this.pluginData) return;
+
+      const plugins = await this.$scrypted.systemManager.getComponent(
+        "plugins"
+      );
+      this.pluginData.storage = await plugins.getStorage(this.id);
+    },
     async reload() {
       this.name = this.device.name;
       this.room = this.device.room;
@@ -689,32 +712,23 @@ export default {
       this.$router.replace("/device");
       this.$scrypted.systemManager.removeDevice(id);
     },
-    async save() {
-      this.showSaveError = false;
-      this.showSave = false;
-      try {
-        const device = this.device;
-        await device.setName(this.name);
-        await device.setType(this.type);
-        await device.setRoom(this.room);
-        const plugins = await this.$scrypted.systemManager.getComponent(
-          "plugins"
-        );
-        if (this.deviceData) {
-          this.pluginData.storage.data = this.deviceData;
-        }
-        await plugins.setStorage(device.id, this.pluginData.storage);
-        if (this.deviceData) {
-          await this.$scrypted.deviceManager.onDeviceEvent(
-            this.pluginData.nativeId,
-            "Storage",
-            null
-          );
-        }
-        this.showSave = true;
-      } catch (e) {
-        this.showSaveError = true;
+    async saveName() {
+      await this.device.setName(this.name);
+    },
+    async saveType() {
+      await this.device.setType(this.type);
+    },
+    async saveRoom() {
+      await this.device.setRoom(this.room);
+    },
+    async saveStorage() {
+      const plugins = await this.$scrypted.systemManager.getComponent(
+        "plugins"
+      );
+      if (this.deviceData) {
+        this.pluginData.storage.data = this.deviceData;
       }
+      await plugins.setStorage(device.id, this.pluginData.storage);
     },
     openMixin(mixin) {
       this.$router.push(getDeviceViewPath(mixin.id));
@@ -812,3 +826,9 @@ a.alert-link {
   color: white;
 }
 </style>
+</script>
+<style scoped>
+.shift-up {
+  margin-top: -8px;
+}
+</style>

plugins/core/ui/src/interfaces/Setting.vue

@@ -21,13 +21,15 @@
       persistent-hint
     >
       <template v-slot:append-outer>
-        <v-btn v-if="dirty" color="green" outlined @click="save" class="shift-up">
-          <v-icon>fa-save</v-icon>
+        <v-btn v-if="dirty" color="success" @click="save" class="shift-up">
+          <v-icon>send</v-icon>
         </v-btn>
       </template>
     </v-select>
     <Grower
-      v-else-if="lazyValue.type && lazyValue.type.toLowerCase().startsWith('device[]')"
+      v-else-if="
+        lazyValue.type && lazyValue.type.toLowerCase().startsWith('device[]')
+      "
       v-model="lazyValue.value"
     >
       <template v-slot:default="slotProps">
@@ -41,26 +43,27 @@
       </template>
 
       <template v-slot:append-outer>
-        <v-btn v-if="dirty" @click="save" >
-         Save
-        </v-btn>
+        <v-btn v-if="dirty" @click="save"> Save </v-btn>
       </template>
     </Grower>
 
     <DevicePicker
-      v-else-if="lazyValue.type && lazyValue.type.toLowerCase().startsWith('device')"
+      v-else-if="
+        lazyValue.type && lazyValue.type.toLowerCase().startsWith('device')
+      "
       v-model="lazyValue.value"
       :devices="devices"
       :title="lazyValue.title"
       :description="lazyValue.description"
     >
       <template v-slot:append-outer>
-        <v-btn v-if="dirty" color="green" outlined @click="save" class="shift-up">
-          <v-icon>fa-save</v-icon>
+        <v-btn v-if="dirty" color="success" @click="save" class="shift-up">
+          <v-icon>send</v-icon>
         </v-btn>
       </template>
     </DevicePicker>
     <v-text-field
+      dense
       :readonly="lazyValue.readonly"
       v-else
       outlined
@@ -69,11 +72,15 @@
       :label="lazyValue.title"
       :hint="lazyValue.description"
       persistent-hint
-      :type="lazyValue.type && lazyValue.type.toLowerCase() === 'password' ? 'password' : undefined"
+      :type="
+        lazyValue.type && lazyValue.type.toLowerCase() === 'password'
+          ? 'password'
+          : undefined
+      "
     >
       <template v-slot:append-outer>
-        <v-btn v-if="dirty" color="green" outlined @click="save" class="shift-up">
-          <v-icon>fa-save</v-icon>
+        <v-btn v-if="dirty" color="success" text @click="save" class="shift-up">
+          <v-icon>send</v-icon>
         </v-btn>
       </template>
     </v-text-field>
@@ -89,7 +96,7 @@ export default {
   mixins: [RPCInterface],
   components: {
     DevicePicker,
-    Grower
+    Grower,
   },
   computed: {
     booleanValue: {
@@ -100,7 +107,7 @@ export default {
       },
       set(val) {
         this.lazyValue.value = val.toString();
-      }
+      },
     },
     dirty() {
       var type = this.value.type || "";
@@ -118,8 +125,8 @@ export default {
         expression = "true;";
       }
       var ret = this.$store.state.scrypted.devices
-        .map(id => this.$scrypted.systemManager.getDeviceById(id))
-        .filter(device => {
+        .map((id) => this.$scrypted.systemManager.getDeviceById(id))
+        .filter((device) => {
           try {
             return eval(
               `(function() { var interfaces = ${JSON.stringify(
@@ -130,16 +137,16 @@ export default {
             return true;
           }
         })
-        .map(device => ({
+        .map((device) => ({
           id: device.id,
-          text: device.name
+          text: device.name,
         }));
-        ret.splice(0, 0, {
-          id: null,
-          text: "Select a Device",
-        })
-        return ret;
-    }
+      ret.splice(0, 0, {
+        id: null,
+        text: "Select a Device",
+      });
+      return ret;
+    },
   },
   methods: {
     createLazyValue() {
@@ -159,17 +166,17 @@ export default {
       }
 
       var ret = cloneDeep(this.lazyValue);
-      ret.value = JSON.stringify(ret.value.filter(id => id));
+      ret.value = JSON.stringify(ret.value.filter((id) => id));
       return ret;
     },
     save() {
       this.rpc().putSetting(this.lazyValue.key, this.createInputValue().value);
       this.onInput();
-    }
-  }
+    },
+  },
 };
 </script>
-<style>
+<style scoped>
 .shift-up {
   margin-top: -8px;
 }