Add time selector

yam-finance · Jul 22, 2020 · 0373e9c · 0373e9c
1 parent af66152
commit 0373e9c
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 47 deletions.
diff --git a/src/components/Modal/Account.vue b/src/components/Modal/Account.vue
@@ -2,21 +2,23 @@
   <UiModal :open="open" @close="$emit('close')">
     <div v-if="!web3.account || step === 'connect'">
       <h3 class="m-4 mb-0 text-center">Connect wallet</h3>
-      <div class="m-4 border rounded-2">
+      <div class="m-4 mb-5">
         <a
           v-for="(connector, id, i) in connectors"
           :key="i"
-          class="d-flex flex-items-center px-3 py-2"
-          :class="i !== 0 && 'border-top'"
           @click="$emit('login', connector.id)"
+          target="_blank"
+          class="mb-2 d-block"
         >
-          <img
-            :src="require(`@/assets/connectors/${connector.id}.svg`)"
-            width="48"
-            height="48"
-            class="mr-3"
-          />
-          <h4 v-text="connector.name" />
+          <UiButton class="button-outline width-full v-align-middle">
+            <img
+              :src="require(`@/assets/connectors/${connector.id}.svg`)"
+              width="32"
+              height="32"
+              class="mr-2 v-align-middle"
+            />
+            {{ connector.name }}
+          </UiButton>
         </a>
       </div>
     </div>

diff --git a/src/components/Modal/SelectDate.vue b/src/components/Modal/SelectDate.vue
@@ -1,23 +1,98 @@
 <template>
   <UiModal :open="open" @close="$emit('close')">
-    <h3 class="m-4 text-center">Select a date</h3>
-    <div class="modal-body">
-      <UiCalendar
-        @input="[$emit('input', input), $emit('close')]"
-        v-model="input"
-        class="mx-auto mb-7"
-      />
-    </div>
+    <form @submit.prevent="handleSubmit" class="modal-body">
+      <div v-if="step === 0">
+        <h3 class="m-4 text-center">Select a date</h3>
+        <div class="modal-body m-4">
+          <UiCalendar v-model="input" class="mx-auto mb-2" />
+        </div>
+      </div>
+      <div v-else>
+        <h3 class="m-4 mb-0 text-center">Select a time UTC</h3>
+        <div class="d-flex m-4 mx-auto" style="max-width: 360px;">
+          <div class="col-4 px-0 pr-2">
+            <UiButton class="px-0 width-fit">
+              <input
+                v-model="form.h"
+                max="24"
+                class="input text-center width-fit"
+              />
+            </UiButton>
+          </div>
+          <div class="col-4 px-0 pr-2">
+            <UiButton class="px-0 width-fit">
+              <input
+                v-model="form.m"
+                max="60"
+                class="input text-center width-fit"
+              />
+            </UiButton>
+          </div>
+          <div class="col-4 px-0 pr-2">
+            <UiButton class="px-0 width-fit">
+              <input
+                v-model="form.s"
+                max="60"
+                class="input text-center width-fit"
+              />
+            </UiButton>
+          </div>
+        </div>
+      </div>
+      <div class="p-4 overflow-hidden text-center border-top">
+        <div class="col-6 float-left pr-2">
+          <UiButton @click="$emit('close')" type="button" class="width-full">
+            Cancel
+          </UiButton>
+        </div>
+        <div class="col-6 float-left pl-2">
+          <UiButton type="submit" class="width-full button--submit">
+            <span v-if="step === 0">Next</span>
+            <span v-else>Select</span>
+          </UiButton>
+        </div>
+      </div>
+    </form>
   </UiModal>
 </template>
 
 <script>
 export default {
-  props: ['open'],
+  props: ['open', 'value'],
   data() {
     return {
-      input: ''
+      input: '',
+      step: 0,
+      form: {
+        h: '00',
+        m: '00',
+        s: '00'
+      }
     };
+  },
+  watch: {
+    open() {
+      this.step = 0;
+      this.form = { h: '00', m: '00', s: '00' };
+      this.input = this.value;
+    }
+  },
+  methods: {
+    handleSubmit() {
+      if (this.step === 0) return (this.step = 1);
+      const [year, month, day] = this.input.split('-');
+      let input = Date.UTC(
+        year,
+        month - 1,
+        day,
+        this.form.h,
+        this.form.m,
+        this.form.s
+      );
+      input = new Date(input).getTime() / (1e3).toFixed();
+      this.$emit('input', input);
+      this.$emit('close');
+    }
   }
 };
 </script>
diff --git a/src/components/Ui/Calendar.vue b/src/components/Ui/Calendar.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="calendar">
     <div class="mb-2 d-flex">
-      <a class="col-3 iconfont iconback text-left h3" @click="month--" />
+      <a
+        class="col-3 iconfont iconback text-left h3 text-gray"
+        @click="month--"
+      />
       <h4 class="mb-3 flex-auto text-center">{{ monthName }} {{ year }}</h4>
-      <a class="col-3 iconfont icongo text-right h3" @click="month++" />
+      <a
+        class="col-3 iconfont icongo text-right h3 text-gray"
+        @click="month++"
+      />
     </div>
     <div class="border-left border-top overflow-hidden">
       <div

diff --git a/src/components/Ui/Modal.vue b/src/components/Ui/Modal.vue
@@ -5,7 +5,10 @@
       class="shell overflow-hidden anim-scale-in position-relative rounded-0 rounded-md-2"
     >
       <slot />
-      <a @click="$emit('close')" class="position-absolute right-0 top-1 p-4">
+      <a
+        @click="$emit('close')"
+        class="position-absolute right-0 top-1 p-4 text-gray"
+      >
         <Icon name="close" />
       </a>
     </div>

diff --git a/src/store/modules/ui.ts b/src/store/modules/ui.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import lock from '@/helpers/lock';
 import { lsGet } from '@/helpers/utils';
-import config from "@/helpers/config";
+import config from '@/helpers/config';
 
 const state = {
   init: false,

diff --git a/src/style.scss b/src/style.scss
@@ -35,6 +35,7 @@ a {
   color: $white;
 
   &:hover {
+    color: $white !important;
     cursor: pointer;
     text-decoration: none !important;
   }

diff --git a/src/views/Create.vue b/src/views/Create.vue
@@ -52,29 +52,25 @@
       <div class="col-12 col-lg-4 float-left">
         <Block title="Actions">
           <div class="mb-2">
-            <UiButton class="width-full mb-2">
-              <input
-                v-model="form.start"
-                @click="[(modalOpen = true), (selectedDate = 'start')]"
-                type="number"
-                class="input width-full"
-                placeholder="Start at"
-              />
+            <UiButton
+              @click="[(modalOpen = true), (selectedDate = 'start')]"
+              class="width-full mb-2"
+            >
+              <span v-if="!form.start">Select start date</span>
+              <span v-else v-text="$d(form.start * 1e3, 'long')" />
             </UiButton>
-            <UiButton class="width-full mb-2">
-              <input
-                v-model="form.end"
-                @click="[(modalOpen = true), (selectedDate = 'end')]"
-                type="number"
-                class="input width-full"
-                placeholder="End at"
-              />
+            <UiButton
+              @click="[(modalOpen = true), (selectedDate = 'end')]"
+              class="width-full mb-2"
+            >
+              <span v-if="!form.end">Select end date</span>
+              <span v-else v-text="$d(form.end * 1e3, 'long')" />
             </UiButton>
             <UiButton class="width-full mb-2">
               <input
                 v-model="form.snapshot"
                 type="number"
-                class="input width-full"
+                class="input width-full text-center"
                 placeholder="Snapshot block number"
               />
             </UiButton>
@@ -91,6 +87,7 @@
       </div>
     </div>
     <ModalSelectDate
+      :value="form[selectedDate]"
       :open="modalOpen"
       @close="modalOpen = false"
       @input="setDate"
@@ -127,7 +124,6 @@ export default {
     },
     isValid() {
       const ts = (Date.now() / 1e3).toFixed();
-      const minBlock = (3600 * 24) / 15;
       return (
         !this.loading &&
         this.web3.account &&
@@ -136,7 +132,6 @@ export default {
         this.form.start &&
         this.form.start >= ts &&
         this.form.end &&
-        this.form.end >= ts + minBlock &&
         this.form.end > this.form.start &&
         this.form.choices.length >= 2 &&
         this.form.choices.reduce((a, b) => (!a ? false : b), true)
@@ -152,10 +147,9 @@ export default {
       delete this.form.choices[i];
       this.form.choices = this.form.choices.filter(String);
     },
-    setDate(date) {
+    setDate(ts) {
       if (this.selectedDate) {
-        date = (new Date(date).getTime() / 1e3).toFixed();
-        this.form[this.selectedDate] = date;
+        this.form[this.selectedDate] = ts;
       }
     },
     async handleSubmit() {

diff --git a/src/views/Proposal.vue b/src/views/Proposal.vue
@@ -202,6 +202,7 @@ export default {
       this.results = proposalObj.results;
     },
     async loadVotingPower() {
+      if (!this.web3.account) return;
       this.votingPower = await this.getVotingPower({
         token: this.token.token,
         snapshot: this.payload.snapshot

diff --git a/src/views/Proposals.vue b/src/views/Proposals.vue
@@ -113,7 +113,7 @@ export default {
               return true;
             }
           })
-          .sort((a, b) => a[1].msg.payload.start - b[1].msg.payload.start, 0)
+          .sort((a, b) => b[1].msg.payload.end - a[1].msg.payload.end, 0)
       );
     }
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -113,7 +113,7 @@ export default { @@
                   return true;
                 }
               })
-              .sort((a, b) => a[1].msg.payload.start - b[1].msg.payload.start, 0)
+              .sort((a, b) => b[1].msg.payload.end - a[1].msg.payload.end, 0)
           );
         }
       },
@@ Expand Down @@