last demo import - cleaned
This commit is contained in:
ycc
315
views/schedule.tpl
Normal file
315
views/schedule.tpl
Normal file
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>o-search</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<!--Import Google Icon Font-->
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/material-icons.css">
|
||||
<!--Import materialize.css-->
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection" />
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<style>
|
||||
|
||||
.small {
|
||||
font-size: x-small;
|
||||
}
|
||||
#calendar {
|
||||
position: fixed;
|
||||
top: 15%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.popper, .tooltip {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
background: #FFC107;
|
||||
color: black;
|
||||
width: 250px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px rgba(0,0,0,0.5);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.style5 .tooltip {
|
||||
background: #1E252B;
|
||||
color: #FFFFFF;
|
||||
max-width: 200px;
|
||||
width: auto;
|
||||
font-size: .8rem;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
.popper .popper__arrow,
|
||||
.tooltip .tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-arrow,
|
||||
.popper .popper__arrow {
|
||||
border-color: #FFC107;
|
||||
}
|
||||
.style5 .tooltip .tooltip-arrow {
|
||||
border-color: #1E252B;
|
||||
}
|
||||
.popper[x-placement^="top"],
|
||||
.tooltip[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.popper[x-placement^="top"] .popper__arrow,
|
||||
.tooltip[x-placement^="top"] .tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.popper[x-placement^="bottom"],
|
||||
.tooltip[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tooltip[x-placement^="bottom"] .tooltip-arrow,
|
||||
.popper[x-placement^="bottom"] .popper__arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tooltip[x-placement^="right"],
|
||||
.popper[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.popper[x-placement^="right"] .popper__arrow,
|
||||
.tooltip[x-placement^="right"] .tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.popper[x-placement^="left"],
|
||||
.tooltip[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.popper[x-placement^="left"] .popper__arrow,
|
||||
.tooltip[x-placement^="left"] .tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
|
||||
<link href='/static/fullcalendar/main.css' rel='stylesheet' />
|
||||
<script type="text/javascript" src="/static/js/popper.min.js"></script>
|
||||
<script type="text/javascript" src="/static/js/tooltip.min.js"></script>
|
||||
<script src='/static/fullcalendar/main.js'></script>
|
||||
{{ template "swagger.tpl" . }}
|
||||
<script type = "text/javascript">
|
||||
|
||||
window.onload = initCalendar
|
||||
|
||||
function initCalendar() {
|
||||
|
||||
var data = [];
|
||||
var date = new Date().toISOString();
|
||||
|
||||
var d = new Date();
|
||||
var dateMore = d.setDate(d.getDate() + 35);
|
||||
dateMore = new Date(dateMore).toISOString()
|
||||
|
||||
oc_catalog_api.then(client => {
|
||||
client.apis
|
||||
.schedule
|
||||
.ScheduleController_Get_schedules({
|
||||
startDate: date,
|
||||
stopDate: dateMore
|
||||
})
|
||||
.then(response => {
|
||||
|
||||
response.body
|
||||
.forEach(elem => {
|
||||
data.push(elem)
|
||||
displayData = elem.Workflow.toString().split('.')
|
||||
})
|
||||
|
||||
var calendarEl = document.getElementById('calendar');
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
height: '85%',
|
||||
selectable: true,
|
||||
firstDay: 1,
|
||||
eventDidMount: function(info) {
|
||||
var tooltip = new Tooltip(info.el, {
|
||||
title: info.event.extendedProps.description,
|
||||
placement: 'top',
|
||||
trigger: 'hover',
|
||||
container: 'body'
|
||||
});
|
||||
},
|
||||
views: {
|
||||
dayGrid: {
|
||||
titleFormat: {
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
}
|
||||
},
|
||||
timeGrid: {
|
||||
titleFormat: {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
},
|
||||
},
|
||||
},
|
||||
customButtons: {
|
||||
nextEvent: {
|
||||
text: 'Next Event',
|
||||
click: function () {
|
||||
oc_catalog_api.then(client => {
|
||||
client.apis
|
||||
.schedule
|
||||
.ScheduleController_Get_next_schedule({
|
||||
baseDate: date
|
||||
})
|
||||
.then(response => {
|
||||
if (response.body == null) {
|
||||
calendar.gotoDate(date)
|
||||
alert("No next schedules")
|
||||
} else {
|
||||
calendar.gotoDate(response.body)
|
||||
date = new Date(response.body)
|
||||
date.setDate(date.getDate() + 1)
|
||||
}
|
||||
})
|
||||
.catch((error) => {});
|
||||
});
|
||||
}
|
||||
},
|
||||
previousEvent: {
|
||||
text: 'Previous Event',
|
||||
click: function () {
|
||||
oc_catalog_api.then(client => {
|
||||
client.apis
|
||||
.schedule
|
||||
.ScheduleController_Get_previous_schedule({
|
||||
baseDate: date
|
||||
})
|
||||
.then(response => {
|
||||
if (response.body == null) {
|
||||
calendar.gotoDate(date)
|
||||
alert("No previous schedules")
|
||||
} else {
|
||||
calendar.gotoDate(response.body)
|
||||
date = new Date(response.body)
|
||||
date.setDate(date.getDate() - 1)
|
||||
}
|
||||
})
|
||||
.catch((error) => {});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
headerToolbar: {
|
||||
left: ',previousEvent, ,prev, ,today, ,next, ,nextEvent,',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
||||
},
|
||||
initialView: 'dayGridMonth',
|
||||
})
|
||||
var eventTitle;
|
||||
var eventStart;
|
||||
var eventEnd;
|
||||
|
||||
data.forEach(elem => {
|
||||
eventTitle = elem.Workflow.split(".")[2]
|
||||
eventStart = elem.StartDate
|
||||
eventEnd = elem.StopDate
|
||||
var cpus = elem.ResourceQty.cpus;
|
||||
var gpus = elem.ResourceQty.gpus;
|
||||
var ram = elem.ResourceQty.ram;
|
||||
calendar.addEvent({
|
||||
title: eventTitle,
|
||||
description:
|
||||
'cpus: ' + cpus + ' | ' +
|
||||
'gpus: ' + gpus + ' | ' +
|
||||
'ram: ' + ram ,
|
||||
start: eventStart,
|
||||
end: eventEnd,
|
||||
backgroundColor: stringToColour(eventTitle),
|
||||
borderColor: stringToColour(eventTitle),
|
||||
textColor: '',
|
||||
});
|
||||
});
|
||||
calendar.render();
|
||||
})
|
||||
.catch((error) => {
|
||||
var calendarEl = document.getElementById('calendar');
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
initialView: 'dayGridMonth'
|
||||
});
|
||||
calendar.render();
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
// Determine color of eventTitle
|
||||
var stringToColour = function (str) {
|
||||
var hash = 0;
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
var colour = '#';
|
||||
for (var i = 0; i < 3; i++) {
|
||||
var value = (hash >> (i * 8)) & 0xFF;
|
||||
colour += ('00' + value.toString(16)).substr(-2);
|
||||
}
|
||||
return colour;
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.tooltipped').tooltip();
|
||||
$('.fixed-action-btn').floatingActionButton({direction: 'bottom'});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
{{ template "floating_menu.tpl" . }}
|
||||
|
||||
<div class="row">
|
||||
<div class="col s4">
|
||||
<a href="/"><img src="/static/img/O-cloud.svg" width="40%" height="auto"/></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id='calendar'></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/static/js/materialize.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user