-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ {{'reports_body_left_center_left_dropdown_title_machine_status' | localize('Stato macchina')}}
+
+
-
+
+
+
+
+
+
+
+
+
+ {{'reports_body_left_center_left_dropdown_title_programs' | localize('Programmi')}}
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
- {{dataPieces.productedPieces}}
-
-
-
-
-
- {{dataPieces.discardedPieces}}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ {{dataPieces.productedPieces}}
+
+
+
+
+
+ {{dataPieces.discardedPieces}}
+
+
+
+
-
-
\ No newline at end of file
+
diff --git a/Step/wwwroot/src/components/timeline-chart/index.js b/Step/wwwroot/src/components/timeline-chart/index.js
new file mode 100644
index 00000000..9211f4b5
--- /dev/null
+++ b/Step/wwwroot/src/components/timeline-chart/index.js
@@ -0,0 +1,7 @@
+import TimeLineChartRow from "./timeline-chart-row.vue";
+import TimeLineChartHeader from "./timeline-chart-header.vue";
+
+export {
+ TimeLineChartRow,
+ TimeLineChartHeader
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts b/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts
new file mode 100644
index 00000000..2faeaf02
--- /dev/null
+++ b/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.ts
@@ -0,0 +1,228 @@
+import Vue from "vue";
+import { Component, Prop, Watch } from "vue-property-decorator";
+import moment from "moment";
+import { Container, Draggable } from "vue-smooth-dnd";
+
+@Component({
+ components: {
+ Container,
+ Draggable
+ }
+})
+export default class TimeLineChartRow extends Vue {
+ @Prop({ required: true })
+ value: Date;
+
+ @Prop({ required: true })
+ start: Date;
+
+ @Prop({ required: true })
+ end: Date;
+
+ @Prop({ required: false, default: 40 })
+ interval: number;
+
+ @Prop({ required: false, default: true })
+ showCursor: boolean;
+
+ current: Date = this.value;
+ formatter = {
+ title: "MMMM YYYY",
+ titleInterval: false,
+ interval: "DD",
+ showTime: false
+ };
+ isHandlerDragging: boolean = false;
+ draggingIn: boolean;
+ draggingPosition: any;
+ draggingTool: any;
+
+ oneHour: number = 60 * 60 * 1000;
+ oneDay: number = 24 * this.oneHour;
+
+ @Watch("value")
+ valueChange(value) {
+ this.current = value;
+ }
+
+ get _start(): Date {
+ let _startTime = this.start.getTime();
+ let _endTime = this.end.getTime();
+ let _diffDays = Math.round(Math.abs((_endTime - _startTime) / this.oneDay));
+ if(_diffDays == 0)
+ {
+ _startTime = (new Date(_startTime).setMinutes(0,0));
+ _endTime = (new Date(_endTime).setMinutes(59,59));
+ return new Date(_startTime - this.oneHour);
+ }
+ _startTime = (new Date(_startTime).setHours(0,0,0));
+ _endTime = (new Date(_endTime).setHours(23,59,59));
+ return new Date(_startTime - this.oneDay);
+ }
+
+ get _end(): Date {
+ let _startTime = this.start.getTime();
+ let _endTime = this.end.getTime();
+ let _diffDays = Math.round(Math.abs((_endTime - _startTime) / this.oneDay));
+
+ if(_diffDays == 0)
+ {
+ _startTime = (new Date(_startTime).setMinutes(0,0));
+ _endTime = (new Date(_endTime).setMinutes(59,59));
+ return new Date(_endTime + this.oneHour);
+ }
+ _startTime = (new Date(_startTime).setHours(0,0,0));
+ _endTime = (new Date(_endTime).setHours(23,59,59));
+ return new Date(_endTime + this.oneDay);
+ }
+
+ get intervals(): Date[] {
+ this.bindFormatter()
+ let result: Date[] = [];
+ let step = this.oneDay;
+
+ let diffDays = this.diffDays;
+ let diffHours = this.diffHours;
+
+ if (diffDays <= 1) {
+ step = this.oneHour;
+ let check = Math.ceil(diffHours / this.interval);
+ if (check > 1) step = this.oneHour * check;
+ }
+ else {
+ step = this.oneDay;
+ let check = Math.ceil(diffDays / this.interval);
+ if (check > 1) {
+ step = this.oneDay * check
+ };
+ }
+
+ let interval = this.startTime;
+ while (this.endTime >= interval) {
+ result.push(new Date(interval + (step / 2)));
+ interval += step;
+ }
+
+ // if (this._end.setHours(0,0,0,0) != result[result.length - 1].getTime())
+ // result.push(this._end);
+
+ return result;
+ }
+
+ get startTime(): number {
+ return this.parseToUnixTime(this._start);
+ }
+
+ get endTime(): number {
+ return this.parseToUnixTime(this._end);
+ }
+
+ get diffTime(): number {
+ return this.endTime - this.startTime;
+ }
+
+ get diffDays(): number {
+ return Math.round(Math.abs((this._end.getTime() - this._start.getTime()) / this.oneDay)
+ );
+ }
+
+ get diffHours(): number {
+ return Math.round(
+ Math.abs((this._end.getTime() - this._start.getTime()) / this.oneHour)
+ );
+ }
+
+ get cursorPosition(): number {
+ return this.unixTimeToPercent(this.current.getTime());
+ }
+
+ private bindFormatter(): any {
+ let _startTime = this.start.getTime();
+ let _endTime = this.end.getTime();
+ let _diffDays = Math.round(Math.abs((_endTime - _startTime) / this.oneDay));
+
+ if(_diffDays == 0){
+ this.formatter.titleInterval = false;
+ this.formatter.title = "DD MMMM YYYY";
+ this.formatter.interval = "HH:mm"
+ this.formatter.showTime = true;
+ return new Date(_startTime - this.oneHour);
+ }
+ else
+ {
+ this.formatter.titleInterval = false;
+ this.formatter.title = "MMMM YYYY";
+ this.formatter.interval = "DD"
+ this.formatter.showTime = false;
+
+ let _monthDiff = this.monthDiff(this.start, this.end);
+ if(_monthDiff > 0)
+ {
+ this.formatter.titleInterval = true;
+ this.formatter.title = "MMMM YYYY";
+ this.formatter.interval = "DD/MM"
+ this.formatter.showTime = false;
+
+ let _yearDiff = this.yearDiff(this.start, this.end);
+ if(_yearDiff > 0)
+ {
+ this.formatter.titleInterval = true;
+ if(_monthDiff > 3)
+ {
+ this.formatter.title = "MMMM YYYY";
+ this.formatter.interval = "DD/MM/YY"
+ this.formatter.showTime = false;
+ }
+ }
+ }
+ }
+ }
+
+ private monthDiff(start: Date, end: Date) : number {
+ let months = (end.getFullYear() - start.getFullYear()) * 12;
+ months -= start.getMonth();
+ months += end.getMonth();
+ return months <= 0 ? 0 : months;
+ }
+
+ private yearDiff(start: Date, end: Date) : number {
+ return end.getFullYear() - start.getFullYear();
+}
+
+ private _moving: boolean = false;
+ startMove(evt: PointerEvent) {
+ this._moving = true;
+ (this.$refs.cursone as HTMLElement).setPointerCapture(evt.pointerId);
+ }
+
+ moving(evt: PointerEvent) {
+ if (!this._moving) return;
+
+ let w = (this.$refs.header as HTMLElement).clientWidth;
+ let step = this.diffTime / w;
+ var ct = this.current.getTime() + step * evt.movementX;
+ let currentDate = new Date(Math.max(Math.min(ct, this.endTime), this.startTime));
+ this.$emit("input", currentDate);
+ }
+
+ stopMove(evt: PointerEvent) {
+ this._moving = false;
+ (this.$refs.cursone as HTMLElement).releasePointerCapture(evt.pointerId);
+ }
+
+ private parseToUnixTime(date: string | Date): number {
+ if (typeof date === "object") return date.getTime();
+
+ if (typeof date === "string") {
+ let _date = moment(date, "DD/MM/YYYY").toDate();
+ if (!isNaN(_date.getTime())) return _date.getTime();
+ }
+ return 0;
+ }
+
+ private unixTimeToPercent(unixTime: number): number {
+ return (
+ ((unixTime - this.parseToUnixTime(this._start)) * 100) / this.diffTime
+ );
+ }
+}
diff --git a/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.vue b/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.vue
new file mode 100644
index 00000000..631b4d0d
--- /dev/null
+++ b/Step/wwwroot/src/components/timeline-chart/timeline-chart-header.vue
@@ -0,0 +1,32 @@
+
+
+
+
diff --git a/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.ts b/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.ts
new file mode 100644
index 00000000..b81304cb
--- /dev/null
+++ b/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.ts
@@ -0,0 +1,91 @@
+import Vue from "vue";
+import { Component, Prop } from "vue-property-decorator";
+import moment from "moment";
+
+
+@Component({})
+export default class TimeLineChartRow extends Vue {
+ @Prop({required: true})
+ start: Date;
+
+ @Prop({required: true})
+ end: Date;
+
+ @Prop({required: true, default: [] as server.timeLineChartItem[] })
+ occurrences: server.timeLineChartItem[];
+
+ @Prop({required: false, default: "#c9243f"})
+ color: string;
+
+ oneHour: number = 60 * 60 * 1000;
+ oneDay: number = 24 * this.oneHour;
+
+ get tasks(){
+ return this.occurrences;
+ }
+
+ get _start(): Date {
+ let _startTime = this.start.getTime();
+ let _endTime = this.end.getTime();
+ let _diffDays = Math.round(Math.abs((_endTime - _startTime) / this.oneDay));
+ if(_diffDays == 0)
+ return new Date(_startTime - this.oneHour);
+
+ _startTime = (new Date(this.start.getTime()).setHours(0,0,0));
+ _endTime = (new Date(this.end.getTime()).setHours(23,59,59));
+ return new Date(_startTime - this.oneDay);
+ }
+
+ get _end(): Date {
+ let _startTime = this.start.getTime();
+ let _endTime = this.end.getTime();
+ let _diffDays = Math.round(Math.abs((_endTime - _startTime) / this.oneDay));
+
+ if(_diffDays == 0)
+ return new Date(_endTime + this.oneHour);
+
+ _startTime = (new Date(this.start.getTime()).setHours(0,0,0));
+ _endTime = (new Date(this.end.getTime()).setHours(23,59,59));
+ return new Date(_endTime + this.oneDay);
+ }
+
+ get diff() : number{
+ return this.parseDateTime(this._end) - this.parseDateTime(this._start);
+ }
+
+ from(task: server.timeLineChartItem) : number {
+ let from = this.parseDateTime(task.from);
+ return this.computes(from);
+ }
+
+ to(task: server.timeLineChartItem) : number {
+ let to = this.parseDateTime(task.to);
+ return 100 - this.computes(to);
+ }
+
+ colorOf(task: server.timeLineChartItem) : string {
+ if(task.color) return task.color;
+ return this.color;
+ }
+
+ tooltipOf(task: server.timeLineChartItem) : string {
+ return `${task.name}!`
+ }
+
+ private parseDateTime(date: string | Date) : number
+ {
+ if (typeof (date) === "object")
+ return date.getTime();
+
+ if (typeof (date) === "string")
+ {
+ let _date = moment(date, "DD/MM/YYYY").toDate();
+ if (!isNaN(_date.getTime())) return _date.getTime();
+ }
+ return 0;
+ }
+
+ private computes(value: number) : number {
+ return ((value - this.parseDateTime(this._start)) * 100) / this.diff;
+ }
+}
diff --git a/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.vue b/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.vue
new file mode 100644
index 00000000..b4baea3a
--- /dev/null
+++ b/Step/wwwroot/src/components/timeline-chart/timeline-chart-row.vue
@@ -0,0 +1,18 @@
+
+
+
+
diff --git a/Step/wwwroot/src/main.js b/Step/wwwroot/src/main.js
index ccb18175..0f058083 100644
--- a/Step/wwwroot/src/main.js
+++ b/Step/wwwroot/src/main.js
@@ -1,7 +1,7 @@
import Vue from "vue";
import VueRouter from "vue-router";
import VeeValidate from "vee-validate";
-import { store, machineStatusActions,machineInfoStore } from "./store";
+import { store, machineStatusActions, machineInfoStore } from "./store";
import "./_base/gestures";
import "./app.business-logic";
import "./app.modules";
@@ -13,7 +13,7 @@ import { Factory, MessageService } from "src/_base";
// var JustGage = require("justgage/justgage.js");
const App = () =>
- import("./App.vue");
+ import ("./App.vue");
import { routes } from "./app.routes";
@@ -22,6 +22,9 @@ Vue.use(VueRouter);
Vue.use(VeeValidate); // forms validation for vuejs
// Vue.use(VueGesture);
+import VTooltip from 'v-tooltip'
+Vue.use(VTooltip)
+
let router = new VueRouter({ linkActiveClass: "inpath", linkExactActiveClass: "active" });
router.addRoutes(routes);
@@ -31,29 +34,29 @@ let developerMode = true;
// manipulate the title page
router.beforeEach((to, from, next) => {
- console.log("Navigate To:", to);
- if (to.meta && to.meta.area) {
- // Check if area is enabled
- if (!developerMode && !machineStatusActions.isAreaEnabled(store, to.meta.area)) {
- next({
- path: '/'
- })
- return;
+ console.log("Navigate To:", to);
+ if (to.meta && to.meta.area) {
+ // Check if area is enabled
+ if (!developerMode && !machineStatusActions.isAreaEnabled(store, to.meta.area)) {
+ next({
+ path: '/'
+ })
+ return;
+ }
}
- }
- if (to.meta && to.meta.title) {
+ if (to.meta && to.meta.title) {
- if (typeof cmsClient == "undefined")
- window.document.title = "CMS Active - " + to.meta.title;
- else
- window.document.title = to.meta.title;
- }
- if(store.state.machineInfo.canChangePages)
- next();
- else{
- Factory.Get(MessageService).publishToChannel("show-nochange-page");
- next(false);
- }
+ if (typeof cmsClient == "undefined")
+ window.document.title = "CMS Active - " + to.meta.title;
+ else
+ window.document.title = to.meta.title;
+ }
+ if (store.state.machineInfo.canChangePages)
+ next();
+ else {
+ Factory.Get(MessageService).publishToChannel("show-nochange-page");
+ next(false);
+ }
});
@@ -63,10 +66,10 @@ new LocalizationService().init();
let v = new Vue({
- router: router,
- store,
- el: "app",
- render: (h) => h(App),
+ router: router,
+ store,
+ el: "app",
+ render: (h) => h(App),
});
@@ -80,12 +83,12 @@ import "./filters/isValidMixin";
// polyfills !!
if (!String.prototype.format) {
- String.prototype.format = function () {
- var args = arguments;
- return this.replace(/{(\d+)}/g, function (match, number) {
- return typeof args[number] != 'undefined' ?
- args[number] :
- match;
- });
- };
-}
+ String.prototype.format = function() {
+ var args = arguments;
+ return this.replace(/{(\d+)}/g, function(match, number) {
+ return typeof args[number] != 'undefined' ?
+ args[number] :
+ match;
+ });
+ };
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/modules/base-components/accordion-dropdown.vue b/Step/wwwroot/src/modules/base-components/accordion-dropdown.vue
index 27c63c13..66327c5b 100644
--- a/Step/wwwroot/src/modules/base-components/accordion-dropdown.vue
+++ b/Step/wwwroot/src/modules/base-components/accordion-dropdown.vue
@@ -1,8 +1,10 @@