From c81b716121631e085986b46e0e11a894ed81b7da Mon Sep 17 00:00:00 2001
From: judithweng <83525666+judithweng@users.noreply.github.com>
Date: Tue, 2 Jul 2024 14:53:52 -0400
Subject: [PATCH] Update main page to match style guide (#183)

* moving create forms into a separate folder

* input file button colors

* change form bg colors to lighter blue (sky to frost)

* change font color on input text placeholders:

* changing borders

* remove borders

* children device name input box styled accordingly

* clean up code

* adding tag input field

* notify all checkbox

* clean code

* Edited format a little to fit Figma

* fix warning about notifyAll

---------

Co-authored-by: K42IE <katiepryal@live.com>
---
 packages/frontend/assets/styles/main.scss     |  9 ++
 .../{ => Forms}/CreateContainer.vue           | 90 ++++++++++++++-----
 .../components/{ => Forms}/CreateDevice.vue   | 22 ++++-
 .../frontend/components/Provenance/Feed.vue   |  3 -
 .../frontend/pages/device/[deviceKey].vue     |  4 -
 packages/frontend/pages/index.vue             |  4 +-
 6 files changed, 96 insertions(+), 36 deletions(-)
 rename packages/frontend/components/{ => Forms}/CreateContainer.vue (73%)
 rename packages/frontend/components/{ => Forms}/CreateDevice.vue (75%)

diff --git a/packages/frontend/assets/styles/main.scss b/packages/frontend/assets/styles/main.scss
index f9f8cae..f981d61 100644
--- a/packages/frontend/assets/styles/main.scss
+++ b/packages/frontend/assets/styles/main.scss
@@ -19,6 +19,15 @@ $font-weight-base: 500;
 
 $theme-colors: map-merge($custom-theme-colors, $theme-colors);
 
+$input-placeholder-color: #1e2019;
+$input-font-weight: $font-weight-base;
+$input-border-width: 0;
+
+$form-file-button-color: #ffffff;
+$form-file-button-bg: #4e3681 ;
+$form-file-button-hover-bg: #322253;
+
+
 
 // import bootstrap
 @import "bootstrap/scss/bootstrap";
diff --git a/packages/frontend/components/CreateContainer.vue b/packages/frontend/components/Forms/CreateContainer.vue
similarity index 73%
rename from packages/frontend/components/CreateContainer.vue
rename to packages/frontend/components/Forms/CreateContainer.vue
index 2238209..734c79d 100644
--- a/packages/frontend/components/CreateContainer.vue
+++ b/packages/frontend/components/Forms/CreateContainer.vue
@@ -1,35 +1,49 @@
 <template>
-    <form enctype="multipart/form-data" class="bg-sky p-3" @submit.prevent="submitForm">
+    <form enctype="multipart/form-data" class="bg-frost p-3" @submit.prevent="submitForm">
         <p class="text-iris mt-1">Create New Container</p>
         <div>
             <input type="text" class="form-control" v-model="name" required placeholder="Container Name">
             <input type="text" class="form-control mt-2" v-model="description" id="device-description" placeholder="Container Description">
-            <label class="text-iris form-label mt-3" for="file">Container Image (optional):</label>
+            <label class="text-iris form-label mt-3 mb-2" for="file">Container Image (optional)</label>
             <input type="file" class="form-control" accept="image/*" @change="onFileChange" capture="environment" multiple />
+            
+            <label class="mt-3 mb-2 text-iris">Add Tags (optional)</label>
+            <ProvenanceTagInput class="form-control mt-1" placeholder="Device Tag" v-model="tags" @updateTags="handleUpdateTags"/>
+            <div>
+                <span v-for="(tag, index) in tags" :key="tag"> {{ tag }}{{ index !== tags.length - 1 ? ', ' : '' }}</span> 
+            </div>
 
-            <span style="display: inline">
-            <label class="text-iris mt-3 me-2" for="report-key">Create Reporting Key:</label>
-            <input type="checkbox" id="report-key" v-model="createReportingKey" /> </span>
 
+            <label class="text-iris my-4 me-2" for="children-keys">Number of contained devices (optional)</label>
+            <input type="number" class="form-inline" id="children-keys" v-model="childrenKeys" min="0" max="500" @change="displayFields">
+            
             <br>
-            <label class="text-iris my-3 me-2" for="children-keys">Number of contained devices (optional):</label>
-            <input type="number" id="children-keys" v-model="childrenKeys" min="0" max="500" @change="displayFields">
+            <div class="text-iris mt-1 ">
+                Customize Contained Device Names?
+                <div class="text-black p-1" style="display:inline"> 
+                    <input class="form-check-input" type="checkbox" id="customize-yes" name="customize"  @change="displayFields"/>
+                </div>
+            </div>
 
-            <br>
-            <span class="text-iris mt-4">
-            Customize Contained Device Names?
-            <div class="text-black p-1" style="display:inline"> 
-                <input type="radio" id="customize-yes" name="customize"  @change="displayFields"/>Yes
-                <input class="ms-1" type="radio" id="customize-no" name="customize"   @change="displayFields" checked/>No
+            <div class="text-iris" id="num-fields" style="display:none" >
+                <label for="input"></label>
             </div>
-            </span>
 
+            <br>
+            <div class="text-iris mt-1 ">
+                Create Reporting Key?
+                <input type="checkbox" class="form-check-input" id="report-key" v-model="createReportingKey" /> 
+            </div>
 
-            <div id="num-fields" style="display:none" >
-                <label for="input"></label>
+            <br>
+            <div class="text-iris mt-1">
+                Notify all children?
+                <input type="checkbox" class="form-check-input" id="notify-all"/> 
             </div>
 
+
         </div>
+        
         <div class="d-grid">        
             <button class="btn my-3 bg-iris text-white" type="submit">Create Container</button>
         </div>    </form>
@@ -44,6 +58,7 @@ export default {
         return {
             name: '',
             description: '',
+            tags: [] as string[],
             childrenKeys: 0,
             createReportingKey: false,
             hasParent: false, // states whether this device is contained within a box/container
@@ -51,6 +66,10 @@ export default {
         }
     },
     methods: {
+        handleUpdateTags(tags: string[]) {
+            // console.log('handle Update Tags', tags);
+            this.tags = tags;
+        },
         onFileChange(e: Event) {
             const target = e.target as HTMLInputElement;
             const files = target.files;
@@ -76,6 +95,9 @@ export default {
                     newInput = document.createElement('input');
                     newInput.id = 'name-input-' + (i);
                     newInput.type = 'text';
+                    newInput.style.border = "0px";
+                    newInput.style.borderRadius = "4px";
+                    newInput.style.margin = "3px"
                     newInput.required = true;
                     newLabel =  document.createElement('label');
                     newLabel.textContent = 'Device #'+ (i+1) +' Name:  ';
@@ -88,7 +110,7 @@ export default {
                 wrapper_div.append(fieldset);
                 wrapper_div.style.display = "inline";
 
-            } else if (customize_no.checked) {
+            } else {
                 wrapper_div.style.display = "none";
             }
             
@@ -106,15 +128,22 @@ export default {
             const childrenDeviceList = [];
             const childrenDeviceName = [];
             let reportingKey;
+
+            if ((<HTMLInputElement>document.getElementById("notify-all")).checked) {
+                console.log("notifying all children");
+                this.tags = (this.tags).concat(['notify_all'])
+            } 
+
             if (hasReportingKey) {
                 reportingKey =  await makeEncodedDeviceKey(); //reporting key = public key
+                let tag_set = (this.tags).concat(['reportingkey']);
 
                 await  postProvenance(reportingKey, {
                     blobType: 'deviceInitializer',
                     deviceName: this.name,
                     // Is this a proper description? Should it say "reporting key" or something?
                     description: this.description,
-                    tags: ['creation', 'reportingkey'],
+                    tags: tag_set,
                     children_key: '',
                     hasParent: true,
                     isReportingKey: true,
@@ -153,8 +182,8 @@ export default {
                     await  postProvenance(childKey, {
                         blobType: 'deviceInitializer',
                         deviceName: childName,
-                        description: "",  // need to see if we want a special description when making a child
-                        tags:['creation'],
+                        description: this.description,  // need to see if we want a special description when making a child
+                        tags:this.tags,
                         children_key: '',
                         hasParent: true,
                         isReportingKey: false
@@ -171,12 +200,11 @@ export default {
                     childrenDeviceName.push(childName);
                 }
             };
-            console.log("reportingKey",reportingKey);
             postProvenance(deviceKey, {
                 blobType: 'deviceInitializer',
                 deviceName: this.name,
                 description: this.description,
-                tags:['creation'],
+                tags:this.tags,
                 reportingKey: reportingKey,
                 children_key: childrenDeviceList,
                 children_name: childrenDeviceName,
@@ -202,7 +230,6 @@ export default {
 
 <style scoped>
     form {
-        background-color: rgb(60, 179, 113); /* MediumSeaGreen */
         border-radius: 10px;
         padding: 30px;
         width: 100%;
@@ -226,4 +253,21 @@ export default {
         margin-top: 30px;
 
     }
+    input[type=number] {
+        border: 0px;
+        border-radius: 4px;
+    }
+    input[type=checkbox] {
+        width:15px;
+        border: 0px;
+    }
+    .num-fields {
+        border: 0px;
+        border-radius: 4px;
+        border-color:red;
+    }
+    input[type=text] {
+        border:5px;
+        border-color:red;
+    }
 </style>
diff --git a/packages/frontend/components/CreateDevice.vue b/packages/frontend/components/Forms/CreateDevice.vue
similarity index 75%
rename from packages/frontend/components/CreateDevice.vue
rename to packages/frontend/components/Forms/CreateDevice.vue
index c728cd3..1e1e02f 100644
--- a/packages/frontend/components/CreateDevice.vue
+++ b/packages/frontend/components/Forms/CreateDevice.vue
@@ -7,16 +7,24 @@
 -->
 
 <template>
-    <form enctype="multipart/form-data" class="bg-sky p-3" @submit.prevent="submitForm">
+    <form enctype="multipart/form-data" class="bg-frost p-3" @submit.prevent="submitForm">
         <p class="text-iris mt-1">Create New Device</p>
+
         <div>
             <input type="text" class="form-control" v-model="name" required placeholder="Device Name">
             <input type="text" class="form-control mt-2" v-model="description" required placeholder="Device Description">
             <div style="display: block;">
-                <label class="mt-3 text-iris">Device Image (optional):    </label>
-                <input type="file" class="form-control " accept="image/*" @change="onFileChange" capture="environment" multiple />
+                <label class="mt-3 mb-2 text-iris">Device Image (optional)   </label>
+                <input type="file"  class="form-control " accept="image/*" @change="onFileChange" capture="environment" multiple />
+            </div>
+
+            <label class="mt-3 mb-2 text-iris">Add Tags (optional)</label>
+            <ProvenanceTagInput class="form-control mt-1" placeholder="Device Tag" v-model="tags" @updateTags="handleUpdateTags"/>
+            <div>
+                <span v-for="(tag, index) in tags" :key="tag"> {{ tag }}{{ index !== tags.length - 1 ? ', ' : '' }}</span> 
             </div>
         </div>
+
         <div class="d-grid">        
             <button class="btn my-3 bg-iris text-white" type="submit">Create Device</button>
         </div>
@@ -32,12 +40,17 @@ export default {
         return {
             name: '',
             description: '',
+            tags: [] as string[],
             children_key: '',
             hasParent: false, // states whether a device is contained within a box/container
             pictures: [] as File[] | null,
         }
     },
     methods: {
+        handleUpdateTags(tags: string[]) {
+            // console.log('handle Update Tags', tags);
+            this.tags = tags;
+        },
         onFileChange(e: Event) {
             const target = e.target as HTMLInputElement;
             const files = target.files;
@@ -52,6 +65,7 @@ export default {
                 blobType: 'deviceInitializer',
                 deviceName: this.name,
                 description: this.description,
+                tags: this.tags,
                 children_key: '',
                 hasParent: false,
                 isReportingKey: false,
@@ -75,7 +89,6 @@ export default {
 
 <style scoped>
     form {
-        background-color: rgb(145, 193, 248);
         border-radius: 10px;
         padding: 30px;
         width: 100%;
@@ -84,6 +97,7 @@ export default {
         margin-right: auto;
 
     }
+    
     #device-form > * {
         padding: 5px;
         margin: 5px;
diff --git a/packages/frontend/components/Provenance/Feed.vue b/packages/frontend/components/Provenance/Feed.vue
index c7745e5..5f89d12 100644
--- a/packages/frontend/components/Provenance/Feed.vue
+++ b/packages/frontend/components/Provenance/Feed.vue
@@ -7,15 +7,12 @@
         <div v-for="(report, index) in provenance" class="report-box">
             <template v-if="report.record.blobType === 'deviceInitializer'">
                 <h3 id = "createdDevicePoint">Created Device: {{ report.record.deviceName }}</h3>
-                <div>{{ report.record.deviceDescription }}</div>
             </template>
 
-            <template v-else>
             <div class="mb-1 tag-container">
     <span class="tag" v-for="tag in report.record.tags" v-bind:style="'color: '+textColorForTag(tag)+'; background-color: '+getColorForTag(tag)+';'">
     {{tag}}</span>
             </div>
-            </template>
 
             <div>{{ report.record.description }}</div>
             <div v-for="(url, i) in attachmentURLs[index.toString()]" :key="i">
diff --git a/packages/frontend/pages/device/[deviceKey].vue b/packages/frontend/pages/device/[deviceKey].vue
index 65dd7f8..1b42be8 100644
--- a/packages/frontend/pages/device/[deviceKey].vue
+++ b/packages/frontend/pages/device/[deviceKey].vue
@@ -28,10 +28,6 @@ const deviceKey = route.params.deviceKey;
 
     </div>
 
-
-    <!-- <div><a :href="`/provenance/${route.params.deviceKey}`">View History Records</a></div> -->
-
-
     <!--Put the Reporting Key here if there is one -->
     <div>
         <div v-if="hasReportingKey" class="mt-4 mb-2 text-iris fs-2">
diff --git a/packages/frontend/pages/index.vue b/packages/frontend/pages/index.vue
index 924b4fc..80d8233 100644
--- a/packages/frontend/pages/index.vue
+++ b/packages/frontend/pages/index.vue
@@ -19,12 +19,12 @@
         </div>
 
         <!-- <div>Create a Single Asset:</div> -->
-        <div id="create_device"><CreateDevice/></div>
+        <div id="create_device"><FormsCreateDevice/></div>
         <!-- <CreateDevice/> -->
         <!-- <div>Or, if you want to create a group of keys:</div> -->
         <!-- <div></div> -->
         
-        <div id="create_container" style="display:none"><CreateContainer/></div>
+        <div id="create_container" style="display:none"><FormsCreateContainer/></div>
 
         <p class="my-4">
             The Global Open Source Quality Assurance System (GOSQAS) provides the opportunity to create truthful, transparent documentation via our open source provenance tracker, Global Distributed Tracking (GDT). Designed specifically for low-resource settings, GDT allows anyone with simple website access to securely record their project data. Our development philosophy of “Trust Through Transparency” (TTT) encourages better global communication within diverse communities- to include humanitarian response, open source hardware, and scientific research.