core: ui updates

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

@@ -42,7 +42,7 @@
     <v-flex xs12 v-if="showRepl" ref="replEl">
       <REPLCard :deviceId="id"></REPLCard>
     </v-flex>
-    <v-flex xs12 :md6='deviceComponent !== "Automation"'>
+    <v-flex xs12 :md6="deviceComponent !== 'Automation'">
       <v-layout row wrap>
         <v-flex xs12>
           <v-card raised>
@@ -218,7 +218,11 @@
                 <template #activator="{ on: dialog }">
                   <v-tooltip bottom>
                     <template #activator="{ on: tooltip }">
-                      <v-btn x-small v-on="{ ...tooltip, ...dialog }" color="error" text
+                      <v-btn
+                        x-small
+                        v-on="{ ...tooltip, ...dialog }"
+                        color="error"
+                        text
                         ><v-icon x-small>fa-trash</v-icon></v-btn
                       >
                     </template>
@@ -255,7 +259,7 @@
             </v-card-actions>
           </v-card>
         </v-flex>
-<!--
+        <!--
         <v-flex xs12 v-if="!ownerDevice && pluginData">
           <v-card raised>
             <v-card-title
@@ -319,6 +323,7 @@
               >
                 <v-list-item-action>
                   <v-checkbox
+                    dense
                     @click.stop
                     @change="toggleMixin(mixin)"
                     v-model="mixin.enabled"
@@ -332,7 +337,7 @@
 
                 <v-list-item-icon>
                   <v-list-item-action
-                    ><v-btn icon @click.stop="openMixin(mixin)"
+                    ><v-btn small @click.stop="openMixin(mixin)"
                       ><v-icon x-small>fa-external-link-alt</v-icon></v-btn
                     ></v-list-item-action
                   >
@@ -362,10 +367,10 @@
           </v-card>
         </v-flex>
 
-        <v-flex xs12>
-          <v-card raised v-for="iface in cardUnderInterfaces" :key="iface">
+        <v-flex xs12 v-for="iface in cardUnderInterfaces" :key="iface">
+          <v-card raised>
             <v-card-title class="orange-gradient subtitle-1 font-weight-light">
-              {{ iface }}
+              {{ getInterfaceFriendlyName(iface) }}
             </v-card-title>
             <component
               :value="deviceState"
@@ -380,10 +385,10 @@
     <v-flex xs12 md6 lg6>
       <v-layout row wrap>
         <v-flex xs12 v-for="iface in cardInterfaces" :key="iface">
-          <v-card >
+          <v-card>
             <v-card-title
               class="red-gradient white--text subtitle-1 font-weight-light"
-              >{{ iface }}</v-card-title
+              >{{ getInterfaceFriendlyName(iface) }}</v-card-title
             >
             <component
               :value="deviceState"
@@ -395,7 +400,6 @@
 
         <v-flex xs12 v-for="iface in noCardInterfaces" :key="iface">
           <component
-            
             :value="deviceState"
             :device="device"
             :is="iface"
@@ -423,6 +427,7 @@ import {
   removeAlert,
   getAlertIcon,
   hasFixedPhysicalLocation,
+  getInterfaceFriendlyName,
 } from "./helpers";
 import { ScryptedInterface } from "@scrypted/sdk/types";
 import Notifier from "../interfaces/Notifier.vue";
@@ -618,6 +623,7 @@ export default {
     },
   },
   methods: {
+    getInterfaceFriendlyName,
     hasFixedPhysicalLocation,
     getComponentWebPath,
     removeAlert,

plugins/core/ui/src/components/helpers.ts

@@ -28,6 +28,7 @@ export function typeToIcon(type) {
         case ScryptedDeviceType.Unknown: return "fa-question-circle";
         case ScryptedDeviceType.Valve: return "fa-faucet";
         case ScryptedDeviceType.Irrigation: return "fa-faucet";
+        case ScryptedDeviceType.Person: return "fa-user";
 
     }
     return "toggle-on";
@@ -91,6 +92,7 @@ export function hasFixedPhysicalLocation(type: ScryptedDeviceType, interfaces?:
         case ScryptedDeviceType.Event:
         case ScryptedDeviceType.DeviceProvider:
         case ScryptedDeviceType.DataSource:
+        case ScryptedDeviceType.Person:
             return false;
     }
     return true;
@@ -173,3 +175,11 @@ export function isSyncable(type: ScryptedDeviceType) {
     }
     return false;
 }
+
+const interfaceFriendlyNames = new Map<ScryptedInterface, string>();
+interfaceFriendlyNames.set(ScryptedInterface.MixinProvider, "Compatible Things");
+interfaceFriendlyNames.set(ScryptedInterface.DeviceProvider, "Providing Things");
+
+export function getInterfaceFriendlyName(iface: ScryptedInterface) {
+    return interfaceFriendlyNames.get(iface) || iface.toString();
+}

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

@@ -18,7 +18,7 @@
 <script>
 import RPCInterface from "./RPCInterface.vue";
 import { streamCamera } from "../common/camera";
-import { ScryptedInterface } from '@scrypted/sdk/types';
+import { ScryptedInterface } from "@scrypted/sdk/types";
 
 export default {
   mixins: [RPCInterface],
@@ -40,6 +40,16 @@ export default {
         this.pc = undefined;
       }
     },
+    async refresh() {
+      const picture = await this.device.takePicture();
+      this.$scrypted.mediaManager
+        .convertMediaObjectToLocalUrl(picture, "image/*")
+        .then((result) => {
+          this.picture = true;
+          const url = new URL(result);
+          this.src = url.pathname;
+        });
+    },
   },
   watch: {
     async dialog(val) {
@@ -56,16 +66,7 @@ export default {
     },
   },
   mounted() {
-    (async () => {
-      const picture = await this.device.takePicture();
-      this.$scrypted.mediaManager
-        .convertMediaObjectToLocalUrl(picture, "image/*")
-        .then((result) => {
-          this.picture = true;
-          const url = new URL(result);
-          this.src = url.pathname;
-        });
-    })();
+    this.refresh();
   },
 };
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <v-flex xs12>
-    <v-card-text>These devices were created by {{ device.name }}.</v-card-text>
+    <v-card-text>These things were created by {{ device.name }}.</v-card-text>
     <DeviceGroup :deviceGroup="managedDevices"></DeviceGroup>
   </v-flex>
 </template>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-card-text
-      >{{ device.name }} can be enabled for these devices.</v-card-text
+      >{{ device.name }} can be enabled for these things.</v-card-text
     >
 
     <v-list-item-group>