Version 0.3.0

Merge branch 'dev'

Author: Djuuu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ticket-calc",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Simple ticket calculator",
   "author": "Julien Tardot <[email protected]>",
   "license": "MIT",
@@ -16,6 +16,7 @@
     "register-service-worker": "^1.6.2",
     "tailwindcss": "^1.0.0-beta.4",
     "vue": "^2.6.6",
+    "vue-js-toggle-button": "^1.3.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

src/assets/css/app.css

@@ -14,13 +14,10 @@ hr {
     @apply py-1 px-6 rounded-full font-semibold uppercase;
 }
 .btn-square {
-    @apply inline-block p-0 w-8 h-8 rounded font-bold text-3xl;
-    line-height: 0.8;
-    padding-bottom: 0.4rem;
+    @apply inline-block p-0 w-8 h-8 rounded font-bold text-3xl leading-none;
 }
 .btn-round {
-    @apply inline-block p-0 w-8 h-8 rounded-full font-bold text-xl;
-    line-height: 1;
+    @apply inline-block p-0 w-8 h-8 rounded-full font-bold text-xl leading-none;
     padding-bottom: 0.4rem;
 }
 

src/components/AutoToggleButton.vue

@@ -0,0 +1,27 @@
+<template>
+
+    <toggle-button :value="value" @input="$emit('input', $event)" :sync="true"
+                   :labels="{checked: 'AUTO', unchecked: 'MANUAL'}"
+                   :width="115" :height="30" :margin="3"
+                   :css-colors="true"/>
+
+</template>
+
+<script>
+    export default {
+        name: 'AutoToggleButton',
+        props: {
+            value: {type: Boolean, default: false},
+        }
+    }
+</script>
+
+<style>
+
+    .vue-js-switch         .v-switch-core  { @apply bg-grayBlue; }
+    .vue-js-switch.toggled .v-switch-core  { @apply bg-primary; }
+    .vue-js-switch .v-switch-label         { @apply text-base; }
+    .vue-js-switch .v-switch-label.v-left  { @apply ml-5; }
+    .vue-js-switch .v-switch-label.v-right { @apply mr-1; }
+
+</style>

src/components/SolutionButtons.vue

@@ -1,23 +1,22 @@
 <template>
-    <div>
+    <div class="f-row flex-wrap justify-around">
 
-        <button class="solution-btn solution-btn-exact"
+        <button class="solution-btn solution-btn-exact tracking-tighter"
                 v-for="(solution, index) in solutions['exact'].solutions" :key="'exact-' + index"
                 @click="$emit('select', solution)">
-            ==
+            ===
         </button>
 
-        <button class="solution-btn solution-btn-over"
+        <button class="solution-btn solution-btn-over tracking-tight"
                 v-for="(solution, index) in solutions['over'].solutions" :key="'over-' + index"
                 @click="$emit('select', solution)">
             &gt; {{ solutions['over'].diff | fixed2 }}
         </button>
 
-        <button class="solution-btn solution-btn-under"
+        <button class="solution-btn solution-btn-under tracking-tight"
                 v-for="(solution, index) in solutions['under'].solutions" :key="'under-' + index"
                 @click="$emit('select', solution)">
-            &lt;
-            {{ solutions['under'].diff | fixed2 }}
+            &lt; {{ solutions['under'].diff | fixed2 }}
         </button>
 
     </div>
@@ -37,9 +36,7 @@
 
 <style>
     .solution-btn {
-        @apply py-1 px-3 rounded-full text-white font-bold;
-        margin: .125rem;
-        margin-top: 0;
+        @apply py-1 px-3 mb-1 text-lg rounded-full text-white font-bold;
     }
     .solution-btn:focus {
         @apply outline-none;

src/main.js

@@ -1,15 +1,19 @@
-import Vue from 'vue';
+import Vue            from 'vue';
+import {ToggleButton} from 'vue-js-toggle-button'
 
 import '@/assets/css/tailwind.css';
 import '@/assets/css/app.css';
+import '@/registerServiceWorker';
 
 import App    from '@/App.vue';
-import '@/registerServiceWorker';
 import router from '@/router';
 import store  from '@/store';
 
 Vue.config.productionTip = false;
 
+// Third-party components
+Vue.component('ToggleButton', ToggleButton);
+
 // Custom filters
 Vue.filter('abs', value => Math.abs(value));
 Vue.filter('fixed2', value => Number.parseFloat(value).toFixed(2));

src/views/Calc.vue

@@ -1,25 +1,20 @@
 <template>
     <div class="container f-col p-3">
 
-        <div class="flex my-3">
-            <label class="col-start">Target</label>
-            <div class="col-end">
-                <input type="number" min="0" step="0.01" autofocus
-                       v-model.number.lazy="target" @change="targetChanged()"/>
-            </div>
+        <div class="f-row items-center justify-between mb-5">
+            <label for="target" class="inline-block">
+                Target
+            </label>
+            <input type="number" id="target" min="0" step="0.01" autofocus
+                   class="inline-block w-1/3"
+                   v-model.number.lazy="target" @change="targetChanged($event)"/>
+            <auto-toggle-button v-model="auto"></auto-toggle-button>
         </div>
 
-        <div class="flex">
-            <div class="col-start-full">
-                <solution-buttons v-if="solutions && mode === 'auto'"
-                                  :solutions="solutions"
-                                  @select="selectSolution"/>
-            </div>
-
-            <span class="col-end pb-1">
-                <button class="btn btn-primary" type="button" v-if="mode === 'manual'" @click="mode = 'auto'">Auto</button>
-                <button class="btn btn-primary" type="button" v-if="mode === 'auto'" @click="mode = 'manual'">Manual</button>
-            </span>
+        <div class="solution-buttons-container px-5">
+            <solution-buttons v-if="solutions && auto"
+                              :solutions="solutions"
+                              @select="selectSolution"/>
         </div>
 
         <hr>
@@ -40,13 +35,13 @@
         <hr>
 
         <div class="f-col">
-            <div class="f-row my-2">
+            <div class="f-row mt-2">
                 <span class="col-start">Ticket total</span>
                 <div class="col-end-value">
                     <span class="input-value result-value">{{ ticketTotal | fixed2 }}</span>
                 </div>
             </div>
-            <div class="f-row my-2" :class="{'invisible': !target}">
+            <div class="f-row mt-2" :class="{'invisible': !target}">
                 <span class="col-start">
                     {{ balanceLabel }}
                 </span>
@@ -58,7 +53,7 @@
             </div>
         </div>
 
-        <div class="flex justify-end mt-4">
+        <div class="flex justify-end mt-4 text-base">
             <div class="col-end">
                 <button class="btn btn-primary" type="button"
                         @click="reset()"
@@ -75,6 +70,7 @@
     import {cloneDeep, map, round, sumBy} from 'lodash';
     import {mapGetters}                   from 'vuex'
 
+    import AutoToggleButton  from '@/components/AutoToggleButton';
     import SolutionButtons   from "@/components/SolutionButtons";
     import TicketQuantityRow from "@/components/TicketQuantityRow";
     import TicketQuantity    from '@/models/ticket-quantity';
@@ -83,6 +79,7 @@
     export default {
         name:  'Calc',
         components: {
+            AutoToggleButton,
             SolutionButtons,
             TicketQuantityRow,
         },
@@ -92,9 +89,9 @@
         data() {
             return {
                 target:           null,
-                mode:             'auto',
                 ticketQuantities: [],
                 solutions:        null,
+                auto:             true,
             };
         },
         created() {
@@ -105,7 +102,7 @@
                 'tickets'
             ]),
             calcButtonsDisabled() {
-                return this.mode === 'auto';
+                return this.auto;
             },
             ticketTotal() {
                 return round(
@@ -133,20 +130,23 @@
             }
         },
         methods: {
-            targetChanged() {
+            targetChanged(event) {
 
                 if (this.tickets.length === 0) { return; }
 
                 this.solutions = new Calculator(this.tickets)
                     .optimizeCalc(this.target);
+
+                // Force blur to hide keyboard
+                event.target.blur();
             },
             selectSolution(solution) {
                 this.ticketQuantities = cloneDeep(solution.ticketQuantities);
             },
             reset() {
                 this.target = null;
                 this.ticketQuantities.forEach(tq => tq.quantity = 0);
-                this.mode = 'auto';
+                this.auto = true;
                 this.solutions = null;
             }
         },
@@ -158,25 +158,26 @@
     .col-start {
         @apply flex-grow pl-2;
     }
-    .col-start-full {
-        @apply flex-grow;
-        max-width: calc(100% - 10rem);
-    }
     .col-end {
         @apply inline-block text-center;
-        width: 10rem;
+        width: 8rem;
     }
     .col-end-value {
-        @apply text-right pr-8;
+        @apply text-right pr-6;
     }
 
     hr {
         width: 104%;
         margin-left: -2%;
     }
 
+    .solution-buttons-container {
+        min-height: 2.5rem; /*min-h-10*/
+    }
+
     .result-value {
-        @apply bg-gray-300 py-1 px-3 rounded-lg;
+        @apply inline-block bg-gray-300 py-1 px-3 rounded-lg align-bottom leading-tight;
+        min-width: 4.5rem;
     }
     .has-remaining      { @apply text-positive; }
     .has-extra          { @apply text-negative; }

tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
 
             primary:    '#e3001b',
             secondary:  '#0f204b',
+            grayBlue:   '#6a7b9c',
             danger:     '#f53d3d',
             light:      '#f2f2f2',
             dark:       '#222',

yarn.lock

@@ -9781,6 +9781,11 @@ vue-jest@^3.0.3:
     tsconfig "^7.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-js-toggle-button@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/vue-js-toggle-button/-/vue-js-toggle-button-1.3.2.tgz#d2e538465c321967144d035824cb71eedd82984e"
+  integrity sha512-LS+pvX5lXEhX+Gei5MOAEw7bx99/A+9idFhMtBgz72ApsEHlW69Y7bk+ZKC1rLRUxchL5WlQ+MhJXqXewhkfjg==
+
 vue-loader@^15.6.4:
   version "15.7.0"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.7.0.tgz#27275aa5a3ef4958c5379c006dd1436ad04b25b3"