109 lines
4.7 KiB
HTML
109 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<meta name="msapplication-tap-highlight" content="no">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
|
|
<title>Next-Gen Hotline Planner</title>
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
|
|
<link href="https://cdn.jsdelivr.net/npm/quasar@2.14.2/dist/quasar.prod.css" rel="stylesheet" type="text/css">
|
|
<link href="css/style.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
<body>
|
|
<div id="q-app">
|
|
<!-- Main Layout -->
|
|
<q-layout view="hHh lpR fFf">
|
|
|
|
<!-- Header -->
|
|
<q-header elevated class="bg-white text-primary" height-hint="98">
|
|
<q-toolbar>
|
|
<q-btn dense flat round icon="menu" @click="toggleLeftDrawer"></q-btn>
|
|
|
|
<q-toolbar-title class="text-weight-bold">
|
|
<q-avatar size="32px" class="q-mr-sm">
|
|
<img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">
|
|
</q-avatar>
|
|
Hotline Planner
|
|
</q-toolbar-title>
|
|
|
|
<!-- User Presence (Mock) -->
|
|
<div class="row q-gutter-sm items-center gt-xs">
|
|
<q-avatar size="28px" v-for="n in 3" :key="n" class="cursor-pointer">
|
|
<img :src="`https://i.pravatar.cc/150?u=${n}`">
|
|
<q-tooltip>User {{ n }}</q-tooltip>
|
|
</q-avatar>
|
|
<q-btn flat round dense icon="more_vert" class="text-grey-7"></q-btn>
|
|
</div>
|
|
</q-toolbar>
|
|
|
|
<!-- Filter/Navigation Bar -->
|
|
<q-toolbar class="bg-grey-1 text-grey-9 shadow-1" style="min-height: 40px;">
|
|
<q-btn-group flat>
|
|
<q-btn flat label="Today" size="sm" color="primary"></q-btn>
|
|
<q-btn flat icon="chevron_left" size="sm"></q-btn>
|
|
<q-btn flat icon="chevron_right" size="sm"></q-btn>
|
|
<span class="text-caption q-ml-sm q-mt-xs">{{ currentMonthYear }}</span>
|
|
</q-btn-group>
|
|
|
|
<q-space></q-space>
|
|
|
|
<q-input dense outlined v-model="search" placeholder="Filter Agents..." class="q-mr-md" style="width: 200px">
|
|
<template v-slot:append>
|
|
<q-icon name="search" size="xs"></q-icon>
|
|
</template>
|
|
</q-input>
|
|
|
|
<q-btn-dropdown flat label="View" size="sm" no-caps>
|
|
<q-list>
|
|
<q-item clickable v-close-popup>
|
|
<q-item-section>Day View</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup>
|
|
<q-item-section>Week View</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup>
|
|
<q-item-section>Month View</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<!-- Sidebar (Drawer) for Complex Inputs -->
|
|
<q-drawer v-model="leftDrawerOpen" side="right" overlay bordered behavior="mobile" :width="320">
|
|
<sidebar-component
|
|
:selected-cell="selectedCell"
|
|
@update-cell="updateCellData"
|
|
@close="leftDrawerOpen = false">
|
|
</sidebar-component>
|
|
</q-drawer>
|
|
|
|
<!-- Main Content -->
|
|
<q-page-container class="bg-grey-1">
|
|
<grid-component
|
|
:date-range="dateRange"
|
|
:agents="agents"
|
|
@select-cell="handleCellSelection">
|
|
</grid-component>
|
|
</q-page-container>
|
|
|
|
</q-layout>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/quasar@2.14.2/dist/quasar.umd.prod.js"></script>
|
|
|
|
<!-- Components -->
|
|
<script src="js/components/GridComponent.js"></script>
|
|
<script src="js/components/Sidebar.js"></script>
|
|
|
|
<!-- Main App -->
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|