Start of web app

assets/App.vue

@@ -1,16 +1,50 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
+    <a v-if="started" v-on:click.prevent="finish" href="#">Закончить</a>
+    <a v-else v-on:click.prevent="start" href="#">Начать</a>
   </div>
 </template>
 
+<script>
+import qs from 'qs';
+export default {
+  data() {
+    return {
+      started: false,
+    };
+  },
+  created() {
+    const haystack = window.location.search || window.location.hash;
+    const q = haystack.substring(haystack.indexOf('?') + 1, haystack.length);
+    const query = qs.parse(q);
+    const profile = query['profile'] || '';
+    console.log('PROFILE', query, profile);
+    const p = fetch('/api/status?profile_id=' + profile, {
+      method: 'GET',
+    });
+    p.then(response => {
+      return response.json();
+    }).then(data => {
+      this.started = data.started;
+      console.log('DATA', data);
+    });
+  },
+  methods: {
+    start() {
+      console.log('START');
+      this.started = true;
+    },
+    finish() {
+      console.log('FINISH');
+      this.started = false;
+    },
+  },
+};
+</script>
+
 <style lang="scss">
 #app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

assets/components/HelloWorld.vue

@@ -104,10 +104,10 @@
 
 <script>
 export default {
-  name: "HelloWorld",
+  name: 'HelloWorld',
   props: {
-    msg: String
-  }
+    msg: String,
+  },
 };
 </script>
 

assets/views/Home.vue

@@ -7,12 +7,12 @@
 
 <script>
 // @ is an alias to /src
-import HelloWorld from "../components/HelloWorld.vue";
+import HelloWorld from '../components/HelloWorld.vue';
 
 export default {
-  name: "home",
+  name: 'home',
   components: {
-    HelloWorld
-  }
+    HelloWorld,
+  },
 };
 </script>