From 988d4b24b459715d4a6bb6d13699e8f933bbada2 Mon Sep 17 00:00:00 2001 From: Anton Vakhrushev Date: Sat, 9 Nov 2019 19:15:58 +0300 Subject: [PATCH] Worked web app --- Makefile | 9 ++ assets/App.vue | 75 ++++++++------ assets/assets/logo.png | Bin 6849 -> 0 bytes assets/components/HelloWorld.vue | 130 ----------------------- assets/helpers.js | 37 +++++++ assets/main.js | 10 +- assets/store/index.js | 11 -- assets/views/About.vue | 5 - assets/views/Home.vue | 18 ---- src/dayoff.cr | 6 +- src/dayoff/entities.cr | 19 ++++ webpack.config.js | 171 +++++++++++++++---------------- 12 files changed, 197 insertions(+), 294 deletions(-) delete mode 100644 assets/assets/logo.png delete mode 100644 assets/components/HelloWorld.vue create mode 100644 assets/helpers.js delete mode 100644 assets/store/index.js delete mode 100644 assets/views/About.vue delete mode 100644 assets/views/Home.vue diff --git a/Makefile b/Makefile index 12f1ac0..b9c837f 100644 --- a/Makefile +++ b/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) diff --git a/assets/App.vue b/assets/App.vue index 4661c5e..04d21e4 100644 --- a/assets/App.vue +++ b/assets/App.vue @@ -1,42 +1,56 @@ - - - diff --git a/assets/helpers.js b/assets/helpers.js new file mode 100644 index 0000000..5df1f0b --- /dev/null +++ b/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 }; diff --git a/assets/main.js b/assets/main.js index e8ac392..c3f9ce3 100644 --- a/assets/main.js +++ b/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'); diff --git a/assets/store/index.js b/assets/store/index.js deleted file mode 100644 index fb6015f..0000000 --- a/assets/store/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Vue from "vue"; -import Vuex from "vuex"; - -Vue.use(Vuex); - -export default new Vuex.Store({ - state: {}, - mutations: {}, - actions: {}, - modules: {} -}); diff --git a/assets/views/About.vue b/assets/views/About.vue deleted file mode 100644 index 3fa2807..0000000 --- a/assets/views/About.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/assets/views/Home.vue b/assets/views/Home.vue deleted file mode 100644 index 1ca198d..0000000 --- a/assets/views/Home.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/src/dayoff.cr b/src/dayoff.cr index ccac8d5..3b77596 100644 --- a/src/dayoff.cr +++ b/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 diff --git a/src/dayoff/entities.cr b/src/dayoff/entities.cr index a08d78d..5d56904 100644 --- a/src/dayoff/entities.cr +++ b/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 diff --git a/webpack.config.js b/webpack.config.js index 75e8929..1ab7633 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,100 +4,95 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = (env = {}) => { - const is_prod = !!env.production; + const is_prod = !!env.production; - const STYLE_LOADER = { loader: 'style-loader' }; + const STYLE_LOADER = { loader: 'style-loader' }; - const CSS_LOADER = { - loader: 'css-loader', - options: { - importLoaders: true, - }, - }; + const CSS_LOADER = { + loader: 'css-loader', + options: { + importLoaders: true, + }, + }; - const POSTCSS_LOADER = { - loader: 'postcss-loader', - options: { - plugins: [autoprefixer()], - }, - }; + const POSTCSS_LOADER = { + loader: 'postcss-loader', + options: { + plugins: [autoprefixer()], + }, + }; - const SCSS_LOADER = { loader: 'sass-loader' }; + const SCSS_LOADER = { loader: 'sass-loader' }; - const MINI_CSS_LOADER = MiniCssExtractPlugin.loader; + const MINI_CSS_LOADER = MiniCssExtractPlugin.loader; - const BABEL_LOADER = { - loader: 'babel-loader', - options: { - presets: ['@babel/preset-env'], - plugins: [ - '@babel/plugin-transform-runtime', - '@babel/plugin-proposal-class-properties', - ], - }, - }; + const BABEL_LOADER = { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env'], + plugins: [ + '@babel/plugin-transform-runtime', + '@babel/plugin-proposal-class-properties', + ], + }, + }; - const VUE_LOADER = { - loader: 'vue-loader', - options: { - loaders: { - css: [ - MINI_CSS_LOADER, //'vue-style-loader', - CSS_LOADER, - POSTCSS_LOADER, - ], - scss: [ - MINI_CSS_LOADER, //'vue-style-loader', - CSS_LOADER, - POSTCSS_LOADER, - SCSS_LOADER, - ], - }, - }, - }; - - return { - mode: is_prod ? 'production' : 'development', - entry: './assets/main.js', - output: { - filename: '[name].js', - path: path.resolve(__dirname, './public/assets/'), - publicPath: '/assets/' - }, - module: { - rules: [ - { - test: /\.js$/, - exclude: /node_modules/, - use: [BABEL_LOADER], - }, - { - test: /\.css$/, - use: [MINI_CSS_LOADER, CSS_LOADER, POSTCSS_LOADER], - }, - { - test: /\.scss$/, - use: [ - MINI_CSS_LOADER, - CSS_LOADER, - POSTCSS_LOADER, - SCSS_LOADER, - ], - }, - { - test: /\.vue$/, - use: [VUE_LOADER], - }, - ], - }, - plugins: [ - new VueLoaderPlugin(), - new MiniCssExtractPlugin({ - // Options similar to the same options in webpackOptions.output - // both options are optional - filename: '[name].css', - // chunkFilename: "[id].css" - }), + const VUE_LOADER = { + loader: 'vue-loader', + options: { + loaders: { + css: [ + MINI_CSS_LOADER, //'vue-style-loader', + CSS_LOADER, + POSTCSS_LOADER, ], - }; + scss: [ + MINI_CSS_LOADER, //'vue-style-loader', + CSS_LOADER, + POSTCSS_LOADER, + SCSS_LOADER, + ], + }, + }, + }; + + return { + mode: is_prod ? 'production' : 'development', + entry: './assets/main.js', + output: { + filename: '[name].js', + path: path.resolve(__dirname, './public/assets/'), + publicPath: '/assets/', + }, + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + use: [BABEL_LOADER], + }, + { + test: /\.css$/, + use: [MINI_CSS_LOADER, CSS_LOADER, POSTCSS_LOADER], + }, + { + test: /\.scss$/, + use: [MINI_CSS_LOADER, CSS_LOADER, POSTCSS_LOADER, SCSS_LOADER], + }, + { + test: /\.vue$/, + use: [VUE_LOADER], + }, + ], + }, + plugins: [ + new VueLoaderPlugin(), + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: '[name].css', + // chunkFilename: "[id].css" + }), + ], + }; };