315 lines
11 KiB
Smarty
315 lines
11 KiB
Smarty
|
<!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>
|