some more frontend updates

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "python.pythonPath": "/Users/lukemarshall/.local/share/virtualenvs/market-control-room-a6D0yJNx/bin/python"
+}

app/api/resources.py

@@ -4,7 +4,7 @@
 """
 
 from datetime import datetime
-from flask import request
+from flask import request, jsonify
 from flask_restplus import Resource
 
 from .security import require_auth
@@ -28,6 +28,29 @@ def post(self, resource_id):
         json_payload = request.json
         return {'timestamp': json_payload}, 201
 
+@api_rest.route('/simdata/<string:resource_id>')
+class SimData(Resource):
+    """ Unsecure Resource Class: Inherit from Resource """
+
+    def get(self, resource_id):
+
+        data = {
+            'hyperparameters':{
+                'epsilon':1,
+                'gamma':10,
+                'beta':5,
+                'alpha':7,
+                'omega':2.5677778777,
+            }
+        }
+
+        return jsonify(data)
+
+    def post(self, resource_id):
+        json_payload = request.json
+        return {'timestamp': json_payload}, 201
+
+
 
 @api_rest.route('/secure-resource/<string:resource_id>')
 class SecureResourceOne(SecureResource):

run.py

@@ -1,7 +1,7 @@
 import os
 from app import app
 
-app.run(port=5000)
+app.run(port=5000, debug=True)
 
 # To Run:
 # python run.py

src/App.vue

@@ -2,15 +2,14 @@
 
   <div id="app">
     <div class="top">
-      <div class="title"> Deep Learning Logbook</div>
+      <a href="/"><div class="title nes-text is-primary"> Deep Learning Logbook</div></a>
       <div class="ceem"> UNSW CEEM <i class="nes-icon github is-small"></i></div>
     </div>
 
     <div class="main">
       <div class="nav">
-        <router-link to="/">Home</router-link>
-        <router-link to="/api">API Sample</router-link>
-        <router-link :to="{ name: 'summary', params: { id: '123' } }" >Summary</router-link>
+        <!-- <router-link to="/">Home</router-link>
+        <router-link to="/api">API Sample</router-link> -->
         <sim-search v-bind:simulations="simulations"/>
       </div>
       <div class="content">
@@ -73,8 +72,13 @@ $nes-black: #212529;
   align-items: center;
   height: 5vh;
 
+  a:hover{
+    text-decoration: none;
+  }
+
   .title{
     margin: 0 1vw 0 1vw;
+    
   }
 
   .ceem{

src/backend.js

@@ -33,7 +33,7 @@ export default {
       .then(response => response.data)
   },
 
-  fetchSimData (id) {
+  fetchSimulation (id) {
     return $axios.get(`simdata/`+id)
       .then(response => response.data)
   }

src/components/Hyperparameters.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nes-container is-dark">
+  <div class="nes-container is-dark with-title">
     <h1>HI helo</h1>
   </div>
 </template>

src/components/SimSearch.vue

@@ -24,7 +24,7 @@ export default {
   margin-top:3vh;
 
   .simlist{
-    height:80vh;
+    height:85vh;
     overflow:scroll;
     width:100%;
     .simlink{

src/views/Home.vue

@@ -1,6 +1,15 @@
 <template>
   <div class="home">
-  <hyperparameters />
+
+  <h1 class="nes-text is-primary" >Deep Learning Logbook</h1>
+
+  <p>This logbook tracks deep learning simulations of electricity markets. It is designed to provide insights into participant bidding behaviour. </p>
+
+  <p>It is the user interface for the openai gym electricity market simulator, developed by Luke Marshall at the UNSW Center for Energy and Environmental Markets.</p>
+
+  <p>You can find the deep learning simulation code at the project github <a href="https://github.com/luke-marshall/energy-market-deep-learning">here.</a></p>
+  <p>The source code for this logbook dashboard tool can be found  <a href="https://github.com/luke-marshall/market-control-room">here.</a></p>
+
   </div>
 </template>
 

src/views/Summary.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="summary">
-    <h1>Summary:{{id}}</h1>
+    <div v-if="simulation">
+      <h1>Summary:{{id}}</h1>
+      {{simulation}}
+      <hyperparameters />
+    </div>
 
-    {{simulation}}
-    <hyperparameters />
+    <div v-else class="loading">
+      <h1>LOADING...</h1>
+    </div>
+
   </div>
 </template>
 
@@ -26,17 +32,35 @@ export default {
   components: {
     Hyperparameters
   },
+  methods:{
+    refresh(){
+      this.simulation = null;
+      $backend.fetchSimulation(this.id)
+      .then(responseData => {
+        this.simulation = responseData;
+      }).catch(error => {
+        console.log(error.message)
+      })
+    }
+  },
+  watch:{
+    id(){
+      this.refresh();
+    }
+  },
   mounted(){
-    $backend.fetchResource()
-    .then(responseData => {
-      this.resources.push(responseData)
-    }).catch(error => {
-      this.error = error.message
-    })
+    this.refresh();
   }
 }
 </script>
 
 <style lang="scss">
-
+.loading{
+  height:90vh;
+  width:100%;
+  display:flex;
+  flex-direction:column;
+  justify-content: center;
+  align-items: center;
+}
 </style>