UI: TileInfo uses dialog, improved styling

Author: JoeHowarth

.idea/workspace.xml

@@ -1,30 +1,52 @@
-<template>
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <v-card
       elevation-15
   >
-    <back-button></back-button>
-    <v-card-title primary-title>
-      Tile Information
-    </v-card-title>
-    <v-container>
+    <v-layout row>
+      <back-button></back-button>
+      <v-card-title primary-title>
+        Tile Information
+      </v-card-title>
+
+    </v-layout>
+    <v-container py-1>
       <v-layout
           column
       >
-        <v-select
-            v-model="section"
-            :items="sections"
-            attach
-            chips
-            label="Section"
-        ></v-select>
-        <v-select
-            v-model="comp"
-            :items="comps"
-            attach
-            chips
-            label="Component"
-        ></v-select>
-        <v-btn @click="setDeps">Choose</v-btn>
+        <v-dialog v-model="dialog">
+          <template v-slot:activator="{ on }">
+            <v-btn
+                color="red lighten-2"
+                dark
+                v-on="on"
+            >
+              Add
+            </v-btn>
+          </template>
+          <v-card @keypress.enter="setDeps">
+            <v-container>
+              <v-select
+                  v-model="section"
+                  :items="sections"
+                  attach
+                  chips
+                  label="Section"
+              ></v-select>
+              <v-select
+                  v-model="comp"
+                  :items="comps"
+                  attach
+                  chips
+                  label="Component"
+              ></v-select>
+              <v-layout row>
+                <v-btn @click="setDeps">Choose</v-btn>
+                <v-btn @click="dialog = false; section = ''; comp = ''">cancel</v-btn>
+              </v-layout>
+            </v-container>
+          </v-card>
+        </v-dialog>
+
         <v-list>
           <v-list-tile>
             {{mesh.h[triClicked]}}
@@ -52,7 +74,8 @@
       return {
         section: '',
         comp: '',
-        deps: []
+        deps: [],
+        dialog: false,
       }
     },
     components: {
@@ -75,34 +98,35 @@
       },
 
       data() {
-        console.log("in computed data ", this.deps)
+        // console.log("in computed data ", this.deps)
         let d = this.deps.map(({section, comp}) => this.$store.state[section][comp])
-        console.log("data: ", d)
+        // console.log("data: ", d)
         return d
       },
       display() {
-        console.log("in display")
-        return this.data.map(d => {
+        // console.log("in display")
+        return this.data.map((d,i) => {
           console.log(d)
           if (Array.isArray(d)) {
-            return d[this.triClicked]
+            return (this.deps[i].comp) + ": \n  " + d[this.triClicked]
           } else {
-            return Object.keys(d).map(k => {
-              return Array.isArray(d[k]) ? d[k][this.triClicked] : 'not array'
-            });
+            const a = Object.keys(d).map(k => {
+              return (Array.isArray(d[k]) ? d[k][this.triClicked] : 'not array')
+            })
+            return (this.deps[i].comp) + ": \n  " + a;
           }
         });
       },
     },
     methods: {
       setDeps() {
-        console.log(this.section, this.comp)
+        // console.log(this.section, this.comp)
         let newDeps = {section: this.section, comp: this.comp}
-        console.log(newDeps)
+        // console.log(newDeps)
 
         this.deps.push(newDeps)
-        console.log(this.deps)
-
+        // console.log(this.deps)
+        this.dialog = false
         this.section = ''
         this.comp = ''
       }

vue-client/src/components/panels/TileInfo.vue

@@ -83,7 +83,7 @@ export function getER(): MapData {
 export default async function () {
 
   console.log("hi from before setup")
-  mesh = await setup(100, 100, 1.7)
+  mesh = await setup(100, 100, 0.7)
   // const {points, triangles, halfedges} = mesh
 
   h = await genHM(mesh)