Test migration to vue

app/App.vue

@@ -0,0 +1,29 @@
+<template>
+  <div id="app">
+    <control-bar :devices='devices'></control-bar>
+    <sidebar :files='files'></sidebar>
+    <editor></editor>
+  </div>
+</template>
+
+<script>
+  import Sidebar from './components/Sidebar.vue'
+  import ControlBar from './components/ControlBar.vue'
+  import Editor from './components/Editor.vue'
+
+  export default {
+  components: {
+    Sidebar,
+    ControlBar,
+    Editor
+  },
+  data (){
+    return {
+      files: [{name:"test.py",path:"test.py"},{name:"test2.img"}],
+      devices: [{name:"TestBot"}]
+    }
+  }
+
+}
+
+</script>

app/components/ControlBar.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="top" id="top-menu">
+      <button type="button" class="run-button" name="start" v-on:click="start"></button>
+      <button type="button" class="upload-button" name="upload" disabled></button>
+      <select v-model="selectedDevice" id="device-list" name="device-list">
+        <option value="simulate" selected>Simulator</option>
+        <option v-for='device in devices' value="{{device.target}}">{{device.name}}</option>
+      </select>
+    </div>
+</template>
+
+<script>
+  import TbTool from '../utils/tbtool.js'
+  export default {
+    props: ['devices'],
+    data () {
+      return{
+        selectedDevice: "simulate"
+      }
+    },
+    methods: {
+      start: function(){
+
+        TbTool.start(this.selectedDevice,"./default.tingapp");
+      }
+    },
+    // watch: {
+    //   selectedDevice: function(currentValue) {
+    //     this.selectedTarget = currentValue;
+    //   }
+    // }
+  }
+</script>

app/components/Editor.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="main" id="editor">some text</div>
+</template>
+
+<script>
+  import ace from 'brace'
+  import 'brace/mode/python'
+  import 'brace/theme/monokai';
+
+  export default {
+    ready: function () {
+      // Setup our editor
+     var editor = ace.edit("editor");
+     editor.setTheme("ace/theme/monokai");
+     editor.getSession().setMode("ace/mode/python");
+
+     editor.setShowPrintMargin(false);
+
+     editor.$blockScrolling = Infinity;
+   }
+ }
+
+
+</script>

app/components/Sidebar.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="left" id="sidebar">
+  <ul class="filetree" id="filetree">
+    <li v-for="file in files" v-on:click="fileclicked" class='treefile' data-path="{{file.path}}">{{file.name}}</li>
+  </ul>
+</div>
+</template>
+
+<script>
+export default {
+  props: ['files'],
+  methods: {
+    fileclicked: function(event){
+      alert(event.target.getAttribute('data-path'))
+    }
+  }
+}
+</script>

app/main.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: 'body',
+  components: { App }
+})