@oveasoft/planning/src/ova-planning/ovaPlanning.template.html

An AngularJS planning component

<!-- OvaPlanning template -->
<div id="ova-planning-template" ng-class="'theme-' + $ctrl.config.theme" flex="100" layout="column">

    <!-- Week view -->
    <span id="week-view" flex layout="column" ng-if="$ctrl.config.viewer === 'week'">
        <!-- Controls -->
        <div class="ova-planning-controls">
            <md-button ng-if="$ctrl.config.showControls" class="md-primary" ng-click="$ctrl.previous('week')">&lt;</md-button>
            <span ng-if="$ctrl.config.showLabel">Semaine {{ $ctrl.config.currentWeek.week() }} ({{ $ctrl.config.currentWeek.format('MMMM') }}) </span>
            <md-button ng-if="$ctrl.config.showControls" class="md-primary" ng-click="$ctrl.next('week')">&gt;</md-button>
            <md-button ng-show="$ctrl.config.showViewSwapper" ng-click="$ctrl.switchView()">📅</md-button>
        </div>

        <!-- Day labels -->
        <div class="ova-planning-days-label" layout="row" layout-align="bottom center" ng-class="'theme-' + $ctrl.config.theme">
            <div ng-repeat="day in $ctrl.days" flex layout="column" layout-align="center center">{{ day.date.format($ctrl.config.dayLabelFormat) }}</div>
        </div>

        <!-- Content -->
        <md-content flex="100">
            <div layout>
                <div id="ova-planning-chronoline" layout="column">
                    <div layout="row" layout-align="start center" ng-repeat="time in $ctrl.chronoLine">{{ time.display ? time.date : null }}</div>
                </div>

                <div id="ova-planning-week" flex layout="row">
                    <ova-planning-day flex layout="column" ng-repeat="day in $ctrl.days" date="day.date" data="day.data"></ova-planning-day>
                </div>
            </div>
        </md-content>
    </span>

    <!-- Month view -->
    <span id="month-view" layout="column" flex ng-if="$ctrl.config.viewer === 'month'">
        <!-- Controls -->
        <div class="ova-planning-controls" layout layout-align="start center">
            <div flex layout layout-align="start center">
                <md-button ng-if="$ctrl.config.showControls" class="md-primary" ng-click="$ctrl.previous('month')">&lt;</md-button>
                <span class="label" ng-if="$ctrl.config.showLabel">{{ $ctrl.config.currentWeek.format('MMMM YYYY') }}</span>
                <md-button ng-if="$ctrl.config.showControls" class="md-primary" ng-click="$ctrl.next('month')">&gt;</md-button>
            </div>
            <div flex layout layout-align="end center">
                <md-button ng-show="$ctrl.config.showViewSwapper" ng-click="$ctrl.switchView()">📅 Change view</md-button>
            </div>
        </div>

        <!-- Day labels -->
        <div layout class="ova-planning-days-label" ng-class="'theme-' + $ctrl.config.theme">
            <div flex="10"></div>
            <div flex ng-repeat="label in $ctrl.labels">{{ label }}</div>
        </div>

        <!-- Content -->
        <div style="max-height: 100%" ng-repeat="week in $ctrl.range" layout layout-align="center center" flex>
            <div flex="10" class="week-label" ng-click="$ctrl.collapseToWeek(week.week)" layout-align="center center">
                <strong><i class="icon">🔍</i> Semaine {{ week.week }}</strong>
            </div>
            <div ng-class="{'today': day.date.isSame(moment(), 'day')}" flex layout="column" ng-repeat="day in week.days" class="day" ng-click="$ctrl.config.onClick(day)">
                <div class="day-box" ng-click="$ctrl.config.selectSlot(day)">
                    <ova-planning-view-month ng-repeat="data in day.data" data="data"></ova-planning-view-month>
                </div>
                <div class="ink">{{ day.date.format('D') }}</div>
            </div>
        </div>
    </span>

    <!-- Trimester view -->
    <span id="trimester-view" layout="column" flex ng-if="$ctrl.config.viewer === 'trimester'">
        <!-- Days label -->
        <div layout class="ova-planning-days-label" ng-class="'theme-' + $ctrl.config.theme">
            <div flex ng-repeat="label in $ctrl.labels track by $index">{{ label }}</div>
        </div>
        <!-- Content -->
        <div layout="column" flex>
            <div layout flex>
                <md-content layout="column" ng-class="{'today': col.date.isSame(moment(), $ctrl.columnType)}" class="day" flex ng-repeat="col in $ctrl.cols">
                    <ova-planning-view-trimester ng-repeat="data in col.data" data="data"></ova-planning-view-trimester>
                </md-content>
            </div>
        </div>
    </span>
</div>
<!---->