zeus
4 years ago
22 changed files with 95 additions and 1343 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 229 KiB |
@ -1 +0,0 @@ |
|||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><link href="/css/app.7ebe4e80.css" rel="preload" as="style"><link href="/css/chunk-vendors.e469b508.css" rel="preload" as="style"><link href="/js/app.d2878685.js" rel="preload" as="script"><link href="/js/chunk-vendors.d8d18fe6.js" rel="preload" as="script"><link href="/css/chunk-vendors.e469b508.css" rel="stylesheet"><link href="/css/app.7ebe4e80.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.d8d18fe6.js"></script><script src="/js/app.d2878685.js"></script></body></html> |
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,416 +0,0 @@ |
|||||
<template> |
|
||||
<div id="app" class="container-fluid"> |
|
||||
|
|
||||
<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-md-center justify-content-start"> |
|
||||
<b-navbar-brand class="logo simple-text ti-swarmlab text-secondary"> |
|
||||
Swarmlab.io |
|
||||
</b-navbar-brand> |
|
||||
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2"> |
|
||||
<ul class="navbar-nav mx-auto text-md-center text-left"> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="#" |
|
||||
@click="hybrid('services')" |
|
||||
> |
|
||||
Manage_Your_Local_LabInstances</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="#"> |
|
||||
| |
|
||||
</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="#" |
|
||||
@click="hybrid('bootstrap')" |
|
||||
>Containers</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="#"> |
|
||||
- |
|
||||
</a> |
|
||||
</li> |
|
||||
<li class="nav-item my-auto"> |
|
||||
<a class="nav-link navbar-brand mx-0 d-none d-md-inline" href="">Hybrid</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="#"> |
|
||||
- |
|
||||
</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="#" |
|
||||
@click="hybrid('connect-server')" |
|
||||
>Config_hybrid_server</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="#"> |
|
||||
| |
|
||||
</a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="#" |
|
||||
@click="hybrid('manage_service')" |
|
||||
> |
|
||||
Manage_Your_hybrid_LabInstances</a> |
|
||||
</li> |
|
||||
</li> |
|
||||
</ul> |
|
||||
<ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap"> |
|
||||
<b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item> |
|
||||
<b-nav-item > | </b-nav-item> |
|
||||
<b-nav-item :href="'https://api-client.swarmlab.io:8088/?token='+ token" target="_swarmlab"> Lab_onDemand </b-nav-item> |
|
||||
<b-nav-item > </b-nav-item> |
|
||||
</ul> |
|
||||
</div> |
|
||||
</nav> |
|
||||
|
|
||||
|
|
||||
<!-- ***************** container items ****************** --> |
|
||||
<b-row |
|
||||
v-show="hybridmenou == 'bootstrap'" |
|
||||
> |
|
||||
<b-col cols="12" > |
|
||||
|
|
||||
<network-table |
|
||||
style="background-color: #f8f9fa" |
|
||||
> |
|
||||
</network-table> |
|
||||
|
|
||||
</b-col> |
|
||||
</b-row> |
|
||||
|
|
||||
<b-row |
|
||||
v-show="hybridmenou == 'services'" |
|
||||
> |
|
||||
<b-col cols="12"> |
|
||||
<services-table |
|
||||
style="background-color: #f8f9fa" |
|
||||
> |
|
||||
</services-table> |
|
||||
|
|
||||
</b-col> |
|
||||
</b-row> |
|
||||
|
|
||||
<b-row |
|
||||
v-show="hybridmenou == 'connect-server'" |
|
||||
> |
|
||||
<b-col cols="12"> |
|
||||
<connect-server |
|
||||
style="background-color: #f8f9fa" |
|
||||
> |
|
||||
</connect-server> |
|
||||
|
|
||||
</b-col> |
|
||||
</b-row> |
|
||||
|
|
||||
<b-row |
|
||||
v-show="hybridmenou == 'manage_service'" |
|
||||
> |
|
||||
<b-col cols="12"> |
|
||||
<manage-services |
|
||||
style="background-color: #f8f9fa" |
|
||||
> |
|
||||
</manage-services> |
|
||||
|
|
||||
</b-col> |
|
||||
</b-row> |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
<div class="d-flex" id="wrapper"> |
|
||||
|
|
||||
<!-- Sidebar max --> |
|
||||
<div class=" bg-light border-right" id="sidebar-wrapper" |
|
||||
v-if="sidemenou == 'max'" |
|
||||
> |
|
||||
<div class=" logo simple-text ti-swarmlab text-secondary sidebar-heading" |
|
||||
@click="onActionMenu('min')" |
|
||||
> |
|
||||
Swarmlab.io |
|
||||
</div> |
|
||||
<div class="list-group list-group-flush" |
|
||||
> |
|
||||
|
|
||||
<!-- Menou Dashboard --> |
|
||||
<b-list-group-item v-b-toggle.hybrid-profile variant="light" name="Dashboard" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('dashboard','')" style="cursor: pointer;" :class="{ active: isActive('dashboard') }"> Dashboard</b-list-group-item> |
|
||||
|
|
||||
<b-collapse id="hybrid-profile" class="m-subm" accordion="m-sidebar" role="tabpanel"> |
|
||||
<b-list-group-item variant="light" name="dashboard" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }"> Profile</b-list-group-item> |
|
||||
<b-list-group-item variant="light" name="Profile" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_profile') }"> Profile</b-list-group-item> |
|
||||
</b-collapse> |
|
||||
|
|
||||
<!-- Menou StandAlone --> |
|
||||
<b-list-group-item v-b-toggle.hybrid-local variant="light" name="Local" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('local','')" style="cursor: pointer;" :class="{ active: isActive('local') }"> Local</b-list-group-item> |
|
||||
|
|
||||
<b-collapse id="hybrid-local" class="m-subm" accordion="m-sidebar" role="tabpanel"> |
|
||||
<b-list-group-item variant="light" name="local" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('local','local_local')" style="cursor: pointer;" :class="{ active: isActiveSub('local_local') }"> Local</b-list-group-item> |
|
||||
<b-list-group-item variant="light" name="Menou" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('local','local_menou')" style="cursor: pointer;" :class="{ active: isActiveSub('local_menou') }"> Menou</b-list-group-item> |
|
||||
</b-collapse> |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Sidebar min --> |
|
||||
<div class="bg-light border-right" id="sidebar-wrapper" |
|
||||
v-if="sidemenou == 'min'" |
|
||||
> |
|
||||
<div class=" ti-layout-slider sidebar-heading" |
|
||||
@click="onActionMenu('max')" |
|
||||
> |
|
||||
</div> |
|
||||
<div class="list-group list-group-flush" |
|
||||
> |
|
||||
<a href="#" class="ti-help list-group-item list-group-item-action bg-light"></a> |
|
||||
<a href="#" class="ti-link list-group-item list-group-item-action bg-light"></a> |
|
||||
<a href="#" class="list-group-item list-group-item-action bg-light"></a> |
|
||||
<a href="#" class="list-group-item list-group-item-action bg-light"></a> |
|
||||
<a href="#" class="list-group-item list-group-item-action bg-light"></a> |
|
||||
<a href="#" class="list-group-item list-group-item-action bg-light"></a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- /#sidebar-wrapper --> |
|
||||
|
|
||||
<!-- Page Content --> |
|
||||
<div id="page-content-wrapper"> |
|
||||
|
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> |
|
||||
<button class="btn btn-primary" > |
|
||||
Max Menu |
|
||||
</button> |
|
||||
<button class="btn btn-primary" > |
|
||||
Min Menu |
|
||||
</button> |
|
||||
|
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> |
|
||||
<span class="navbar-toggler-icon"></span> |
|
||||
</button> |
|
||||
|
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
|
||||
<ul class="navbar-nav ml-auto mt-2 mt-lg-0"> |
|
||||
<li class="nav-item active"> |
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> |
|
||||
</li> |
|
||||
<li class="nav-item"> |
|
||||
<a class="nav-link" href="#">Link</a> |
|
||||
</li> |
|
||||
<li class="nav-item dropdown"> |
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
|
||||
Dropdown |
|
||||
</a> |
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> |
|
||||
<a class="dropdown-item" href="#">Action</a> |
|
||||
<a class="dropdown-item" href="#">Another action</a> |
|
||||
<div class="dropdown-divider"></div> |
|
||||
<a class="dropdown-item" href="#">Something else here</a> |
|
||||
</div> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</div> |
|
||||
</nav> |
|
||||
|
|
||||
<div class="container-fluid"> |
|
||||
<h1 class="mt-4">Simple Sidebar</h1> |
|
||||
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p> |
|
||||
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
<!-- /#page-content-wrapper --> |
|
||||
|
|
||||
</div> |
|
||||
<!-- /#wrapper --> |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import "@/assets/css/themify-icons.css"; |
|
||||
|
|
||||
import ConnectServer from "./components/myconnect-server.vue"; |
|
||||
import NetworkTable from "./components/mynetwork.vue"; |
|
||||
import ServicesTable from "./components/myservices.vue"; |
|
||||
import ManageServices from "./components/manageservices.vue"; |
|
||||
|
|
||||
export default { |
|
||||
name: 'app', |
|
||||
components: { |
|
||||
NetworkTable, |
|
||||
ServicesTable, |
|
||||
ConnectServer, |
|
||||
ManageServices |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
activeItem: '', // menou |
|
||||
activeItemSub: '', //submenou |
|
||||
sidemenou:'max', |
|
||||
hybridmenou:'bootstrap', |
|
||||
show: true, |
|
||||
token: '', |
|
||||
SwarmabAsciiLabTemplate:'' |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
methods: { |
|
||||
onActionMenu(action){ |
|
||||
if(action == 'max'){ |
|
||||
this.sidemenou = 'max' |
|
||||
}else if(action == 'min'){ |
|
||||
this.sidemenou = 'min' |
|
||||
} |
|
||||
console.log(action) |
|
||||
}, |
|
||||
hybrid(action) { |
|
||||
this.hybridmenou = action |
|
||||
console.log(action) |
|
||||
if(action == 'bootstrap'){ |
|
||||
this.$root.$emit('hybrid_refresh_dockerservices') |
|
||||
}else if(action == 'connect-server'){ |
|
||||
this.$root.$emit('hybrid_connect_server') |
|
||||
}else if(action == 'services'){ |
|
||||
this.$root.$emit('hybrid_refresh_availableservices') |
|
||||
}else if(action == 'manage_service'){ |
|
||||
//this.$root.$emit('hybrid_manage_service') |
|
||||
} |
|
||||
}, |
|
||||
isActive: function (menuItem) { |
|
||||
console.log('active ' + menuItem); |
|
||||
return this.activeItem === menuItem |
|
||||
}, |
|
||||
isActiveSub: function (menuItem) { |
|
||||
console.log('activesub ' + menuItem); |
|
||||
return this.activeItemSub === menuItem |
|
||||
}, |
|
||||
setActive: function (menuItem,menuItemSub) { |
|
||||
console.log('set ' + menuItem); |
|
||||
this.activeItem = menuItem // no need for Vue.set() |
|
||||
this.activeItemSub = menuItemSub // no need for Vue.set() |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
.active { |
|
||||
background-color: #e7e7e7 !important; |
|
||||
color: #0c5460 !important; |
|
||||
} |
|
||||
|
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:400,700'); |
|
||||
|
|
||||
|
|
||||
body { |
|
||||
background: #EEF1F4 !important; |
|
||||
} |
|
||||
|
|
||||
.nav-background { |
|
||||
background: #353535; |
|
||||
} |
|
||||
|
|
||||
.ti-swarmlab:before { |
|
||||
position: relative; |
|
||||
top:-5px; |
|
||||
right:-8px; |
|
||||
font-size: 1.5em; |
|
||||
font-weight: 300; |
|
||||
content: "\e606"; |
|
||||
color: #222; |
|
||||
color: #74B3C8; |
|
||||
border-color: #c60000; |
|
||||
} |
|
||||
|
|
||||
.ti-themify-logo:before { |
|
||||
content: "\e6d1"; |
|
||||
} |
|
||||
|
|
||||
.menoutext { |
|
||||
font-family: 'Lato', sans-serif !important; |
|
||||
} |
|
||||
|
|
||||
.mycontainer { |
|
||||
padding-right: 20px !important; |
|
||||
padding-left: 5px !important; |
|
||||
margin-right:auto; |
|
||||
margin-left:auto |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.m-subm { |
|
||||
width: 100%; |
|
||||
border-left: 4px solid #4b4ba3;; |
|
||||
background-color: #f0f0f0; |
|
||||
border-top: none; |
|
||||
border-bottom: none; |
|
||||
border-right: none; |
|
||||
|
|
||||
} |
|
||||
.m-subm-card { |
|
||||
padding-left: 0px; |
|
||||
padding-right: 0px; |
|
||||
padding-top: 0px; |
|
||||
padding-bottom: 0px; |
|
||||
background-color: #f0f0f0; |
|
||||
border-top: none; |
|
||||
border-bottom: none; |
|
||||
border-left: none; |
|
||||
border-right: none; |
|
||||
margin-bottom: 0px; |
|
||||
margin-top: 0px; |
|
||||
} |
|
||||
.m-subm-listgroup { |
|
||||
width: 100%; |
|
||||
//border-left: 4px solid #4b4ba3; |
|
||||
background-color: #f0f0f0; |
|
||||
border-top: none; |
|
||||
border-bottom: none; |
|
||||
border-right: none; |
|
||||
border-left: none; |
|
||||
padding-left: 2.25rem; |
|
||||
} |
|
||||
|
|
||||
.m-subm-listgroup:hover { |
|
||||
background-color: #e7e7e7; |
|
||||
font-weight: 580; |
|
||||
} |
|
||||
.m-subm-listgroup:focus { |
|
||||
background-color: #e7e7e7; |
|
||||
color:#393982; |
|
||||
font-weight: 580; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
</style> |
|
||||
@ -1,410 +0,0 @@ |
|||||
<template> |
|
||||
<div id="app"> |
|
||||
<div class="calendar-controls"> |
|
||||
<div v-if="message" class="notification is-success">{{ message }}</div> |
|
||||
|
|
||||
<div class="box"> |
|
||||
<h4 class="title is-5">Play with the options!</h4> |
|
||||
|
|
||||
<div class="field"> |
|
||||
<label class="label">Period UOM</label> |
|
||||
<div class="control"> |
|
||||
<div class="select"> |
|
||||
<select v-model="displayPeriodUom"> |
|
||||
<option>month</option> |
|
||||
<option>week</option> |
|
||||
<option>year</option> |
|
||||
</select> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="field"> |
|
||||
<label class="label">Period Count</label> |
|
||||
<div class="control"> |
|
||||
<div class="select"> |
|
||||
<select v-model="displayPeriodCount"> |
|
||||
<option :value="1">1</option> |
|
||||
<option :value="2">2</option> |
|
||||
<option :value="3">3</option> |
|
||||
</select> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="field"> |
|
||||
<label class="label">Starting day of the week</label> |
|
||||
<div class="control"> |
|
||||
<div class="select"> |
|
||||
<select v-model="startingDayOfWeek"> |
|
||||
<option v-for="(d, index) in dayNames" :key="index" :value="index"> |
|
||||
{{ d }} |
|
||||
</option> |
|
||||
</select> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="field"> |
|
||||
<label class="checkbox"> |
|
||||
<input v-model="useTodayIcons" type="checkbox" /> |
|
||||
Use icon for today's period |
|
||||
</label> |
|
||||
</div> |
|
||||
|
|
||||
<div class="field"> |
|
||||
<label class="checkbox"> |
|
||||
<input v-model="displayWeekNumbers" type="checkbox" /> |
|
||||
Show week number |
|
||||
</label> |
|
||||
</div> |
|
||||
|
|
||||
<div class="field"> |
|
||||
<label class="checkbox"> |
|
||||
<input v-model="showTimes" type="checkbox" /> |
|
||||
Show times |
|
||||
</label> |
|
||||
</div> |
|
||||
|
|
||||
<div class="field"> |
|
||||
<label class="label">Themes</label> |
|
||||
<label class="checkbox"> |
|
||||
<input v-model="useDefaultTheme" type="checkbox" /> |
|
||||
Default |
|
||||
</label> |
|
||||
</div> |
|
||||
|
|
||||
<div class="field"> |
|
||||
<label class="checkbox"> |
|
||||
<input v-model="useHolidayTheme" type="checkbox" /> |
|
||||
Holidays |
|
||||
</label> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="box"> |
|
||||
<div class="field"> |
|
||||
<label class="label">Title</label> |
|
||||
<div class="control"> |
|
||||
<input v-model="newItemTitle" class="input" type="text" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="field"> |
|
||||
<label class="label">Start date</label> |
|
||||
<div class="control"> |
|
||||
<input v-model="newItemStartDate" class="input" type="date" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="field"> |
|
||||
<label class="label">End date</label> |
|
||||
<div class="control"> |
|
||||
<input v-model="newItemEndDate" class="input" type="date" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<button class="button is-info" @click="clickTestAddItem">Add Item</button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="calendar-parent"> |
|
||||
<calendar-view |
|
||||
:items="items" |
|
||||
:show-date="showDate" |
|
||||
:time-format-options="{ hour: 'numeric', minute: '2-digit' }" |
|
||||
:enable-drag-drop="true" |
|
||||
:disable-past="disablePast" |
|
||||
:disable-future="disableFuture" |
|
||||
:show-times="showTimes" |
|
||||
:date-classes="myDateClasses" |
|
||||
:display-period-uom="displayPeriodUom" |
|
||||
:display-period-count="displayPeriodCount" |
|
||||
:starting-day-of-week="startingDayOfWeek" |
|
||||
:class="themeClasses" |
|
||||
:period-changed-callback="periodChanged" |
|
||||
:current-period-label="useTodayIcons ? 'icons' : ''" |
|
||||
:displayWeekNumbers="displayWeekNumbers" |
|
||||
:enable-date-selection="true" |
|
||||
:selection-start="selectionStart" |
|
||||
:selection-end="selectionEnd" |
|
||||
@date-selection-start="setSelection" |
|
||||
@date-selection="setSelection" |
|
||||
@date-selection-finish="finishSelection" |
|
||||
@drop-on-date="onDrop" |
|
||||
@click-date="onClickDay" |
|
||||
@click-item="onClickItem" |
|
||||
> |
|
||||
<template #header="{ headerProps }"> |
|
||||
<calendar-view-header slot="header" :header-props="headerProps" @input="setShowDate" /> |
|
||||
</template> |
|
||||
</calendar-view> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
|
|
||||
import { CalendarView, CalendarViewHeader, CalendarMath } from "vue-simple-calendar"; |
|
||||
import 'vue-simple-calendar/dist/style.css' |
|
||||
// The next two lines are optional themes |
|
||||
import "vue-simple-calendar/static/css/default.css" |
|
||||
import "vue-simple-calendar/static/css/holidays-us.css" |
|
||||
|
|
||||
|
|
||||
export default { |
|
||||
name: "App", |
|
||||
components: { |
|
||||
CalendarView, |
|
||||
CalendarViewHeader, |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
/* Show the current month, and give it some fake items to show */ |
|
||||
showDate: this.thisMonth(1), |
|
||||
message: "", |
|
||||
startingDayOfWeek: 0, |
|
||||
disablePast: false, |
|
||||
disableFuture: false, |
|
||||
displayPeriodUom: "month", |
|
||||
displayPeriodCount: 1, |
|
||||
displayWeekNumbers: false, |
|
||||
showTimes: true, |
|
||||
selectionStart: null, |
|
||||
selectionEnd: null, |
|
||||
newItemTitle: "", |
|
||||
newItemStartDate: "", |
|
||||
newItemEndDate: "", |
|
||||
useDefaultTheme: true, |
|
||||
useHolidayTheme: true, |
|
||||
useTodayIcons: false, |
|
||||
items: [ |
|
||||
{ |
|
||||
id: "e0", |
|
||||
startDate: "2018-01-05", |
|
||||
}, |
|
||||
{ |
|
||||
id: "e1", |
|
||||
startDate: this.thisMonth(15, 18, 30), |
|
||||
}, |
|
||||
{ |
|
||||
id: "e2", |
|
||||
startDate: this.thisMonth(15), |
|
||||
title: "Single-day item with a long title", |
|
||||
}, |
|
||||
{ |
|
||||
id: "e3", |
|
||||
startDate: this.thisMonth(7, 9, 25), |
|
||||
endDate: this.thisMonth(10, 16, 30), |
|
||||
title: "Multi-day item with a long title and times", |
|
||||
}, |
|
||||
{ |
|
||||
id: "e4", |
|
||||
startDate: this.thisMonth(20), |
|
||||
title: "My Birthday!", |
|
||||
classes: "birthday", |
|
||||
url: "https://en.wikipedia.org/wiki/Birthday", |
|
||||
}, |
|
||||
{ |
|
||||
id: "e5", |
|
||||
startDate: this.thisMonth(5), |
|
||||
endDate: this.thisMonth(12), |
|
||||
title: "Multi-day item", |
|
||||
classes: "purple", |
|
||||
}, |
|
||||
{ |
|
||||
id: "foo", |
|
||||
startDate: this.thisMonth(29), |
|
||||
title: "Same day 1", |
|
||||
}, |
|
||||
{ |
|
||||
id: "e6", |
|
||||
startDate: this.thisMonth(29), |
|
||||
title: "Same day 2", |
|
||||
classes: "orange", |
|
||||
}, |
|
||||
{ |
|
||||
id: "e7", |
|
||||
startDate: this.thisMonth(29), |
|
||||
title: "Same day 3", |
|
||||
}, |
|
||||
{ |
|
||||
id: "e8", |
|
||||
startDate: this.thisMonth(29), |
|
||||
title: "Same day 4", |
|
||||
classes: "orange", |
|
||||
}, |
|
||||
{ |
|
||||
id: "e9", |
|
||||
startDate: this.thisMonth(29), |
|
||||
title: "Same day 5", |
|
||||
}, |
|
||||
{ |
|
||||
id: "e10", |
|
||||
startDate: this.thisMonth(29), |
|
||||
title: "Same day 6", |
|
||||
classes: "orange", |
|
||||
}, |
|
||||
{ |
|
||||
id: "e11", |
|
||||
startDate: this.thisMonth(29), |
|
||||
title: "Same day 7", |
|
||||
}, |
|
||||
], |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
userLocale() { |
|
||||
return CalendarMath.getDefaultBrowserLocale |
|
||||
}, |
|
||||
dayNames() { |
|
||||
return CalendarMath.getFormattedWeekdayNames(this.userLocale, "long", 0) |
|
||||
}, |
|
||||
themeClasses() { |
|
||||
return { |
|
||||
"theme-default": this.useDefaultTheme, |
|
||||
"holiday-us-traditional": this.useHolidayTheme, |
|
||||
"holiday-us-official": this.useHolidayTheme, |
|
||||
} |
|
||||
}, |
|
||||
myDateClasses() { |
|
||||
// This was added to demonstrate the dateClasses prop. Note in particular that the |
|
||||
// keys of the object are `yyyy-mm-dd` ISO date strings (not dates), and the values |
|
||||
// for those keys are strings or string arrays. Keep in mind that your CSS to style these |
|
||||
// may need to be fairly specific to make it override your theme's styles. See the |
|
||||
// CSS at the bottom of this component to see how these are styled. |
|
||||
const o = {} |
|
||||
const theFirst = this.thisMonth(1) |
|
||||
const ides = [2, 4, 6, 9].includes(theFirst.getMonth()) ? 15 : 13 |
|
||||
const idesDate = this.thisMonth(ides) |
|
||||
o[CalendarMath.isoYearMonthDay(idesDate)] = "ides" |
|
||||
o[CalendarMath.isoYearMonthDay(this.thisMonth(21))] = ["do-you-remember", "the-21st"] |
|
||||
return o |
|
||||
}, |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.newItemStartDate = CalendarMath.isoYearMonthDay(CalendarMath.today()) |
|
||||
this.newItemEndDate = CalendarMath.isoYearMonthDay(CalendarMath.today()) |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
periodChanged() { |
|
||||
// range, eventSource) { |
|
||||
// Demo does nothing with this information, just including the method to demonstrate how |
|
||||
// you can listen for changes to the displayed range and react to them (by loading items, etc.) |
|
||||
//console.log(eventSource) |
|
||||
//console.log(range) |
|
||||
}, |
|
||||
thisMonth(d, h, m) { |
|
||||
const t = new Date() |
|
||||
return new Date(t.getFullYear(), t.getMonth(), d, h || 0, m || 0) |
|
||||
}, |
|
||||
onClickDay(d) { |
|
||||
this.selectionStart = null |
|
||||
this.selectionEnd = null |
|
||||
this.message = `You clicked: ${d.toLocaleDateString()}` |
|
||||
}, |
|
||||
onClickItem(e) { |
|
||||
this.message = `You clicked: ${e.title}` |
|
||||
}, |
|
||||
setShowDate(d) { |
|
||||
this.message = `Changing calendar view to ${d.toLocaleDateString()}` |
|
||||
this.showDate = d |
|
||||
}, |
|
||||
setSelection(dateRange) { |
|
||||
this.selectionEnd = dateRange[1] |
|
||||
this.selectionStart = dateRange[0] |
|
||||
}, |
|
||||
finishSelection(dateRange) { |
|
||||
this.setSelection(dateRange) |
|
||||
this.message = `You selected: ${this.selectionStart.toLocaleDateString()} -${this.selectionEnd.toLocaleDateString()}` |
|
||||
}, |
|
||||
onDrop(item, date) { |
|
||||
this.message = `You dropped ${item.id} on ${date.toLocaleDateString()}` |
|
||||
// Determine the delta between the old start date and the date chosen, |
|
||||
// and apply that delta to both the start and end date to move the item. |
|
||||
const eLength = CalendarMath.dayDiff(item.startDate, date) |
|
||||
item.originalItem.startDate = CalendarMath.addDays(item.startDate, eLength) |
|
||||
item.originalItem.endDate = CalendarMath.addDays(item.endDate, eLength) |
|
||||
}, |
|
||||
clickTestAddItem() { |
|
||||
this.items.push({ |
|
||||
startDate: this.newItemStartDate, |
|
||||
endDate: this.newItemEndDate, |
|
||||
title: this.newItemTitle, |
|
||||
id: "e" + Math.random().toString(36).substr(2, 10), |
|
||||
}) |
|
||||
this.message = "You added a calendar item!" |
|
||||
}, |
|
||||
}, |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
html, |
|
||||
body { |
|
||||
height: 100%; |
|
||||
margin: 0; |
|
||||
background-color: #f7fcff; |
|
||||
} |
|
||||
|
|
||||
#app { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
font-family: Calibri, sans-serif; |
|
||||
width: 95vw; |
|
||||
min-width: 30rem; |
|
||||
max-width: 100rem; |
|
||||
min-height: 40rem; |
|
||||
margin-left: auto; |
|
||||
margin-right: auto; |
|
||||
} |
|
||||
|
|
||||
.calendar-controls { |
|
||||
margin-right: 1rem; |
|
||||
min-width: 14rem; |
|
||||
max-width: 14rem; |
|
||||
} |
|
||||
|
|
||||
.calendar-parent { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
flex-grow: 1; |
|
||||
overflow-x: hidden; |
|
||||
overflow-y: hidden; |
|
||||
max-height: 80vh; |
|
||||
background-color: white; |
|
||||
} |
|
||||
|
|
||||
/* For long calendars, ensure each week gets sufficient height. The body of the calendar will scroll if needed */ |
|
||||
.cv-wrapper.period-month.periodCount-2 .cv-week, |
|
||||
.cv-wrapper.period-month.periodCount-3 .cv-week, |
|
||||
.cv-wrapper.period-year .cv-week { |
|
||||
min-height: 6rem; |
|
||||
} |
|
||||
|
|
||||
/* These styles are optional, to illustrate the flexbility of styling the calendar purely with CSS. */ |
|
||||
|
|
||||
/* Add some styling for items tagged with the "birthday" class */ |
|
||||
.theme-default .cv-item.birthday { |
|
||||
background-color: #e0f0e0; |
|
||||
border-color: #d7e7d7; |
|
||||
} |
|
||||
|
|
||||
.theme-default .cv-item.birthday::before { |
|
||||
content: "\1F382"; /* Birthday cake */ |
|
||||
margin-right: 0.5em; |
|
||||
} |
|
||||
|
|
||||
/* The following classes style the classes computed in myDateClasses and passed to the component's dateClasses prop. */ |
|
||||
.theme-default .cv-day.ides { |
|
||||
background-color: #ffe0e0; |
|
||||
} |
|
||||
|
|
||||
.ides .cv-day-number::before { |
|
||||
content: "\271D"; |
|
||||
} |
|
||||
|
|
||||
.cv-day.do-you-remember.the-21st .cv-day-number::after { |
|
||||
content: "\1F30D\1F32C\1F525"; |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
Loading…
Reference in new issue