<!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>