Add config vue (#267)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add Config Vue

frontend/src/App.vue

@@ -19,13 +19,39 @@ export default {
 }
 </script>
 
-<style>
+<style lang="stylus">
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
 }
+
+@import './style/variables';
++prefix-classes('visual-dl-page-')
+    .container
+        padding-right 250px
+        position relative
+        background $-left-background-color
+        .left
+            width 100%
+            overflow scroll
+            border solid 1px $-left-border-clor
+            background $-left-border-clor
+            min-height 300px
+            padding 2%
+            box-sizing border-box
+        .right
+            overflow scroll
+            width 250px
+            min-height 300px
+            position absolute
+            right 0
+            top 0
+            box-sizing border-box
+            .config-com
+                color $-right-font-color
+
 </style>
 

frontend/src/scalars/Scalars.vue

@@ -26,13 +26,9 @@
         </div>
         <div class="visual-dl-page-right">
             <div class="visual-dl-page-config-container">
-                <p>
-                    I should show all runs items and config
-                    {{ runsItems }}
-                </p>
-                <p>
-                    {{ config }}
-                </p>
+                <Config :runsItems="config.runs"
+                        :config="config"
+                ></Config>
             </div>
         </div>
     </div>
@@ -43,7 +39,12 @@ import {getPluginScalarsTags, getRuns} from '../service';
 import {debounce, flatten, uniq, isArray} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
+import Config from './ui/config'
+
 export default {
+    components: {
+        Config
+    },
     name: 'Scalars',
     data () {
         return {

frontend/src/scalars/ui/config.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="visual-dl-page-config-com">
+        <v-text-field
+                name="Group name RegExp"
+                label="Group name RegExp"
+                hint="input a tag group name"
+                id="testing"
+                v-model="config.groupNameReg"
+                dark
+        ></v-text-field>
+
+        <v-slider label="Smoothing" v-bind:max="100" v-bind:min="0" v-model="config.smoothing" dark></v-slider>
+        <v-text-field v-model="config.smoothing" type="number" dark></v-text-field>
+
+        <p>{{ config.horizontal || 'null' }}</p>
+        <v-radio-group v-model="config.horizontal" dark>
+            <v-radio label="Step" value="step"></v-radio>
+            <v-radio label="Relative" value="relative"></v-radio>
+            <v-radio label="Wall" value="wall"></v-radio>
+        </v-radio-group>
+
+        <v-select
+                v-bind:items="sortingMethodItems"
+                v-model="config.sortingMethod"
+                label="Tooltip sorting method"
+                single-line
+                bottom
+                dark
+        ></v-select>
+
+        <v-checkbox label="Show data download links" v-model="config.downloadLink" dark></v-checkbox>
+        <v-checkbox label="Ignore outliers in chart scaling" v-model="config.outlier" dark></v-checkbox>
+
+        <p>
+            RunItems{{ config.runs }}
+        </p>
+        <v-checkbox v-for="item in runsItems"
+                    :label="item"
+                    :value="item"
+                    v-model="config.runs"
+                    dark
+        ></v-checkbox>
+
+        <v-switch class="visual-dl-page-run-toggle"
+                  v-bind:label="`Running: ${config.running.toString()}`"
+                  v-model="config.running"
+                  dark></v-switch>
+    </div>
+</template>
+<script>
+import('vuetify/dist/vuetify.min.css')
+
+//import TextField from 'san-mui/TextField';
+
+// TODO: Consider create Vue Components for these
+
+//import Slider from '../../common/component/Slider';
+//import RadioGroup from '../../common/component/RadioGroup';
+//import DropDownMenu from '../../common/component/DropDownMenu';
+//import CheckBoxGroup from '../../common/component/CheckBoxGroup';
+//import Button from 'san-mui/Button';
+
+export default {
+    name: 'config',
+    props: ['runsItems', 'config'],
+    data() {
+        return {
+            config: {
+                groupNameReg: '.*',
+                smoothing: '0.6',
+                horizontal: 'step',
+                sortingMethod: 'default',
+                downloadLink: [],
+                outlier: [],
+                running: true,
+                runs: []
+            },
+            horizontalItems: [
+                {
+                    name: 'Step',
+                    value: 'step'
+                },
+                {
+                    name: 'Relative',
+                    value: 'relative'
+                },
+                {
+                    name: 'Wall',
+                    value: 'wall'
+                }
+            ],
+            sortingMethodItems: [
+                'default', 'descending', 'ascending', 'nearest'
+            ],
+            runsItems: [],
+        };
+    },
+    toggleAllRuns() {
+        let running = this.data.get('config.running');
+        this.data.set('config.running', !running);
+        this.fire('runningChange', running);
+    }
+};
+
+</script>
+<style lang="stylus">
+@import '../../style/variables';
+
++prefix-classes('visual-dl-page-')
+    .config-com
+        width 90%
+        margin 20px auto
+        .run-toggle
+            width 100%
+            margin-top 20px
+
+</style>
+
+

frontend/template/index.html

@@ -5,6 +5,7 @@
         <title>Visual DL</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+        <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
     </head>
     <body>
         <div id="root"></div>