diff --git a/client/agency/routes.json b/client/agency/routes.json index 7604cdb6be..2a54e1e7ca 100644 --- a/client/agency/routes.json +++ b/client/agency/routes.json @@ -63,5 +63,9 @@ "icon": "today" } } + ], + "menu": [ + {"state": "zone.card.basicData", "icon": "settings"}, + {"state": "zone.card.deliveryDay", "icon": "today"} ] } \ No newline at end of file diff --git a/client/agency/src/zone/calendar/index.html b/client/agency/src/zone/calendar/index.html index c9525be03b..07c1ff9d7a 100644 --- a/client/agency/src/zone/calendar/index.html +++ b/client/agency/src/zone/calendar/index.html @@ -7,9 +7,15 @@ - - calendar - + + + + + diff --git a/client/agency/src/zone/calendar/index.js b/client/agency/src/zone/calendar/index.js index 16a4bec849..7d78b11262 100644 --- a/client/agency/src/zone/calendar/index.js +++ b/client/agency/src/zone/calendar/index.js @@ -3,6 +3,13 @@ import ngModule from '../../module'; class Controller { constructor($scope) { this.$scope = $scope; + this.defaultDate = new Date(); + this.defaultNexDate = new Date(this.defaultDate); + this.defaultNexDate.setMonth(this.defaultNexDate.getMonth() + 1); + } + + onSelection(value) { + console.log(value); } } diff --git a/client/agency/src/zone/delivery-day/index.html b/client/agency/src/zone/delivery-day/index.html index 40b9070640..924a1511b4 100644 --- a/client/agency/src/zone/delivery-day/index.html +++ b/client/agency/src/zone/delivery-day/index.html @@ -1,14 +1,14 @@ - - + + + Delivery days - a + diff --git a/client/core/src/components/calendar/index.html b/client/core/src/components/calendar/index.html new file mode 100644 index 0000000000..4d9c80df61 --- /dev/null +++ b/client/core/src/components/calendar/index.html @@ -0,0 +1,22 @@ +
+ + + + + + {{$ctrl.defaultDate | date: 'dd/MM/yyyy'}} + + + + + + +
+ {{::day.number}} +
+ +
\ No newline at end of file diff --git a/client/core/src/components/calendar/index.js b/client/core/src/components/calendar/index.js new file mode 100644 index 0000000000..2f27f0e734 --- /dev/null +++ b/client/core/src/components/calendar/index.js @@ -0,0 +1,95 @@ +import ngModule from '../../module'; +import Component from '../../lib/component'; +import './style.scss'; + +/** + * Calendar. + * + */ +export default class Calendar extends Component { + constructor($element, $scope) { + super($element, $scope); + + this.defaultDate = new Date(); + } + + get defaultDate() { + return this._defaultDate; + } + + set defaultDate(value) { + this._defaultDate = value; + this.buildDays(); + } + + get lastDay() { + let year = this.defaultDate.getYear(); + // Month starts from zero, so we increment one month + let month = this.defaultDate.getMonth() + 1; + + return new Date(year, month, 0).getDate(); + } + + buildDays() { + let firstMonthDay = new Date(this.defaultDate); + firstMonthDay.setDate(1); + + let weekday = firstMonthDay.getDay(); + + let year = this.defaultDate.getYear(); + let month = this.defaultDate.getMonth(); + let previousLastMonthDay = new Date(year, month, 0); + + this.days = []; + let day = 1; + + let previousMonthDay = previousLastMonthDay.getDate() - (weekday - 2); + let nextMonthDay = 1; + + for (let d = 1; d <= 35; d++) { + if (d < weekday) { + let monthDay = new Date(previousLastMonthDay); + monthDay.setDate(previousMonthDay); + this.days.push({number: previousMonthDay, date: monthDay, color: 'gray'}); + previousMonthDay++; + } else if (d >= weekday && day <= this.lastDay) { + let monthDay = new Date(this.defaultDate); + monthDay.setDate(day); + this.days.push({number: day, date: monthDay}); + day++; + } else if (d >= weekday && day > this.lastDay) { + this.days.push({number: nextMonthDay, color: 'gray'}); + nextMonthDay++; + } + } + } + + moveNext() { + let next = this.defaultDate.getMonth() + 1; + this.defaultDate.setMonth(next); + this.buildDays(); + } + + movePrevious() { + let previous = this.defaultDate.getMonth() - 1; + this.defaultDate.setMonth(previous); + this.buildDays(); + } + + select(index) { + this.emit('selection', {value: this.days[index]}); + } + +} + +Calendar.$inject = ['$element', '$scope', '$attrs']; + +ngModule.component('vnCalendar', { + template: require('./index.html'), + controller: Calendar, + bindings: { + model: '<', + defaultDate: ' .day { + box-sizing: border-box; + padding: 0.1em; + width: 14.2857143%; + line-height: 1.5em; + + span { + text-align: center; + font-size: 0.8vw; + border-radius: 50%; + display: block; + padding: 0.2em; + cursor: pointer + } + + } + + & > .day:hover span { + background-color: #DDD + } + + & > .day.gray { + color: $secondary-font-color + } + } + +} diff --git a/client/core/src/components/index.js b/client/core/src/components/index.js index b615d65f05..b29c8e8cee 100644 --- a/client/core/src/components/index.js +++ b/client/core/src/components/index.js @@ -44,3 +44,6 @@ import './input-number'; import './input-time'; import './fetched-tags'; import './log'; +import './treeview'; +import './calendar'; + diff --git a/client/core/src/components/treeview/index.html b/client/core/src/components/treeview/index.html new file mode 100644 index 0000000000..62d695a41c --- /dev/null +++ b/client/core/src/components/treeview/index.html @@ -0,0 +1,13 @@ +
+ +
\ No newline at end of file diff --git a/client/core/src/components/treeview/index.js b/client/core/src/components/treeview/index.js new file mode 100644 index 0000000000..03e6306c1c --- /dev/null +++ b/client/core/src/components/treeview/index.js @@ -0,0 +1,32 @@ +import ngModule from '../../module'; +import Component from '../../lib/component'; +import './style.scss'; + +/** + * A simple tooltip. + * + * @property {String} position The relative position to the parent + */ +export default class Treeview extends Component { + constructor($element, $scope, $timeout) { + super($element, $scope); + } + + get data() { + return this.model.data; + } + + set selection(value) { + this._selection = value; + } +} + +Treeview.$inject = ['$element', '$scope', '$attrs']; + +ngModule.component('vnTreeview', { + template: require('./index.html'), + controller: Treeview, + bindings: { + model: '<' + } +}); diff --git a/client/core/src/components/treeview/style.scss b/client/core/src/components/treeview/style.scss new file mode 100644 index 0000000000..9179a4ebab --- /dev/null +++ b/client/core/src/components/treeview/style.scss @@ -0,0 +1,19 @@ +vn-treeview { + ul { + margin: 0; + padding: 0; + + li { + list-style: none; + + a { + display: block; + padding: 0.5em + } + } + } + + & > ul > li { + + } +}