openmct/src/plugins/timeConductor/DatePicker.vue

/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
<template>
    <div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up c-datetime-picker__wrapper" ref="calendarHolder">
        <a class="c-click-icon icon-calendar"
           @click="togglePicker()"></a>
        <div class="c-menu c-menu--mobile-modal c-datetime-picker"
             v-if="showPicker">
            <div class="c-datetime-picker__close-button">
                <button class="c-click-icon icon-x-in-circle"
                        @click="togglePicker()"></button>
            </div>
            <div class="c-datetime-picker__pager c-pager l-month-year-pager">
                <div class="c-pager__prev c-click-icon icon-arrow-left"
                   @click="changeMonth(-1)"></div>
                <div class="c-pager__month-year">{{model.month}} {{model.year}}</div>
                <div class="c-pager__next c-click-icon icon-arrow-right"
                   @click="changeMonth(1)"></div>
            </div>
            <div class="c-datetime-picker__calendar c-calendar">
                <ul class="c-calendar__row--header l-cal-row">
                    <li v-for="day in ['Su','Mo','Tu','We','Th','Fr','Sa']"
                        :key="day">{{day}}</li>
                </ul>
                <ul class="c-calendar__row--body"
                    v-for="(row, index) in table"
                    :key="index">
                    <li v-for="(cell, index) in row"
                        :key="index"
                        @click="select(cell)"
                        :class="{ 'is-in-month': isInCurrentMonth(cell), selected: isSelected(cell) }">
                        <div class="c-calendar__day--prime">{{cell.day}}</div>
                        <div class="c-calendar__day--sub">{{cell.dayOfYear}}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
    @import "~styles/sass-base";

    /******************************************************** PICKER */
    .c-datetime-picker {
        @include userSelectNone();
        padding: $interiorMarginLg !important;
        display: flex !important; // Override .c-menu display: block;
        flex-direction: column;
        > * + * {
            margin-top: $interiorMargin;
        }

        &__close-button {
            display: none; // Only show when body.phone, see below.
        }

        &__pager {
            flex: 0 0 auto;
        }

        &__calendar {
            border-top: 1px solid $colorInteriorBorder;
            flex: 1 1 auto;
        }
    }

    .c-pager {
        display: grid;
        grid-column-gap: $interiorMargin;
        grid-template-rows: 1fr;
        grid-template-columns: auto 1fr auto;
        align-items: center;

        .c-click-icon {
            font-size: 0.8em;
        }

        &__month-year {
            text-align: center;
        }
    }

    /******************************************************** CALENDAR */
    .c-calendar {
        display: grid;
        grid-template-columns: repeat(7, min-content);
        grid-template-rows: auto;
        grid-gap: 1px;
        height: 100%;

        $mutedOpacity: 0.5;

        ul {
            display: contents;
            &[class*='--header'] {
                pointer-events: none;
                li {
                    opacity: $mutedOpacity;
                }
            }
        }

        li {
            display: flex;
            flex-direction: column;
            justify-content: center !important;
            padding: $interiorMargin;

            &.is-in-month {
                background: $colorMenuElementHilite;
            }
        }

        &__day {
            &--sub {
                opacity: $mutedOpacity;
                font-size: 0.8em;
            }
        }
    }

    /******************************************************** MOBILE */
    body.phone {
        .c-datetime-picker {
            &.c-menu {
                @include modalFullScreen();
            }

            &__close-button {
                display: flex;
                justify-content: flex-end;
            }
        }

        .c-calendar {
            grid-template-columns: repeat(7, auto);
        }
    }
</style>

<script>
import moment from 'moment';

const TIME_NAMES = {
        'hours': "Hour",
        'minutes': "Minute",
        'seconds': "Second"
    };
const MONTHS = moment.months();
const TIME_OPTIONS = (function makeRanges() {
    let arr = [];
    while (arr.length < 60) {
        arr.push(arr.length);
    }
    return {
        hours: arr.slice(0, 24),
        minutes: arr,
        seconds: arr
    };
}());

export default {
    inject: ['openmct'],
    props: {
        defaultDateTime: String,
        formatter: Object
    },
    data: function () {
        return {
            showPicker: false,
            picker: {
                year: undefined,
                month: undefined,
                interacted: false
            },
            model: {
                year: undefined,
                month: undefined,
            },
            table: undefined,
            date: undefined,
            time: undefined
        }
    },
    methods: {
        generateTable() {
            let m = moment.utc({ year: this.picker.year, month: this.picker.month }).day(0),
                table = [],
                row,
                col;

            for (row = 0; row < 6; row += 1) {
                table.push([]);
                for (col = 0; col < 7; col += 1) {
                    table[row].push({
                        year: m.year(),
                        month: m.month(),
                        day: m.date(),
                        dayOfYear: m.dayOfYear()
                    });
                    m.add(1, 'days'); // Next day!
                }
            }

            return table;
        },

        updateViewForMonth() {
            this.model.month = MONTHS[this.picker.month];
            this.model.year = this.picker.year;
            this.table = this.generateTable();
        },

        updateFromModel(defaultDateTime) {
            let m;

            m = moment.utc(defaultDateTime);

            this.date = {
                year: m.year(),
                month: m.month(),
                day: m.date()
            };
            this.time = {
                hours: m.hour(),
                minutes: m.minute(),
                seconds: m.second()
            };

            // Zoom to that date in the picker, but
            // only if the user hasn't interacted with it yet.
            if (!this.picker.interacted) {
                this.picker.year = m.year();
                this.picker.month = m.month();
                this.updateViewForMonth();
            }
        },

        updateFromView() {
            let m = moment.utc({
                year: this.date.year,
                month: this.date.month,
                day: this.date.day,
                hour: this.time.hours,
                minute: this.time.minutes,
                second: this.time.seconds
            });
            this.$emit('date-selected', m.valueOf());
        },

        isInCurrentMonth(cell) {
            return cell.month === this.picker.month;
        },

        isSelected(cell) {
            let date = this.date || {};
            return cell.day === date.day &&
                cell.month === date.month &&
                cell.year === date.year;
        },

        select(cell) {
            this.date = this.date || {};
            this.date.month = cell.month;
            this.date.year = cell.year;
            this.date.day = cell.day;
            this.updateFromView();
            this.showPicker = false;
        },

        dateEquals(d1, d2) {
            return d1.year === d2.year &&
                d1.month === d2.month &&
                d1.day === d2.day;
        },

        changeMonth(delta) {
            this.picker.month += delta;
            if (this.picker.month > 11) {
                this.picker.month = 0;
                this.picker.year += 1;
            }
            if (this.picker.month < 0) {
                this.picker.month = 11;
                this.picker.year -= 1;
            }
            this.picker.interacted = true;
            this.updateViewForMonth();
        },

        nameFor(key) {
            return TIME_NAMES[key];
        },

        optionsFor(key) {
            return TIME_OPTIONS[key];
        },

        hidePicker(event) {
            let path = event.composedPath();
            if (path.indexOf(this.$refs.calendarHolder) === -1) {
                this.showPicker = false;
            }
        },
        
        togglePicker() {
            this.showPicker = !this.showPicker;

            if (this.showPicker) {
                document.addEventListener('click', this.hidePicker, {
                    capture: true
                });
            }
        }
    },
    mounted: function () {
        this.updateFromModel(this.defaultDateTime);
        this.updateViewForMonth();
    },
    destroyed: function () {
        document.addEventListener('click', this.hidePicker, {
            capture: true
        });
    }

}
</script>