From 42ab9923979d0df5d9819c1acc7bb33d8e7f4260 Mon Sep 17 00:00:00 2001
From: Kasen IO <kasenvr@gmail.com>
Date: Fri, 3 Apr 2020 01:46:14 -0400
Subject: [PATCH] Even *further* progress.

---
 scripts/system/inventory/inventory.html     | 122 ++++++++++++++++----
 scripts/system/inventory/inventory.js       |  41 +++++++
 scripts/system/inventory/styles/vuetify.css |   4 +-
 3 files changed, 143 insertions(+), 24 deletions(-)

diff --git a/scripts/system/inventory/inventory.html b/scripts/system/inventory/inventory.html
index f1f9061840..d6bb867420 100644
--- a/scripts/system/inventory/inventory.html
+++ b/scripts/system/inventory/inventory.html
@@ -20,7 +20,7 @@
 
             <v-navigation-drawer
                 v-model="drawer"
-                absolute
+                fixed
                 temporary
             >
                 <v-list
@@ -49,6 +49,7 @@
                             <v-row>
                                 <v-col
                                     v-for="item in items"
+                                    v-bind:key="item.url"
                                     cols="12"
                                     sm="6"
                                     md="4"
@@ -60,28 +61,72 @@
                                         outlined
                                     >
                                         <v-list-item three-line>
-                                            <v-list-item-content>
-                                                <div class="overline mb-4">{{item.type}}</div>
-                                                <v-list-item-title class="headline mb-1">{{item.name}}</v-list-item-title>
-                                                <!-- <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle> -->
+                                            
+                                            <v-list-item-content class="pb-1 pt-2">
+                                                <div class="overline" style="font-size: 0.825rem !important;">{{item.type}}</div>
+                                                <v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title>
+                                                <v-list-item-subtitle>{{item.url}}</v-list-item-subtitle>
                                             </v-list-item-content>
+                                            
+                                            <!-- <v-card-actions>
+                                                <v-btn class="" color="purple">Share</v-btn>
+                                                <v-btn class="" color="red" @click="removeDialog.show = true;">Remove</v-btn>
+                                            </v-card-actions> -->
+                                            
+                                            <v-menu bottom left>
+                                            <template v-slot:activator="{ on }">
+                                                <v-btn 
+                                                    :style="{backgroundColor: (getIconColor(item.type)) }" 
+                                                    fab 
+                                                    x-large 
+                                                    dark
+                                                    v-on="on"
+                                                >
+                                                    <v-icon>{{displayIcon(item.type)}}</v-icon>
+                                                </v-btn>
+                                            </template>
+
+                                            <v-list color="grey darken-3">
+                                                <v-list-item
+                                                    @click="useItem(item.url)"
+                                                >
+                                                    <v-list-item-title>Use</v-list-item-title>
+                                                    <v-list-item-action>
+                                                        <v-icon>mdi-play</v-icon>
+                                                    </v-list-item-action>
+                                                </v-list-item>
+                                                <v-list-item
+                                                    @click="renameItem(item.url)"
+                                                >
+                                                    <v-list-item-title>Rename</v-list-item-title>
+                                                    <v-list-item-action>
+                                                        <v-icon>mdi-pencil</v-icon>
+                                                    </v-list-item-action>
+                                                </v-list-item>
+                                                <v-list-item
+                                                    @click="shareItem(item.url)"
+                                                >
+                                                    <v-list-item-title>Share</v-list-item-title>
+                                                    <v-list-item-action>
+                                                        <v-icon>mdi-share</v-icon>
+                                                    </v-list-item-action>
+                                                </v-list-item>
+                                                <v-list-item
+                                                    @click="removeDialog.show = true;"
+                                                    color="red darken-1"
+                                                >
+                                                    <v-list-item-title>Remove</v-list-item-title>
+                                                    <v-list-item-action>
+                                                        <v-icon>mdi-minus</v-icon>
+                                                    </v-list-item-action>
+                                                </v-list-item>
+                                            </v-list>
+                                            </v-menu>
+                                            
 
-                                            <v-list-item-avatar
-                                                size="80"
-                                                :style="{backgroundColor: (getIconColor(item.type)) }"
-                                            >
-                                                <v-icon x-large dark>{{displayIcon(item.type)}}</v-icon>
-                                            </v-list-item-avatar>
                                         </v-list-item>
 
-                                        <v-card-actions>
-                                            <v-btn class="px-5" color="purple">Share</v-btn>
-                                            <v-btn class="px-3" color="red" @click="removeDialog.show = true;">Remove</v-btn>
-                                            
-                                            <v-spacer></v-spacer>
-                                            
-                                            <v-btn class="px-7" color="success" :href="item.url">Use</v-btn>
-                                        </v-card-actions>
+
                                     </v-card>
                                 </v-col>
                             </v-row>
@@ -168,6 +213,7 @@
             <v-dialog
                 v-model="receiveDialog.show"
                 max-width="380"
+                persistent
             >
                 <v-card>
                     <v-card-title class="headline">Receiving Item</v-card-title>
@@ -241,8 +287,8 @@ new Vue({
             },
             {
                 "type": "script",
-                "name": "TEST",
-                "url": "https://google.com/vr.js",
+                "name": "TESTLONGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG",
+                "url": "https://google.com/vrLONGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG.js",
             },
             {
                 "type": "avatar",
@@ -287,8 +333,13 @@ new Vue({
             show: false,
         },
         receiveDialog: {
-            show: true,
+            show: false,
+            user: null,
+            name: null,
+            type: null,
+            url: null,
         },
+        sortBy: "alphabetical",
         darkTheme: true,
         drawer: false,
     }),
@@ -299,6 +350,33 @@ new Vue({
     methods: {
         addItem: function(url) {
             
+        },
+        removeItem: function(url) {
+            
+        },
+        renameItem: function(url) {
+            
+        },
+        receivingItem: function(name, url) {
+            
+        },
+        shareItem: function(url) {
+            
+        },
+        acceptItem: function(url) {
+            
+        },
+        useItem: function(url) {
+            alert(url);
+            this.sendAppMessage("test", "testData");
+        },
+        sendAppMessage: function(command, data) {
+            var JSONtoSend = {
+                "app": "inventory",
+                "command": command,
+                "data": data
+            };
+            EventBridge.emitWebEvent(JSON.stringify(JSONtoSend));
         },
         displayIcon: function(itemType) {
             return this.iconType[itemType].icon;
diff --git a/scripts/system/inventory/inventory.js b/scripts/system/inventory/inventory.js
index e69de29bb2..3079b9a5d8 100644
--- a/scripts/system/inventory/inventory.js
+++ b/scripts/system/inventory/inventory.js
@@ -0,0 +1,41 @@
+(function () { // BEGIN LOCAL_SCOPE
+var AppUi = Script.require('appUi');
+var ui;
+var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+
+// APP EVENT ROUTING
+
+function onWebAppEventReceived(event) {
+    var eventJSON = JSON.parse(event);
+    if (eventJSON.app == "inventory") { // This is our web app!
+        print("gemstoneApp.js received a web event: " + event);
+    }
+}
+
+tablet.webEventReceived.connect(onWebAppEventReceived);
+
+// END APP EVENT ROUTING
+
+function saveInventory() {
+    
+}
+
+function onOpened() {
+    console.log("hello world!");
+}
+
+function onClosed() {
+    console.log("hello world!");
+}
+
+function startup() {
+    ui = new AppUi({
+        buttonName: "INVENTORY",
+        home: Script.resolvePath("inventory.html"),
+        graphicsDirectory: Script.resolvePath("./"), // Where your button icons are located
+        onOpened: onOpened,
+        onClosed: onClosed
+    });
+}
+startup();
+}()); // END LOCAL_SCOPE
\ No newline at end of file
diff --git a/scripts/system/inventory/styles/vuetify.css b/scripts/system/inventory/styles/vuetify.css
index e570f335ea..a768345613 100644
--- a/scripts/system/inventory/styles/vuetify.css
+++ b/scripts/system/inventory/styles/vuetify.css
@@ -4443,7 +4443,7 @@
 
 .v-card__subtitle,
 .v-card__text {
-  font-size: 1.075rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.375rem;
   letter-spacing: 0.0071428571em;
@@ -14356,7 +14356,7 @@ html.overflow-y-hidden {
   font-family: "Roboto", sans-serif !important;
 }
 .v-application .overline {
-  font-size: 0.925rem !important;
+  font-size: 0.625rem !important;
   font-weight: 400;
   letter-spacing: 0.1666666667em !important;
   line-height: 1rem;