deprecated-oc-search/views/schedule.tpl

315 lines
11 KiB
Smarty
Raw Permalink Normal View History

2023-08-26 22:04:56 +02:00
<!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>