Vue.component("logger-list-menu", {
template: '<template>     <div style="display: flex;">         <div style="display: flex; justify-content: flex-start;">             <div style="max-width: 220px; min-width: 220px; text-align: end;">                 <q-btn-dropdown split flat dropdown-icon="icon-eo-down-open" color="primary" :label="load_trace === false ? \'load topics\' : \'load topics & traces\'" @click="list_menu_on_set(\'current\')">                     <q-list>                         <q-item clickable v-close-popup @click="list_menu_on_set(false)">                             <q-item-section>                                 <q-item-label>load topics</q-item-label>                             </q-item-section>                         </q-item>                         <q-item clickable v-close-popup @click="list_menu_on_set(true)">                             <q-item-section>                                 <q-item-label>load topics & traces</q-item-label>                             </q-item-section>                         </q-item>                     </q-list>                 </q-btn-dropdown>             </div>              <div style="max-width: 180px; min-width: 180px; text-align: end; margin: 0px 0px 0px 10px;">                 <q-btn-dropdown split style="width: 180px;" flat dropdown-icon="icon-eo-down-open" color="primary" :label="period ? period.label : \'\'" @click = "list_menu_on_period(\'current\')">                     <q-list>                         <q-item clickable v-close-popup @click="list_menu_on_period(-10)">                             <q-item-section>                                 <q-item-label>last 10 minutes</q-item-label>                             </q-item-section>                         </q-item>                         <q-item clickable v-close-popup @click="list_menu_on_period(-60)">                             <q-item-section>                                 <q-item-label>last 1 hour</q-item-label>                             </q-item-section>                         </q-item>                         <q-item clickable v-close-popup @click="list_menu_on_period(-1440)">                             <q-item-section>                                 <q-item-label>last 24 hours</q-item-label>                             </q-item-section>                         </q-item>                         <q-item clickable v-close-popup @click="list_menu_on_period(undefined)">                             <q-item-section>                                 <q-item-label>custom date</q-item-label>                             </q-item-section>                         </q-item>                     </q-list>                 </q-btn-dropdown>             </div>              <div style="max-width: 180px; min-width: 180px; margin: 0px 0px 0px 10px;">                 <q-btn-group flat v-show="calendar_visible">                     <q-btn flat color="primary" size="xs" icon="icon-el-left-open" style="width: 30px;" @click="list_menu_on_calendar_move(-1)"></q-btn>                     <q-btn style="width: 120px;" flat color="primary" :label = "vvs.formatDate(calendar, 23)">                         <q-menu v-model="calendar_popup_visible">                             <q-date v-model="calendar" @input="list_menu_on_calendar"></q-date>                         </q-menu>                     </q-btn>                     <q-btn flat color="primary" size="xs" icon="icon-el-right-open" style="width: 30px;" @click="list_menu_on_calendar_move(1)"></q-btn>                 </q-btn-group>             </div>         </div>         <div style="display: flex; justify-content: flex-end; width: 100%;">             <q-btn style="margin: 0px 0px 0px 10px; width: 100px;" flat color="info" label="sign out" @click="emit(\'sign_out\')"></q-btn>         </div>               </div> </template>',
data :function () {
    return {
        filter: '',
        calendar: undefined,
        calendar_visible: false,
        calendar_popup_visible: false,
        period: undefined,
        period_list: [
            {
                label: 'last 10 minutes',
                value: -10
            },
            {
                label: 'last 1 hour',
                value: -60
            },
            {
                label: 'last 24 hours',
                value: -1440
            },
            {
                label: 'custom date',
                value: undefined
            }
        ],
        load_trace: false
    };
},
methods :{
    list_menu_on_set(load_trace) {
        if (load_trace !== 'current') {
            this.load_trace = load_trace;
        }
        this.emit('period', this.period.value ? this.period.value : this.calendar, this.load_trace);
    },
    list_menu_on_period(value) {
        if (value !== 'current') {
            if (value) {
                this.period = this.period_list.find(f => f.value === value);
                this.calendar_popup_visible = false;
                this.calendar_visible = false;
                this.emit('period', this.period.value, this.load_trace);
            } else {
                this.period = this.period_list.find(f => typeof f.value === 'undefined');
                this.calendar_visible = true;
                this.calendar_popup_visible = true;
            }
        } else {
            this.emit('period', this.period.value ? this.period.value : this.calendar, this.load_trace);
        }
    },
    list_menu_on_calendar() {
        this.calendar_popup_visible = false;
        this.emit('period', this.calendar, this.load_trace);
    },
    list_menu_on_calendar_move(step) {
        if (!step)
            return;
        this.calendar = vvs.formatDate(vvs.dateAdd('day', step, this.calendar), 111);
        this.emit('period', this.calendar, this.load_trace);
    },
    emit(command, period, load_trace) {
        this.$emit('event', {
            command: command,
            period: period,
            load_trace: load_trace
        });
    }
},
mounted :function () {
    this.calendar = vvs.formatDate(new Date(), 111);
    this.$nextTick(function () {
        this.list_menu_on_period(-10);
    });
}
})