core: ui updates

plugins/core/package-lock.json

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

plugins/core/package.json

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

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

@@ -1,13 +1,14 @@
 <template>
   <v-flex xs12>
-    <v-card-actions
-      v-if="
-        device.interfaces.includes('DeviceCreator') ||
-        device.interfaces.includes('DeviceDiscovery')
-      "
-    >
+    <v-card-actions v-if="
+      device.interfaces.includes('DeviceCreator') ||
+      device.interfaces.includes('DeviceDiscovery')
+    ">
       <v-dialog max-width="600px" v-model="showCreateDeviceSettings">
-        <Settings v-model="createDeviceSettings" :noTitle="true" class="pa-2">
+        <Settings v-model="createDeviceSettings" custom-title="Add New" class="pa-2">
+          <template v-slot:prepend>
+            <v-alert v-if="createError" type="error">{{ createError }}</v-alert>
+          </template>
           <template v-slot:append>
             <v-card-actions>
               <v-spacer></v-spacer>
@@ -16,37 +17,21 @@
           </template>
         </Settings>
       </v-dialog>
-      <v-btn
-        v-if="device.interfaces.includes('DeviceCreator')"
-        text
-        color="primary"
-        @click="openDeviceCreationDialog"
-        >Add New</v-btn
-      >
+      <v-btn v-if="device.interfaces.includes('DeviceCreator')" text color="primary" @click="openDeviceCreationDialog">Add
+        New</v-btn>
       <!-- <v-btn
-        v-if="device.interfaces.includes('DeviceDiscovery')"
-        text
-        color="primary"
-        >Discover Devices</v-btn
-      > -->
+          v-if="device.interfaces.includes('DeviceDiscovery')"
+          text
+          color="primary"
+          >Discover Devices</v-btn
+        > -->
     </v-card-actions>
 
     <v-card-text>These things were created by {{ device.name }}.</v-card-text>
-    <v-text-field
-      v-if="managedDevices.devices.length > 10"
-      v-model="search"
-      append-icon="search"
-      label="Search"
-      single-line
-      hide-details
-    ></v-text-field>
-    <v-data-table
-      v-if="managedDevices.devices.length > 10"
-      :headers="headers"
-      :items="managedDevices.devices"
-      :items-per-page="10"
-      :search="search"
-    >
+    <v-text-field v-if="managedDevices.devices.length > 10" v-model="search" append-icon="search" label="Search"
+      single-line hide-details></v-text-field>
+    <v-data-table v-if="managedDevices.devices.length > 10" :headers="headers" :items="managedDevices.devices"
+      :items-per-page="10" :search="search">
       <template v-slot:[`item.icon`]="{ item }">
         <v-icon x-small color="grey">
           {{ typeToIcon(item.type) }}
@@ -70,6 +55,7 @@ export default {
   mixins: [RPCInterface],
   data() {
     return {
+      createError: '',
       showCreateDeviceSettings: false,
       showCreateDevice: false,
       createDeviceSettings: null,
@@ -89,8 +75,13 @@ export default {
       for (const setting of this.createDeviceSettings.settings) {
         settings[setting.key] = setting.value;
       }
-      const id = await this.device.createDevice(settings);
-      this.$router.push(getDeviceViewPath(id));
+      try {
+        const id = await this.device.createDevice(settings);
+        this.$router.push(getDeviceViewPath(id));
+      }
+      catch (e) {
+        this.createError = e.message;
+      }
     },
     async openDeviceCreationDialog() {
       const settings = await this.device.getCreateDeviceSettings();
@@ -137,7 +128,7 @@ export default {
         .filter(
           (id) =>
             this.$store.state.systemState[id].providerId.value ===
-              this.device.id && this.device.id !== id
+            this.device.id && this.device.id !== id
         )
         .map((id) => ({
           id,

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

@@ -1,6 +1,8 @@
 <template>
   <v-card>
-    <CardTitle v-if="!noTitle">Settings</CardTitle>
+    <v-card-title class="pl-0 pt-0" v-if="customTitle">{{ customTitle }}</v-card-title>
+    <CardTitle v-else>Settings</CardTitle>
+    <slot name="prepend"></slot>
     <v-flex xs12 v-if="showChips">
       <v-chip-group class="pt-0" mandatory active-class="deep-purple accent-4 white--text" column
         v-model="settingsGroupName">
@@ -75,7 +77,7 @@ export default {
     AvailableMixins,
   },
   mixins: [RPCInterface, Mixin],
-  props: ["noTitle"],
+  props: ["customTitle"],
   data() {
     return {
       rawSettingsSubgroupName: undefined,