basic nonfunctional ace

src/components/ace/AgentEditor.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="agent-editor">
+        {{activeAgent}}
+        <!-- Render agentData nicely -->
+    </div>
+</template>
+
+<script>
+import {useAceStore} from '../../store/modules/AceStore'
+
+export default {
+    props: {
+        activeAgent: {
+            type: String,
+            default: null,
+        },
+    },
+    setup() {
+        const ace = useAceStore()
+        const {getAgentData} = ace
+        return {getAgentData}
+    },
+    data() {
+        return {
+            agentData: null,
+        }
+    },
+    watch: {
+        activeAgent(val) {
+            if (val) {
+                this.agentData = this.getAgentData(val)
+            } else {
+                this.agentData = null
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.agent-editor {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: #f5f5f5;
+}
+</style>

src/components/ace/AgentSelector.vue

@@ -0,0 +1,50 @@
+<!-- Base menu component -->
+
+<template>
+    <div v-for="agentClass in agentClasses" :key="agentClass">
+        <div>{{agentClass}}</div>
+        <div v-for="agent in getAgentsInClass(agentClass)" :key="agent">
+            <div>{{agent}}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {useAceStore} from '../../store/modules/AceStore'
+
+export default {
+    props: {
+        activeAgent: {
+            type: String,
+            default: null,
+        },
+        setActiveAgent: {
+            type: Function,
+            default: null,
+        },
+    },
+    setup() {
+        const ace = useAceStore()
+        const {getAgentClasses, getAgentsInClass} = ace
+        return {getAgentClasses, getAgentsInClass}
+    },
+    data() {
+        return {
+            agentClasses: null,
+        }
+    },
+    created() {
+        this.agentClasses = this.getAgentClasses()
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.agent-selector {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: #f5f5f5;
+}
+</style>

src/components/ace/index.js

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

src/components/entry/Menu.vue

@@ -11,6 +11,7 @@
                 <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 form="login-form" class="btn-normal" @click="toAce">AGENT EDITOR</button>
                 <button class="btn-normal" @click="showSurvey">LEAVE FEEDBACK</button>
                 <!-- <button :class="{'hidden': !showAgentEditor}" form="login-form" class="btn-normal"
                         @click="toAce">AGENT EDITOR</button> -->
@@ -93,6 +94,9 @@ export default {
          *  this Menu, but in live mode that menu is bypassed and they must be manually set here
          *  before the Dashboard components can be rendered.
          */
+        toAce() {
+            this.$router.push('ace')
+        },
         toLiveDashboard() {
             // duplicated in Login.vue
             this.currentMode = 'live'  // set 'live' mode

src/router.js

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

src/store/modules/AceStore.js

@@ -0,0 +1,42 @@
+import {defineStore} from 'pinia'
+import axios from 'axios'
+
+export const useAceStore = defineStore('AceStore', {
+    state: () => ({
+        defaultAgentDesc: {},
+        userAgentDesc: {},
+    }),
+    actions: {
+        loadDefaultAgentDesc() {
+            axios.get('/get_agent_desc').then(response => {
+                this.defaultAgentDesc = response.data
+            })
+        },
+        getAgentClasses() {
+            // Return combined keys of defaultAgentDesc and userAgentDesc
+            const defaultClasses = Object.keys(this.defaultAgentDesc)
+            const userClasses = Object.keys(this.userAgentDesc)
+            return defaultClasses.concat(userClasses)
+        },
+        getAgentsInClass(agentClass) {
+            // Return combined keys of defaultAgentDesc and userAgentDesc
+            let agents = []
+            if (this.defaultAgentDesc[agentClass]) {
+                agents = agents.concat(this.defaultAgentDesc[agentClass])
+            }
+            if (this.userAgentDesc[agentClass]) {
+                agents = agents.concat(this.userAgentDesc[agentClass])
+            }
+            return agents
+        },
+        getAgentData(agentName) {
+            if (this.defaultAgentDesc[agentName]) {
+                return this.defaultAgentDesc[agentName]
+            } else if (this.userAgentDesc[agentName]) {
+                return this.userAgentDesc[agentName]
+            } else {
+                return null
+            }
+        },
+    },
+})

src/views/AceView.vue

@@ -0,0 +1,53 @@
+<!-- Container for all entry related components -->
+
+<template>
+    <div>
+        <TheTopBar />
+        <div class="ace-view-container">
+            <AgentSelector :active-agent="activeAgent" :set-active-agent="setActiveAgent" />
+            <AgentEditor />
+        </div>
+    </div>
+</template>
+
+<script>
+import {storeToRefs} from 'pinia'
+import {useAceStore} from '../store/modules/AceStore'
+import {TheTopBar} from '../components/bars'
+import {AgentSelector, AgentEditor} from '../components/ace'
+
+export default {
+    components: {TheTopBar, AgentSelector, AgentEditor},
+    setup() {
+        const ace = useAceStore()
+        const {loadDefaultAgentDesc, getAgentClasses, getAgentsInClass, getAgentData} = ace
+        loadDefaultAgentDesc()
+        const {agent_desc} = storeToRefs(ace)
+        return {
+            agent_desc, getAgentClasses, getAgentsInClass, getAgentData,
+        }
+    },
+    data() {
+        return {
+            activeAgent: null,
+        }
+    },
+    methods: {
+        setActiveAgent(agentName) {
+            this.activeAgent = agentName
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.ace-view-container {
+    width: 100vw;
+    height: 100vh;
+    min-width: 100vw;
+    min-height: 100vh;
+    overflow:hidden;
+    position:relative;
+    background: transparent;
+}
+</style>