admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
John Cardinal
2019-03-05 23:23:44 +00:00
parent 8fcc3b4194
commit 14bbada15f
5 changed files with 100 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
ayanova/src/components/gzdateandtimepicker.vue
View File

@@ -1,119 +1,108 @@
<template>
<div>
<!-- <v-menu
ref="menu"
v-model="show"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="time"
lazy
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="value"
prepend-inner-icon="fa-calendar-alt"
@click:prepend-inner="sproing('DATE')"
append-icon="fa-clock"
@click:append="sproing('TIME')"
readonly
v-on="on"
></v-text-field>
-->
<v-menu
ref="menu"
v-model="show"
:close-on-content-click="false"
:nudge-right="40"
lazy
transition="scale-transition"
offset-y
full-width
min-width="290px"
>
<gz-date-picker v-if="show.datePicker" v-bind:value="value" scrollable>
<div>WHAAA???</div>
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="show.datePicker = false">Cancel</v-btn>
<v-btn flat color="primary" @click="dateSelected(date)">OK</v-btn>
</gz-date-picker>
<gz-time-picker v-if="show.timePicker" v-bind:value="value" scrollable>
<v-spacer></v-spacer>
<div>WHOOOO???</div>
<v-btn flat color="primary" @click="show.timePicker = false">Cancel</v-btn>
<v-btn flat color="primary" @click="alert('bam!')">OK</v-btn>
</gz-time-picker>
<v-text-field
v-model="value"
prepend-inner-icon="fa-calendar-alt"
@click:prepend-inner="sproing('DATE')"
append-icon="fa-clock"
@click:append="sproing('TIME')"
readonly
></v-text-field>
</v-menu>
<!-- <v-time-picker
v-if="show.timePicker"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
></v-time-picker>
-->
<v-layout row wrap v-if="!readonly">
<v-flex xs6>
<v-dialog v-model="modal" persistent lazy full-width width="290px">
<v-text-field
slot="activator"
v-model="formatDate"
v-bind:label="label"
prepend-icon="fa-calendar-alt"
readonly
></v-text-field>
<v-date-picker v-model="dateOnly" @input="modal = false">
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="modal = false">Close</v-btn>
</v-date-picker>
</v-dialog>
</v-flex>
<v-flex xs6>
<v-dialog v-model="modal2" persistent lazy full-width width="290px">
<v-text-field
slot="activator"
v-model="formatTime"
label
prepend-icon="fa-clock"
readonly
></v-text-field>
<v-time-picker v-model="timeOnly">
<v-spacer></v-spacer>
<v-btn flat color="primary" @click="modal2 = false">OK</v-btn>
</v-time-picker>
</v-dialog>
</v-flex>
</v-layout>
<v-text-field
v-else
v-model="formatDateTime"
v-bind:label="label"
prepend-icon="fa-calendar-alt"
disabled
></v-text-field>
</div>
</template>
<script>
/* eslint-disable */
/*
TODO:
Add the date picker
Make the buttons open the correct picker
Make it actually work with the binding and the selections and etc
maybe can make it editable by keyboard in the text field and still keep the pickers as a separate option?
*/
//https://stackoverflow.com/questions/54575541/vuetify-timepicker-return-value-to-model
</template> <script>
export default {
props: {
value: String,
formatDate: Function
data: () => ({ date: null, modal: false, modal2: false }),
props: { label: String, value: String, readonly: Boolean },
watch: {
date() {
this.$emit("input", this.date);
},
value() {
this.date = this.value;
}
},
data() {
return {
show: {
timePicker: false,
datePicker: false
computed: {
formatDateTime() {
return this.value.toString();
// let momentObj = this.$moment.utc();
// if (this.value) {
// momentObj = this.$moment.utc(this.value);
// }
// return momentObj.local().format("dddd MM/DD/YYYY h:mm a");
},
formatDate() {
return this.value.toString();
// let momentObj = this.$moment.utc();
// if (this.value) {
// momentObj = this.$moment.utc(this.value);
// }
// return momentObj.local().format("dddd MM/DD/YYYY");
},
dateOnly: {
get() {
return this.value ? this.value.substr(0, 10) : null;
// let momentObj = this.$moment.utc();
// if (this.value) {
// momentObj = this.$moment.utc(this.value);
// }
// return momentObj.local().format("YYYY-MM-DD");
},
time: null,
menu2: false,
modal2: false
};
},
mounted() {},
methods: {
sproing: function(sproingUp) {
if (sproingUp == "DATE") {
this.show.datePicker = true;
this.show.timePicker = false;
} else {
this.show.datePicker = false;
this.show.timePicker = true;
set(value) {
this.date = value + " " + this.timeOnly;
}
//debugger;
//console.log(this.show);
},
timeSelected(theTime) {
console.log("time selected: " + theTime);
timeOnly: {
get() {
return this.value ? this.value.substr(11, 8) : null;
// let momentObj = this.$moment.utc();
// if (this.value) {
// momentObj = this.$moment.utc(this.value);
// }
// return momentObj.local().format("HH:mm:ss");
},
set(value) {
this.date = this.dateOnly + " " + value;
}
},
dateSelected(theDate) {
console.log("date selected: " + theDate);
formatTime() {
return this.value ? this.value.substr(11, 8) : null;
// let momentObj = this.$moment.utc();
// if (this.value) {
// momentObj = this.$moment.utc(this.value);
// }
// return momentObj.local().format("h:mm a");
}
}
};
</script>
<style>
</style>

38
ayanova/src/components/gzdatepicker.vue
View File

@@ -1,38 +0,0 @@
<script>
//////////////////////////////////////////
// GZDatePicker
// This component was created to wrap the
// vuetify date picker to allow using string date
// and time in iso format and not lose the time
// portion when picking a new date
//
/* Xeslint-disable */
export default {
props: {
value: {
type: String,
default: ""
}
},
render() {
var that = this;
return this.$createElement("v-date-picker", {
props: {
...this.$attrs,
value: this.value ? this.value.substr(0, 10) : null
},
on: {
...this.$listeners,
input: function(date) {
//debugger;
//Put back the time portion from before
var combined = date + that.value.substr(10);
that.$emit("input", new Date(combined).toISOString());
//Note: I have observed that it converts a date with milliseconds to a date with the final 3 digits stripped and Z put in instead
//Not sure if this will be an issue or not but if it is then might need to force to not UTC or whatever
}
}
});
}
};
</script>

88
ayanova/src/components/gztimepicker.vue
View File

@@ -1,88 +0,0 @@
<script>
//////////////////////////////////////////
// GZTimePicker
// This component was created to wrap the
// vuetify time picker to allow using string date
// and time in iso format and not lose the date
// portion when picking a new time
//2019-02-12T10:12:39.594206
/* eslint-disable */
export default {
props: {
value: {
type: String,
default: ""
}
},
render() {
var that = this;
return this.$createElement("v-time-picker", {
props: {
...this.$attrs,
value: this.value ? this.value.substr(11, 8) : null
},
on: {
...this.$listeners,
input: function(time) {
// debugger;
//Put back the time portion from before
var combinedDateAndTimeAsString = that.value.substr(0, 11) + time;
//===========================================
//PARSE THE TIME AND DATE
//NOTE: FOLLOWING CODE ADAPTED FROM A LIBRARY:
//https://github.com/csnover/js-iso8601
//Only change is to make it a local function and move "numericKeys" variable into the code block
var timestamp,
struct,
minutesOffset = 0,
numericKeys = [1, 4, 5, 6, 7, 10, 11];
// ES5 §15.9.4.2 states that the string should attempt to be parsed as a Date Time String Format string
// before falling back to any implementation-specific date parsing, so that’s what we do, even if native
// implementations could be faster
// 1 YYYY 2 MM 3 DD 4 HH 5 mm 6 ss 7 msec 8 Z 9 ± 10 tzHH 11 tzmm
if (
(struct = /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/.exec(
combinedDateAndTimeAsString
))
) {
// avoid NaN timestamps caused by “undefined” values being passed to Date.UTC
for (var i = 0, k; (k = numericKeys[i]); ++i) {
struct[k] = +struct[k] || 0;
}
// allow undefined days and months
struct[2] = (+struct[2] || 1) - 1;
struct[3] = +struct[3] || 1;
if (struct[8] !== "Z" && struct[9] !== undefined) {
minutesOffset = struct[10] * 60 + struct[11];
if (struct[9] === "+") {
minutesOffset = 0 - minutesOffset;
}
}
timestamp = Date.UTC(
struct[1],
struct[2],
struct[3],
struct[4],
struct[5] + minutesOffset,
struct[6],
struct[7]
);
} else {
timestamp = Date.parse(combinedDateAndTimeAsString);
}
//==========================================
var newDateAsString = new Date(timestamp).toISOString();
that.$emit("input", newDateAsString);
}
}
});
}
};
</script>

6
ayanova/src/main.js
View File

@@ -11,10 +11,7 @@ import errorHandler from "./api/errorhandler";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import dayjs from "dayjs";
import gzdatepicker from "./components/gzdatepicker.vue";
import gztimepicker from "./components/gztimepicker.vue";
import gzdateandtimepicker from "./components/gzdateandtimepicker.vue";
import altdateandtimepicker from "./components/altdateandtimepicker.vue";
/////////////////////////////////////////////////////////////////
// FORM VALIDATION
@@ -108,10 +105,7 @@ Vue.filter("boolastext", function(value) {
/////////////////////////////////////////////////////////////
//GZ COMPONENTS
//
Vue.component("gz-date-picker", gzdatepicker);
Vue.component("gz-time-picker", gztimepicker);
Vue.component("gz-date-time-picker", gzdateandtimepicker);
Vue.component("alt-date-time-picker", altdateandtimepicker);
/////////////////////////////////////////////////////////////////
// INSTANTIATE

13
ayanova/src/views/inventory-widget-edit.vue
View File

@@ -74,13 +74,11 @@
<v-flex xs12 sm6 lg4 xl3 px-2>
<div>{{obj.startDate}}</div>
<gz-date-time-picker label="TESTBOTHPICKERS" v-model="obj.startDate"></gz-date-time-picker>
</v-flex> -->
</v-flex>-->
<v-flex xs12 sm6 lg4 xl3 px-2>
<alt-date-time-picker label="TESTBOTHPICKERS" v-model="obj.startDate"></alt-date-time-picker>
<gz-date-time-picker label="Start" v-model="obj.startDate" readonly="true"></gz-date-time-picker>
</v-flex>
<!--
<!--
<v-menu
ref="menu"
v-model="menu"
@@ -107,8 +105,7 @@
<v-btn flat color="primary" @click="menu = false">Cancel</v-btn>
<v-btn flat color="primary" @click="$refs.menu.save(date)">OK</v-btn>
</v-date-picker>
</v-menu> -->
</v-menu>-->
</v-layout>
<v-layout align-center justify-space-around row wrap mt-5>
<v-flex xs1>
@@ -141,7 +138,7 @@ export default {
obj: {},
lc: locale,
theDate: new Date(),
date: new Date().toISOString().substr(0, 10),
date: new Date().toISOString().substr(0, 10),
menu: false,
modal: false,
menu2: false