Add ACE features

src/components/ace/index.js

@@ -0,0 +1 @@
+export {default as ACE} from './ACE.vue'

src/components/configuration/ConfigurationMenu.vue

@@ -1,3 +1,10 @@
+<!--
+ConfigurationMenu.vue relates to the pop up menu modal accessible by pressing the hamburger
+(3 horizontal line) button that appears in the upper right corner of the screen on the top bar
+when in Simulation Configuration, which is reached after choosing 'Mars' or
+'Biosphere 2' from the "Main Menu" modal menu. See base\BaseConfiguration.vue for the layout of the
+Simulation Configuration itself.
+-->
 <template>
     <BaseMenu>
         <template #menu-title>

src/components/configuration/CustomAgents.vue

@@ -0,0 +1,175 @@
+<!-- This component establishes the user interface for configuring the quantity of custom agents that
+have been defined in local storage that should be present in the actual simulation -->
+
+<script>
+
+import {useWizardStore} from '../../store/modules/WizardStore'
+
+export default {
+    setup() {
+        const wizard = useWizardStore()
+        const {
+            setActiveRefEntry,
+        } = wizard
+        return {
+            setActiveRefEntry,
+        }
+    },
+    data() {
+        return {
+            customAgents: [], // List of all the possible custom agents
+            addedCustomAgents: [], // Objects holding name and quantity for each agent
+            // selectedName: 'Agent', // For first custom agent field
+            // selectedNames: [], // For addedCustomAgents fields
+            // customAgentAdd: false,
+        }
+    },
+    computed: {
+        /* Related to formatting like plant species
+        newAgentAddMode() {
+            if (this.addedCustomAgents.length<1 || this.customAgentAdd) {
+                this.selectedName='Agent'
+                return true
+            } else {
+                return false
+            }
+        }
+        */
+    },
+    watch: {/*
+        selectedName() { // Related to formatting custom agents the way plant species are
+            if (this.selectedName!='Agent'){
+                this.addedCustomAgents.push({name: this.selectedName, quantity: 1}) // Add drop selected agent
+                this.selectedName='Agent'
+                this.customAgentAdd=false // Make the 'Agent' template disappear when drop selected
+            } else {
+                console.log(this.selectedName)
+            }
+        },
+        addedCustomAgents() {
+            this.selectedNames = []
+            for (let agent in Object.keys(this.addedCustomAgents)) {
+                this.selectedNames.push(this.addedCustomAgents[agent].name)
+            }
+        }, */
+    },
+    async created() {
+        try {
+            // Get currencies from local storage.
+            // this.getLocalStorageCurrencies()
+            this.getLocalStorageAgents()
+        } catch (error) {
+            console.log(error)
+        }
+    },
+    methods: {
+        getLocalStorageAgents() {
+            let localStorageAgents = localStorage.getItem('customAgents')
+            localStorageAgents = JSON.parse(localStorageAgents)
+            const localAgentNames = Object.keys(localStorageAgents)
+            if (typeof (localStorageAgents)==='object' && (localStorageAgents!==null)) {
+                console.log('Custom agents found in local storage:')
+                for (let index=0; index<localAgentNames.length; ++index) {
+                    // It only adds an agent if it is NOT a plant. Custom plants appear in Plant Species already
+                    if (localStorageAgents[localAgentNames[index]].agent_class==='plants') {
+                        console.log('PLANT: ', localAgentNames[index])
+                    } else {
+                        console.log('NOT PLANT: ', localAgentNames[index])
+                        this.customAgents.push(localAgentNames[index])
+                        const agentObject = {name: localAgentNames[index], quantity: 0}
+                        console.log(agentObject)
+                        this.addedCustomAgents.push(agentObject)
+                    }
+                }
+            } else {
+                console.log(' * No agents loaded from local storage *')
+            }
+        }, /*
+        addCustomAgent(name) { // Related to formatting custom agents the way plant species are
+            this.customAgentAdd = true // This makes the blank 'Agent' Field appear when you hit +
+            console.log(name, this.newAgentAddMode)
+        },
+        removeCustomAgent(name) {
+            console.log('REMOVE AGENT:', name)
+        },
+        updateCustomAgent(number) {
+            console.log('UPDATE TRIED', number)
+        },*/
+    },
+}
+</script>
+<template>
+    <div v-if="customAgents.length>0">
+        <label class="input-wrapper">
+            <div class="input-title" @click="setActiveRefEntry('CustomAgents')"> <!-- Description @ Reference.vue -->
+                Custom Agents <fa-icon :icon="['fa-solid','circle-info']" />
+            </div>
+            <div class="input-description">Custom user defined agents other than plants.</div>
+            <!-- This commented code is to make the agent look like the plant config instead
+                 but it has issues that would need to be resolved and may be unnecessary.
+            <div v-for="(item,index) in addedCustomAgents" :key="index" class="input-plant-wrapper">
+                <select  v-model="selectedNames[index]" class="input-field-select">
+                    <option value="" selected hidden>selectedNames[index]</option>
+                    <option v-for="(name,k) in customAgents" :key="k" :value="name">{{customAgents[k]}}</option>
+                </select>
+                <label><input class="input-field-number" type="number" pattern="^\d+$"
+                              placeholder="Quantity" @input="updateCustomAgent(index)"> units</label>
+                <fa-layers class="fa-2x plant-row-icon icon-add" @click="addCustomAgent(selectedNames[index])">
+                    <fa-icon :icon="['fa-solid','circle-plus']" />
+                </fa-layers>
+                <fa-layers class="fa-2x plant-row-icon icon-trash" @click="removeCustomAgent(selectedNames[index])">
+                    <fa-icon :icon="['fa-solid','trash']" mask="circle" transform="shrink-7" />
+                </fa-layers>
+            </div>
+            <div v-if="newAgentAddMode">
+                <div class="input-plant-wrapper">
+                    <select v-model="selectedName" class="input-field-select">
+                        <option value="Agent" selected hidden disabled>Agent</option>
+                        <option v-for="(name,k) in customAgents" :key="k" :value="name">{{customAgents[k]}}</option>
+                    </select>
+                    <label><input class="input-field-number" type="number" pattern="^\d+$"
+                                  placeholder="Quantity" @input="updateCustomAgent(index)"> units</label>
+                    <fa-layers class="fa-2x plant-row-icon icon-add" @click="addCustomAgent(selectedName)">
+                        <fa-icon :icon="['fa-solid','circle-plus']" />
+                    </fa-layers>
+                    <fa-layers class="fa-2x plant-row-icon icon-trash" @click="removeCustomAgent(selectedName)">
+                        <fa-icon :icon="['fa-solid','trash']" mask="circle" transform="shrink-7" />
+                    </fa-layers>
+                </div>
+            </div>
+             -->
+            <div v-for="agent in addedCustomAgents" :key="agent.name">
+                <b>{{agent.name}}</b>, Quantity:
+                <input v-model="agent.quantity" type="number" style="width: 50px;">
+            </div>
+        </label>
+    </div>
+</template>
+<style lang="scss" scoped>
+    @import '../../sass/components/configuration-input';
+
+    .input-plant-wrapper{
+        display:flex;
+        justify-content:flex-start;
+        align-items:center;
+    }
+
+    .input-field-select{
+        margin-right:24px;
+    }
+
+    .plant-row-icon{
+        &:first-of-type{
+            margin-left:auto;
+        }
+
+        margin-right:24px;
+    }
+
+.crop-mgmt-description{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 2em;
+}
+</style>

src/components/configuration/Greenhouse.vue

@@ -1,11 +1,14 @@
+/* This component establishes the user interface for configuring the greenhouse, including
+the list of plants, when the user is in the 'Simulation Configuration' area prior to pressing
+'Launch Simulation' button */
 <template>
     <div>
         <label v-if="simLocation === 'mars'" class="input-wrapper">
             <div class="input-title" @click="setActiveRefEntry('Greenhouse')">
                 Greenhouse <fa-icon :icon="['fa-solid','circle-info']" />
             </div> <!-- On click make the value the active entry on the reference. Set the wiki as active.-->
 
-            <div class="input-description">Select the size of your greenouse. See <a class="reference-link" href="#" @click="activeReference = 'Graphs'">graph at right</a>.</div>
+            <div class="input-description">Select the size of your greenhouse. See <a class="reference-link" href="#" @click="activeReference = 'Graphs'">graph at right</a>.</div>
             <select ref="greenhouse_type" v-model="greenhouse.type"
                     class="input-field-select" required @change="setGreenhouseHandler">
                 <option value="none" selected>None</option>
@@ -38,7 +41,7 @@
                     <fa-icon :icon="['fa-solid','circle-plus']" />
                 </fa-layers>
                 <fa-layers class="fa-2x plant-row-icon icon-trash" @click="removePlantSpecies(index)">
-                    <!-- Deletes the object at the specicied key within the wizard store. -->
+                    <!-- Deletes the object at the specified key within the wizard store. -->
                     <fa-icon :icon="['fa-solid','trash']" mask="circle" transform="shrink-7" />
                 </fa-layers>
             </div>
@@ -81,10 +84,10 @@ export default {
     data() {
         return {
             // Initialize the localized variables used for v-model
-            greenhouse: undefined,
-            plantSpecies: undefined,
-            plantValue: [],
-            plantFormatted: [],
+            greenhouse: undefined, // Used in the v-model for selection of greenhouse.type
+            plantSpecies: undefined, // Used in the v-model to specify sent plant data, including amount
+            plantValue: [], // This list corresponds to the values for the list of config plants
+            plantFormatted: [], // The formatted list of plants to display in the user drop down
             plantMax: [],  // the max m2 for each plant species to fit in the greenhouse
             plant_selects: {},  // map index -> <select> for the plant type dropdown
             plant_inputs: {},  // map index -> <input> for the plant amount
@@ -181,7 +184,7 @@ export default {
             //const indexType = plantSpecies[index].type
 
             let selectedValues = plantSpecies.splice(index,1)
-            return false;
+            return false
         },
 
         // This method should have returned a list of all plant values
@@ -231,16 +234,12 @@ export default {
         // of similar route calls. Simply to reduce the callback hell look.
         retrievePlantSpecies() {
             axios.defaults.withCredentials = true
-
             const params = {agent_class: 'plants'}
-
             axios.get('/get_agent_types', {params}).then(response => {
                 if (response.status === 200) {
                     response.data.forEach(item => {
                         const {name} = item
-                        this.plantValue.push(name)
-                        // console.log(this.formatPlantName(name))
-                        this.formatPlantName(name)
+                        this.listPlant(name)
                     })
                 }
             }).catch(error => {
@@ -249,6 +248,20 @@ export default {
                     console.log('Plant retrieval error')
                 }
             })
+            // Get plants from local data
+            let customAgents = localStorage.getItem('customAgents')
+            if (customAgents == null) return
+            customAgents = JSON.parse(customAgents)
+            const agentNames = Object.keys(customAgents)
+            for (let index=0; index<agentNames.length; ++index) {
+                const name = (agentNames[index])
+                if (customAgents[name].agent_class === 'plants') this.listPlant(name)
+            }
+        },
+        listPlant(name) {
+            // Add the plant to the menu list
+            this.plantValue.push(name)
+            this.formatPlantName(name)
         },
         updateAndValidate() {
             // validate and update greenhouse type

src/components/configuration/Reference.vue

@@ -209,6 +209,10 @@ using v-for to populate all links with the title and the approriate value for th
             <p>The battery holds a maximum of 10,000 kilowatt-hours (kWh).</p>
         </ReferenceItem>
 
+        <ReferenceItem v-if="activeRefEntry === 'CustomAgents'" heading="Custom Agents">
+            <p>For custom agents that are not <a class="reference-link" href="#" @click="setActiveRefEntry('PlantSpecies')">plants</a>, you can specify the quantity here. This could be something like custom electronic devices that consume power. These are user defined agents created by the agent editor.</p>
+        </ReferenceItem>
+
         <div v-if="activeRefEntry === 'Table'">
             <div class="reference-item-title">Table of Contents</div>
             <ul v-if="simLocation === 'mars'">

src/components/configuration/index.js

@@ -8,3 +8,4 @@ export {default as Reference} from './Reference.vue'
 export {default as Graphs} from './Graphs.vue'
 export {default as Presets} from './Presets.vue'
 export {default as Layout} from './Layout.vue'
+export {default as CustomAgents} from './CustomAgents.vue'

src/components/entry/Menu.vue

@@ -11,8 +11,9 @@
                 <button form="login-form" class="btn-normal btn-mars" @click="toConfiguration('mars')">MARS</button>
                 <button form="login-form" class="btn-normal btn-biosphere2" @click="toConfiguration('b2')">BIOSPHERE 2</button>
                 <button form="login-form" class="btn-normal" @click="uploadSimData">LOAD SIMULATION DATA</button>
-                <!-- <button :class="{'hidden': !showAgentEditor}" form="login-form" class="btn-normal"
-                        @click="toAce">AGENT EDITOR</button> -->
+                 <button :class="{'hidden': !showAgentEditor}" form="login-form" class="btn-normal"
+                        @click="toAce">AGENT EDITOR</button>
+
                 <button :class="{'hidden': !showLiveMode}" form="login-form" class="btn-normal"
                         @click="toLiveDashboard">LIVE MODE</button>
                 <input id="simDataInputFile" ref="simDataInputFile" type="file"
@@ -59,7 +60,7 @@ export default {
     },
     data() {
         return {
-            // showAgentEditor: false,
+            showAgentEditor: false,
             showLiveMode: false,
         }
     },
@@ -76,9 +77,9 @@ export default {
             this.$router.push('configuration')
         },
         // Send the user to the ACE Configuration Editor
-        // toAce() {
-        //     this.$router.push('ace')
-        // },
+        toAce() {
+            this.$router.push('ace')
+        },
         /** Routes the user to the live Dashboard. The minimum configuration required for any
          *  Dashboard instance to open without error is the min_step_num and a duration object
          *  composed of an 'amount' key-value pairing. Both of these values can be 0, but the
@@ -136,10 +137,10 @@ export default {
         },
         // Adapted from '../views/DashboardView.vue'
         keyListener(e) {
-            // if (e.ctrlKey && e.key === 'a') {
-            //     e.preventDefault()  // prevent event from propagating to browser
-            //     this.showAgentEditor = true
-            // }
+            if (e.ctrlKey && e.key === 'a') {
+                e.preventDefault()  // prevent event from propagating to browser
+                this.showAgentEditor = true
+            }
             if (e.ctrlKey && e.key === 'k') {
                 e.preventDefault()  // prevent event from propagating to browser
                 this.surveyWasPrompted = true  // do not prompt with survey in kiosk mode

src/router.js

@@ -26,13 +26,11 @@ export default createRouter({
                 },
             ],
         },
-        /*
         {
             path: '/ace',
-            name: 'ace',
-            conponent: () => import('@/views/AceView.vue'),
+            name: 'ACE',
+            component: () => import('@/components/ace/ACE.vue'),
         },
-        */
         {
             path: '/configuration',
             name: 'configuration',