Merge branch 'geo-branch' of https://github.com/fzsun/BFL-web into ge…

…o-branch
fzsun · Apr 18, 2019 · 3a5a8a0 · 3a5a8a0
2 parents 352ed39 + 7638cc2
commit 3a5a8a0
Show file tree

Hide file tree

Showing 9 changed files with 2,860 additions and 3,021 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,11 +12,13 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "bulma-tooltip": "^2.0.2",
     "chart.js": "^2.8.0",
     "geocodio": "^2.0.0",
     "node-sass": "^4.11.0",
     "nprogress": "^0.2.0",
     "vue": "^2.5.2",
+    "vue-bulma-tooltip": "^2.0.0-alpha.0",
     "vue-chartkick": "^0.5.0",
     "vue-form-generator": "^2.3.2",
     "vue-json-to-csv": "^1.1.7",

diff --git a/frontend/src/components/Csv_Formatter.vue b/frontend/src/components/Csv_Formatter.vue
diff --git a/frontend/src/components/EquipmentField.vue b/frontend/src/components/EquipmentField.vue
@@ -1,22 +1,20 @@
 <template>
 <div class="field">
-    <div class="control"> 
-        <form v-on:change="emit()">
-            <label class="label">{{label}}</label>
-            <div 
-                class="flexCols"
+    <label class="label">{{label}}</label>
+    <form v-on:change="emit()">
+        <div 
+            class="control tooltip is-tooltip-bottom"
+            v-bind:key="index" 
+            v-bind:data-tooltip="tooltips[index]"
+            v-for="(item, index) in list"
+        >
+            <input 
+                class="input"
+                type="number"
+                v-model="data[index]"
             >
-                <input 
-                    class="input"
-                    type="number"
-                    v-bind:key="index" 
-                    v-for="(item, index) in list"
-                    v-model="data[index]"
-                    v-bind:placeholder="headers[index]"
-                >
-            </div>
-        </form>
-    </div>
+        </div>
+    </form>
 </div>
 </template>
 
@@ -28,19 +26,15 @@ export default {
         },
         label: {
             type: String
+        },
+        tooltips: {
+            type: Array
         }
     },
     data() {
         return {
-            data: new Array(5),
+            data: this.list,
             showLess: true,
-            headers: [
-                "Purchase Cost ($)",
-                "Liftime (yrs) ",
-                "Salvage Value ($)",
-                "Operation Cost ($)",
-                "Capacity (Mg/Week)"
-            ]
         }
     }, 
     methods: {

diff --git a/frontend/src/components/ListInput.vue b/frontend/src/components/ListInput.vue
@@ -1,20 +1,20 @@
 <template>
 <div class="field">
-    <div class="control"> 
-        <form v-on:change="emit()">
-            <label class="label">{{label}}</label>
-            <div v-if="showLess">
-                <input 
-                    class="input"
-                    type="number"
-                    v-bind:key="index" 
-                    v-for="(item, index) in list"
-                    v-model="data[index]"
-                    v-bind:placeholder="placeHolders[index]"
-                >
-            </div>
-        </form>
-    </div>
+    <label class="label">{{label}}</label>
+    <form class="flexWrap" v-on:change="emit()">
+        <div
+            class="control tooltip is-tooltip-bottom"
+            v-bind:data-tooltip="tooltips[index]"
+            v-bind:key="index" 
+            v-for="(item, index) in list"
+        >
+            <input 
+                class="input"
+                type="number"
+                v-model="data[index]"
+            >
+        </div>
+    </form>
 </div>
 </template>
 
@@ -27,13 +27,13 @@ export default {
         label: {
             type: String
         },
-        placeHolders: {
+        tooltips: {
             type: Array
         }
     },
     data() {
         return {
-            data: new Array(this.list.length),
+            data: this.list,
             showLess: true,
         }
     }, 
@@ -53,4 +53,9 @@ export default {
 .width {
     width: 18rem;
 }
+
+.flexWrap {
+    display: flex;
+    flex-wrap: wrap;
+}
 </style>
diff --git a/frontend/src/components/Map.vue b/frontend/src/components/Map.vue
@@ -34,7 +34,7 @@
             </label>
         </div>
         <p class="max-width paddingLeft">
-            Place refinery (red pin) as center of hub 
+            Place refinery (red pin) as center of 2-layer hub 
             and spoke optimization model. Next place farm locations 
             (green pins). Finally, place potential satellite storage 
             locations (blue pins).

diff --git a/frontend/src/components/OptimizationForm.vue b/frontend/src/components/OptimizationForm.vue
@@ -5,19 +5,19 @@
         <div class="flexWrap">
             <div class="field">
                 <label class="label">Interest Rate</label>
-                <div class="control">
+                <div class="control tooltip is-tooltip-bottom" data-tooltip="Used to approximate time value of money for equipment">
                     <input class="input" type="text" v-model="model.interest_rate">
                 </div>
             </div>
             <div class="field">
                 <label class="label">Insurance Rate</label>
-                <div class="control">
+                <div class="control tooltip is-tooltip-bottom" data-tooltip="Used to acount for additional costs">
                     <input class="input" type="text" v-model="model.insurance_rate">
                 </div>
             </div>
             <div class="field">
                 <label class="label">Tax Rate</label>
-                <div class="control">
+                <div class="control tooltip is-tooltip-bottom" data-tooltip="Used to acount for additional costs">
                     <input class="input" type="text" v-model="model.tax_rate">
                 </div>
             </div>
@@ -34,14 +34,14 @@
                 </div>
             </div>
             <div class="field">
-                <label class="label">Base Infield Cost</label>
-                <div class="control">
+                <label class="label">Base Infield Cost ($/Mg/km)</label>
+                <div class="control tooltip is-tooltip-bottom" data-tooltip="Base hauling cost of in-field transfer per Mg per km.">
                     <input class="input" type="text" v-model="model.cost.base_infield">
                 </div>
             </div>
             <div class="field">
                 <label class="label">Base Highway Cost</label>
-                <div class="control">
+                <div class="control tooltip is-tooltip-bottom" data-tooltip="Base hauling cost of highway transfer per Mg per km.">
                     <input class="input" type="text" v-model="model.cost.base_highway">
                 </div>
             </div>
@@ -52,15 +52,15 @@
         <div class="flexWrap">
             <div class="field">
                 <label class="label">Moisture</label>
-                <div class="control">
+                <div class="control tooltip is-tooltip-bottom" data-tooltip="Proportion of water content wet biomass.">
                     <input class="input" type="number" v-model="model.moisture">
                 </div>
             </div>
             <ListInput 
                 v-bind:list='model.field.area_ratio' 
                 v-on:listChange='model.field.area_ratio = $event'
                 v-bind:label="'Farm Size Ratio'"
-                v-bind:placeHolders='placeHolders.areaRatio'
+                v-bind:tooltips='tooltips.areaRatio'
             ></ListInput>
         </div>
     <!-- <div class="field">
@@ -77,36 +77,42 @@
                 v-bind:list='model.cost.equipment.loadout'
                 v-on:listChange='model.cost.equipment.loadout = $event'
                 v-bind:label="'Loadout'"
+                v-bind:tooltips="tooltips.equipmentFields"
             >
             </EquipmentField>
             <EquipmentField
                 v-bind:list='model.cost.equipment.press'
                 v-on:listChange='model.cost.equipment.press = $event'
                 v-bind:label="'Press'"
+                v-bind:tooltips="tooltips.equipmentFields"
             >
             </EquipmentField>
             <EquipmentField
                 v-bind:list='model.cost.equipment.chopper'
                 v-on:listChange='model.cost.equipment.chopper = $event'
                 v-bind:label="'Chopper'"
+                v-bind:tooltips="tooltips.equipmentFields"
             >
             </EquipmentField>
             <EquipmentField
                 v-bind:list='model.cost.equipment.bagger'
                 v-on:listChange='model.cost.equipment.bagger = $event'
                 v-bind:label="'Bagger'"
+                v-bind:tooltips="tooltips.equipmentFields"
             >
             </EquipmentField>
             <EquipmentField
                 v-bind:list='model.cost.equipment.module_former'
                 v-on:listChange='model.cost.equipment.module_former = $event'
                 v-bind:label="'Module Former'"
+                v-bind:tooltips="tooltips.equipmentFields"
             >
             </EquipmentField>
             <EquipmentField
                 v-bind:list='model.cost.equipment.module_hauler'
                 v-on:listChange='model.cost.equipment.module_hauler = $event'
                 v-bind:label="'Module Hauler'"
+                v-bind:tooltips="tooltips.equipmentFields"
             >
             </EquipmentField>
         </div>
@@ -115,7 +121,7 @@
     <div>
         <div class="label centerAlign makeFull">Transportation Factors</div>
         <div class="flexWrap">
-            <div class="control">
+            <div class="control tooltip is-tooltip-bottom" data-tooltip="Factor of compression configuration on base hauling cost.">
                 <div class="field">
                     <label class="label">Compressed</label>
                     <input 
@@ -125,7 +131,7 @@
                     >
                 </div>
             </div>
-            <div class="control">
+            <div class="control tooltip is-tooltip-bottom" data-tooltip="Factor of whole stalk configuration on base hauling cost.">
                 <div class="field">
                     <label class="label">Whole Stalk</label>
                     <input 
@@ -135,7 +141,7 @@
                     >
                 </div>
             </div>
-            <div class="control">
+            <div class="control tooltip is-tooltip-bottom" data-tooltip="Factor of in module configuration on base hauling cost.">
                 <div class="field">
                     <label class="label">In Module</label>
                     <input 
@@ -153,31 +159,31 @@
         <div class="flexWrap">
             <div class="field">
                 <label class="label">Whole Stalk</label>
-                <div class="control">
+                <div class="control tooltip is-tooltip-bottom" data-tooltip="Number of weeks until fully degraded for configuration">
                     <input 
                         class="input" 
                         type="number" 
                         v-model="model.degrade.whole_stalk"
                     >
                 </div>
             </div>
-            <div class="control">
+            <div class="control tooltip is-tooltip-bottom" data-tooltip="Number of weeks until fully degraded for configuration">
                 <label class="label">Chopped</label>
                 <input 
                     class="input" 
                     type="number" 
                     v-model="model.degrade.chopped"
                 >
             </div>
-            <div class="control">
+            <div class="control tooltip is-tooltip-bottom" data-tooltip="Number of weeks until fully degraded for configuration">
                 <label class="label">In Bunker</label>
                 <input 
                     class="input" 
                     type="number" 
                     v-model="model.degrade.in_bunker"
                 >
             </div>
-            <div class="control">
+            <div class="control tooltip is-tooltip-bottom" data-tooltip="Number of weeks until fully degraded for configuration">
                 <label class="label">In Bag</label>
                 <input 
                     class="input" 
@@ -212,8 +218,15 @@ export default {
     },
     data() {
         return {
-            placeHolders: {
-                areaRatio: ["Smallest", "Largest"],
+            tooltips: {
+                areaRatio: ["Smallest size factor", "Largest size factor"],
+                equipmentFields: [
+                    "Purchase Cost ($)",
+                    "Liftime (yrs) ",
+                    "Salvage Value ($)",
+                    "Operation Cost ($)",
+                    "Capacity (Mg/Week)"
+                ]
             }
         }
     }