added calendar component #724

client/agency/routes.json

@@ -63,5 +63,9 @@
                 "icon": "today"
             }
         }
+    ],
+    "menu": [
+        {"state": "zone.card.basicData", "icon": "settings"},
+        {"state": "zone.card.deliveryDay", "icon": "today"}
     ]
 }

client/agency/src/zone/calendar/index.html

@@ -7,9 +7,15 @@
     <vn-vertical vn-one>
         <vn-card >
             <vn-vertical>
-                <vn-horizontal pad-medium>
+                <vn-vertical pad-small>
-                    calendar
+                    <vn-calendar 
-                </vn-horizontal>
+                        default-date="$ctrl.defaultDate"
+                        on-selection="$ctrl.onSelection(value)">
+                    </vn-calendar>
+                </vn-vertical>
+     <!--            <vn-vertical pad-small>
+                    <vn-calendar default-date="$ctrl.defaultNexDate"></vn-calendar>
+                </vn-vertical> -->
             </vn-vertical>
         </vn-card>
     </vn-vertical>

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);
     }
 }
 

client/agency/src/zone/delivery-day/index.html

@@ -1,14 +1,14 @@
-<vn-watcher
+<vn-crud-model
-    vn-id="watcher"
+    vn-id="model"
-    data="$ctrl.zone"
+    url="/agency/api/ZoneGeos"
-    form="form"
+    data="geos">
-    save="patch">
+</vn-crud-model>
-</vn-watcher>
+
 <vn-horizontal>
     <vn-vertical vn-one>
         <vn-card pad-large>
             <vn-title>Delivery days</vn-title>
-            a
+            <vn-treeview model="model"></vn-treeview>
         </vn-card>
     </vn-vertical>
 

client/core/src/components/calendar/index.html

@@ -0,0 +1,22 @@
+<div>
+    <vn-horizontal class="header">
+        <vn-auto>
+            <vn-icon icon="keyboard_arrow_left" class="pointer"
+                ng-click="$ctrl.movePrevious()"
+            </vn-icon>
+        </vn-auto>
+        <vn-one>
+            <strong>{{$ctrl.defaultDate | date: 'dd/MM/yyyy'}}</strong>
+        </vn-one>
+        <vn-auto>
+            <vn-icon icon="keyboard_arrow_right" class="pointer"
+                ng-click="$ctrl.moveNext()"
+            </vn-icon>
+        </vn-auto>
+    </vn-horizontal>
+    <vn-horizontal class="body">
+        <section ng-repeat="day in $ctrl.days" class="day {{day.color}}" ng-click="$ctrl.select($index)">
+            <span>{{::day.number}}</span>
+        </section>
+    </vn-horizontal>
+</div>

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: '<?',
+        onSelection: '&?'
+    }
+});

client/core/src/components/calendar/style.scss

@@ -0,0 +1,41 @@
+@import "colors";
+
+vn-calendar {
+    width: 100%;
+
+    .header vn-one {
+        text-align: center
+    }
+
+    .body {
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+
+        & > .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
+        }
+    }
+    
+}

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';
+

client/core/src/components/treeview/index.html

@@ -0,0 +1,13 @@
+<div>
+    <ul>
+        <li ng-repeat="item in $ctrl.data">
+            <a href="">
+                <vn-icon icon="keyboard_arrow_down"></vn-icon> 
+                <span>{{::item.name}}</span>
+
+                <section style="float:right">
+                icons</section>
+            </a>
+        </li>
+    </ul>
+</div>

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: '<'
+    }
+});

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 {
+        
+    }
+}