<?php 
session_start();
?>
<head>
	<title>Visualsoft Office Manager - Ημερολόγιο</title>
	<link href="logos/ofm1.ico" rel="shortcut icon" type="image/x-icon"> 
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">	
</head>
<?php  
if($_SESSION['CheckPWD']==false){ header("Location: login.php"); }
error_reporting(E_ALL); ini_set('display_errors', 1);

$myTopCaption_Text=" ΣΗΜΕΙΩΣΕΙΣ-ΕΚΚΡΕΜΟΤΗΤΕΣ ";
$MyFormName=str_replace('.php', '', basename($_SERVER['PHP_SELF']));
$MyADDFormName="notes_add";$w=950;$h=420;
$MyIDFieldName="IDNote";
$tblName='notes';
$ListExist=true;
$prefix="notes_list@";
$FocusField=$prefix."FindWhat";
$IDcField="";
$RequiredField="";
##$PeriodosGroupName=$prefix."PeriodosName";
##$Periodos="week";
$frmOpenNew='"'.$MyIDFieldName.'","0","'.$MyADDFormName.'",'.$w.','.$h ;
 
include 'include/header.php';
?>

<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- <title>HTML5/JavaScript Event Calendar (Open-Source)</title> -->

  <style type="text/css">
      p, body, td, input, select { font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-size: 14px; }
      body { padding: 0px; margin: 0px; background-color: #ffffff; }
      a { color: #1155a3; }
      .space { margin: 10px 0px 10px 0px; }
      .header { background: #003267; background: linear-gradient(to right, #011329 0%, #00639e 44%, #011329 100%); padding: 20px 10px; color: white; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.75); }
      .header a { color: white; }
      .header h1 a { text-decoration: none; }
      .header h1 { padding: 0px; margin: 0px; }
      .main { padding: 10px; margin-top: 10px; }
  </style>

 

  <!-- DayPilot library -->
  <script src="js/daypilot/daypilot-all.min.js"></script>

  <!-- additional themes 
  <link type="text/css" rel="stylesheet" href="themes/calendar_green.css"/>
  <link type="text/css" rel="stylesheet" href="themes/calendar_traditional.css"/>
  <link type="text/css" rel="stylesheet" href="themes/calendar_transparent.css"/>
  <link type="text/css" rel="stylesheet" href="themes/calendar_white.css"/>
-->
</head>
<body>

<div class="header">
  <h1><a href='https://code.daypilot.org/17910/html5-event-calendar-open-source'>HTML5/JavaScript Event Calendar (Open-Source)</a></h1>
  <div><a href="https://javascript.daypilot.org/">DayPilot for JavaScript</a> - HTML5 Calendar/Scheduling Components for JavaScript/Angular/React/Vue</div>
</div>

<div class="main">
  <div style="display: flex;">

    <div style="margin-right: 10px;">
      <div id="nav"></div>
    </div>

    <div style="flex-grow: 1;">
<!---
      <div class="space">
        Theme: <select id="theme">
        <option value="calendar_default">Default</option>
        <option value="calendar_white">White</option>
        <option value="calendar_green">Green</option>
        <option value="calendar_traditional">Traditional</option>
        <option value="calendar_transparent">Transparent</option>
      </select>
      </div>
-->
      <div id="dp"></div>
    </div>

  </div>
</div>

<script>
  const nav = new DayPilot.Navigator("nav", {
    showMonths: 3,
    skipMonths: 3,
    selectMode: "Week",
    onTimeRangeSelected: args => {
      dp.update({
        startDate: args.day
      });
      app.loadEvents();
    }
  });
  nav.init();

  const dp = new DayPilot.Calendar("dp", {
    viewType: "Week",
    /*
    eventDeleteHandling: "Update",
    onEventDeleted: async (args) => {
        const id = args.e.id();
        await DayPilot.Http.delete(`/api/CalendarEvents/${id}`);
        console.log("Deleted.");
    },
    */
    onEventMoved: async (args) => {
      const id = args.e.id();
      const data = {
        id: args.e.id(),
        start: args.newStart,
        end: args.newEnd,
        text: args.e.text()
      };
      await DayPilot.Http.post(`/api/event_update.php`, data);
      console.log("Moved.");
    },
    onEventResized: async (args) => {
      const id = args.e.id();
      const data = {
        id: args.e.id(),
        start: args.newStart,
        end: args.newEnd,
        text: args.e.text()
      };
      await DayPilot.Http.post(`/api/event_update.php`, data);
      console.log("Resized.");
    },
    onTimeRangeSelected: async (args) => {
      const form = [
        {name: "Name", id: "text"}
      ];

      const modal = await DayPilot.Modal.form(form, {});
      dp.clearSelection();

      if (modal.canceled) {
        return;
      }

      const event = {
        start: args.start,
        end: args.end,
        text: modal.result.text
      };
      const {data} = await DayPilot.Http.post(`/api/event_create.php`, event);

      dp.events.add({
        start: args.start,
        end: args.end,
        id: data.id,
        text: modal.result.text
      });
      console.log("Created.");

    },
    onEventClick: async (args) => {
      app.editEvent(args.e);
    },
    onBeforeEventRender: args => {
      args.data.areas = [
        {
          top: 5,
          right: 5,
          width: 16,
          height: 16,
          symbol: "icons/daypilot.svg#minichevron-down-4",
          fontColor: "#666",
          visibility: "Hover",
          action: "ContextMenu",
          style: "background-color: #f9f9f9; border: 1px solid #666; cursor:pointer; border-radius: 15px;"
        }
      ];
    },
    contextMenu: new DayPilot.Menu({
      items: [
        {
          text: "Edit...",
          onClick: args => {
            app.editEvent(args.source);
          }
        },
        {
          text: "Delete",
          onClick: args => {
            app.deleteEvent(args.source);
          }
        },
        {
          text: "-"
        },
        {
          text: "Duplicate",
          onClick: args => {
            app.duplicateEvent(args.source);
          }
        },
      ]
    })
  });
  dp.init();


  const app = {
    elements: {
      theme: document.querySelector("#theme")
    },
    loadEvents() {
      dp.events.load("/api/event_list.php");
    },
    async editEvent(e) {
      const form = [
        { name: "Name", id: "text" }
      ];

      const modal = await DayPilot.Modal.form(form, e.data);
      if (modal.canceled) {
        return;
      }

      const id = e.id();
      const data = {
        id: e.id(),
        start: e.start(),
        end: e.end(),
        text: modal.result.text
      };
      await DayPilot.Http.post(`/api/event_update.php`, data);

      dp.events.update({
        ...e.data,
        text: modal.result.text
      });
      console.log("Updated.");
    },
    async deleteEvent(e) {
      const modal = await DayPilot.Modal.confirm("Do you really want to delete this event?");
      if (modal.canceled) {
        return;
      }
      const id = e.id();
      const params = {
        id
      };
      await DayPilot.Http.post(`/api/event_delete.php`, params);

      dp.events.remove(id);

      console.log("Deleted.");
    },
    async duplicateEvent(e) {
      const event = {
        start: e.start(),
        end: e.end(),
        text: e.text() + " (copy)"
      };
      const { data } = await DayPilot.Http.post(`/api/event_create.php`, event);

      dp.events.add({
        ...event,
        id: data.id,
      });
      console.log("Duplicated.");
    },
    init() {
      app.elements.theme.addEventListener("change", () => {
        dp.update({
          theme: app.elements.theme.value
        });
      });

      app.loadEvents();
    }
  };
  app.init();


</script>

</body>
</html>

