@oveasoft/planning/demo/planningViewer/planningViewer.template.html

An AngularJS planning component

<div flex layout="column">
    <div>
        <h1>OvaPlanning Demo</h1>
        <div layout>
            <md-input-container flex>
                <label>Planning type</label>
                <md-select aria-label="planning type" ng-model="$ctrl.configuration.viewer">
                    <md-option ng-value="'week'">Week</md-option>
                    <md-option ng-value="'month'">Month</md-option>
                    <md-option ng-value="'trimester'">Trimester</md-option>
                </md-select>
            </md-input-container>
            <md-button ng-click="$ctrl.previous()"><</md-button>
            <md-input-container>
            <md-select aria-label="Range number" ng-model="$ctrl.rangeNumber">
                <label>Range</label>
                <md-option ng-value="1">1</md-option>
                <md-option ng-value="2">2</md-option>
                <md-option ng-value="3">3</md-option>
                <md-option ng-value="4">4</md-option>
            </md-input-container>
            </md-select>
            <md-input-container>
                <label>Type</label>
                <md-select aria-label="Range type" ng-model="$ctrl.rangeType">
                    <md-option ng-value="'month'">Month</md-option>
                    <md-option ng-value="'week'">Week</md-option>
                    <md-option ng-value="'day'">Day</md-option>
                </md-select>
            </md-input-container>
            <md-input-container>
                <md-checkbox ng-model="$ctrl.fetchNewData">Fetch new data ?</md-checkbox>
            </md-input-container>
            <md-button ng-click="$ctrl.next()">></md-button>
        </div>
        <div>
            <small>You selected : {{ $ctrl.selected | json }}</small>
            <p>Informations : There is {{ $ctrl.informations.placed.length }} placed appointment and {{ $ctrl.informations.missplaced.length }} missplaced appointment.</p>
        </div>
        <div>
            <md-datepicker ng-model="$ctrl.slot" md-placeholder="Click on the planning to fill a date"></md-datepicker>
        </div>
    </div>
    <md-divider></md-divider>
    <md-progress-linear class="md-warn" md-mode="indeterminate" ng-if="$ctrl.loading"></md-progress-linear>
    <div flex layout style="margin: 20px">
        <div flex layout="column">
            <ova-planning flex layout appointments="$ctrl.events" config="$ctrl.configuration"></ova-planning>
        </div>
    </div>
</div>