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>

package-lock.json

@@ -5359,9 +5359,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.0.tgz",
+      "integrity": "sha512-27RP4UotQORTpmNQDX8BHPukOnBP3p1uUJY5UnDhaJB+rMt9iMsok724XL+UHU23bEFOHRMQ2ZhI99qOWUMGFA==",
       "dev": true
     },
     "query-string": {
@@ -5657,6 +5657,14 @@
         "tough-cookie": "~2.4.3",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "dev": true
+        }
       }
     },
     "require-directory": {

package.json

@@ -18,6 +18,7 @@
     "node-sass": "^4.13.0",
     "postcss-loader": "^3.0.0",
     "prettier": "^1.18.2",
+    "qs": "^6.9.0",
     "sass-loader": "^7.3.1",
     "style-loader": "^0.23.1",
     "underscore": "^1.9.1",
@@ -32,9 +33,9 @@
     "build": "webpack --config webpack.config.js --progress",
     "build-prod": "webpack --config webpack.config.js --env.production",
     "format-webpack": "prettier --single-quote --trailing-comma es5 --write \"./webpack.config.js\"",
-    "format-js": "prettier --single-quote --trailing-comma es5 --write \"./source/_assets/**/*.js\"",
-    "format-vue": "prettier --single-quote --trailing-comma es5 --write \"./source/_assets/**/*.vue\"",
-    "format-style": "prettier --single-quote --write \"source/_assets/**/*.scss\"",
+    "format-js": "prettier --single-quote --trailing-comma es5 --write \"./assets/**/*.js\"",
+    "format-vue": "prettier --single-quote --trailing-comma es5 --write \"./assets/**/*.vue\"",
+    "format-style": "prettier --single-quote --write \"assets/**/*.scss\"",
     "format-md": "prettier --print-width=80 --parser=markdown --write \"source/**/*.md\""
   },
   "dependencies": {},

src/dayoff.cr

@@ -24,10 +24,11 @@ post "/api/finish" do |env|
   env.response.status_code = 204
 end
 
-get "/api/remaining-time" do |env|
+get "/api/status" do |env|
   profile = app.profile Dayoff::ProfileId.new(env.get("profile_id").to_s)
   rem_span = profile.remaining_time now
   data = {
+    started: profile.started?,
     hours:   rem_span.total_hours.to_i32,
     minutes: rem_span.minutes.to_i32,
   }
@@ -35,4 +36,8 @@ get "/api/remaining-time" do |env|
   data.to_json
 end
 
+get "/" do
+  render "public/index.ecr"
+end
+
 Kemal.run

src/dayoff/profile.cr

@@ -34,8 +34,12 @@ module Dayoff
       end
     end
 
+    def started? : Bool
+      !started_point.nil?
+    end
+
     def start(time : Time) : Nil
-      if started_point
+      if started?
         raise AlreadyStarted.new
       end
       @wrecords.each do |wr|