Worked web app

Makefile

@@ -22,6 +22,15 @@ build:
 format:
 	crystal tool format ./src ./spec
 
+build-assets:
+	rm -rf ./public/assets
+	nodejs npm run-script build
+
+format-assets:
+	nodejs npm run-script format-webpack || true
+	nodejs npm run-script format-js || true
+	nodejs npm run-script format-vue || true
+
 .PHONY: run
 run: format
 	crystal run $(ENTRY_POINT)

assets/App.vue

@@ -1,42 +1,56 @@
 <template>
   <div id="app">
+    <section class="timer" v-bind:class="{ overtime: isOvertime }">
+      {{ time }}
+    </section>
+    <section class="actions">
       <a v-if="started" v-on:click.prevent="finish" href="#">Закончить</a>
       <a v-else v-on:click.prevent="start" href="#">Начать</a>
+    </section>
+    <p class="profile-info">Профиль: {{ profileId }}</p>
   </div>
 </template>
 
 <script>
-import qs from 'qs';
+import h from './helpers';
 export default {
   data() {
     return {
+      profileId: null,
       started: false,
+      status: '',
+      hours: 0,
+      minutes: 0,
     };
   },
   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);
-    });
+    this.profileId = h.extract_profile_id();
+    this.get_status();
+    setInterval(() => this.get_status(), 30 * 1000);
+  },
+  computed: {
+    time() {
+      const sign = this.isOvertime ? '+' : '';
+      return sign + this.hours + ':' + String(this.minutes).padStart(2, '0');
+    },
+    isOvertime() {
+      return this.status === 'overtime';
+    },
   },
   methods: {
+    get_status() {
+      h.get_status(this.profileId).then(data => {
+        this.started = data.started;
+        this.status = data.status;
+        this.hours = data.hours;
+        this.minutes = data.minutes;
+      });
+    },
     start() {
-      console.log('START');
-      this.started = true;
+      h.start(this.profileId).then(() => this.get_status());
     },
     finish() {
-      console.log('FINISH');
-      this.started = false;
+      h.finish(this.profileId).then(() => this.get_status());
     },
   },
 };
@@ -48,19 +62,18 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  margin-top: 3em;
 }
 
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
+.timer {
+  font-size: 600%;
 }
+
+.overtime {
+  color: green;
 }
+
+.actions {
+  font-size: 240%;
 }
 </style>

assets/components/HelloWorld.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

assets/helpers.js

@@ -0,0 +1,37 @@
+import qs from 'qs';
+
+const PROFILE_QUERY = 'profile';
+
+function extract_profile_id() {
+  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_QUERY] || '';
+  console.log('PROFILE', query, profile);
+  return profile;
+}
+
+async function check_profile(profileId) {}
+
+async function get_status(profileId) {
+  const response = await fetch('/api/status?profile_id=' + profileId, {
+    method: 'GET',
+  });
+  const data = await response.json();
+  console.log('DATA', data);
+  return data;
+}
+
+async function start(profileId) {
+  const response = await fetch('/api/start?profile_id=' + profileId, {
+    method: 'POST',
+  });
+}
+
+async function finish(profileId) {
+  const response = await fetch('/api/finish?profile_id=' + profileId, {
+    method: 'POST',
+  });
+}
+
+export default { extract_profile_id, check_profile, get_status, start, finish };

assets/main.js

@@ -1,12 +1,10 @@
-import Vue from "vue";
-import App from "./App.vue";
-// import router from "./router";
-// import store from "./store";
+import Vue from 'vue';
+import App from './App.vue';
 
 Vue.config.productionTip = false;
 
 new Vue({
   // router,
   // store,
-  render: h => h(App)
-}).$mount("#app");
+  render: h => h(App),
+}).$mount('#app');

assets/store/index.js

@@ -1,11 +0,0 @@
-import Vue from "vue";
-import Vuex from "vuex";
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {},
-  modules: {}
-});

assets/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

assets/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '../components/HelloWorld.vue';
-
-export default {
-  name: 'home',
-  components: {
-    HelloWorld,
-  },
-};
-</script>

src/dayoff.cr

@@ -27,11 +27,7 @@ end
 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,
-  }
+  data = Dayoff::StatusResponse.new(profile.started?, rem_span)
   env.response.content_type = "application/json"
   data.to_json
 end

src/dayoff/entities.cr

@@ -79,4 +79,23 @@ module Dayoff
       end
     end
   end
+
+  STATUS_UPTIME   = "uptime"
+  STATUS_OVERTIME = "overtime"
+
+  class StatusResponse
+    JSON.mapping(
+      started: Bool,
+      status: String,
+      hours: Int32,
+      minutes: Int32,
+    )
+
+    def initialize(@started : Bool, ts : Time::Span)
+      zero = Time::Span.zero
+      @status = ts < zero ? STATUS_OVERTIME : STATUS_UPTIME
+      @hours = ts.abs.total_hours.to_i32
+      @minutes = ts.abs.minutes.to_i32
+    end
+  end
 end

webpack.config.js

@@ -62,7 +62,7 @@ module.exports = (env = {}) => {
     output: {
       filename: '[name].js',
       path: path.resolve(__dirname, './public/assets/'),
-            publicPath: '/assets/'
+      publicPath: '/assets/',
     },
     module: {
       rules: [
@@ -77,12 +77,7 @@ module.exports = (env = {}) => {
         },
         {
           test: /\.scss$/,
-                    use: [
-                        MINI_CSS_LOADER,
-                        CSS_LOADER,
-                        POSTCSS_LOADER,
-                        SCSS_LOADER,
-                    ],
+          use: [MINI_CSS_LOADER, CSS_LOADER, POSTCSS_LOADER, SCSS_LOADER],
         },
         {
           test: /\.vue$/,