Hello,
I am trying to understand how it is possible to write new "screens" for Projeqtor (as a hobby). On an other hand, I like vis.js because it allows very nice views of many things so I'd like to integrate a vis.js view in a Projeqtor screen.
Below, I try to reduce the problem to make it the less complicated I can.
Step 1 : I create a file toto.html as follows and I display it in my browser (it's an example from vis.js). it works : the timeline is properly rendered in the "visualization" div.
The inclusion of the library is quite unconventionnal because I wanted to test it as it seems when modifying code from Projeqtor below, we are in fact directly in the body part.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
Timeline | Standalone Build
</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
const container = document.getElementById("visualization");
// Create a DataSet (allows two way data-binding)
const items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2014-04-20" },
{ id: 2, content: "item 2", start: "2014-04-14" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
{ id: 5, content: "item 5", start: "2014-04-25" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);
// Configuration for the Timeline
const options = {};
// Create a Timeline
const timeline = new vis.Timeline(container, items, options);
</script>
</body>
Step 2 : In projeqtor, in order not to mess with the menus and so on, I use diaryMain.php and almost nuke it to only keep the minimum (it works) and add my timeline as I did before ... and it does not work ; by the way, the alert I set is never executed.
<script type="text/javascript" src="https://unpkg.com/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<?php
require_once "../tool/projeqtor.php";
$user=getSessionUser();
?>
<input type="hidden" name="objectClassManual" id="objectClassManual" value="Diary" />
<div class="container" dojoType="dijit.layout.BorderContainer">
<div id="listDiv" dojoType="dijit.layout.ContentPane" region="top" class="listTitle" splitter="false" style="height: auto !important">
<table width="100%" height="36px" class="listTitle" style="max-height: 36px;">
<tr height="17px" style="max-height: 17px;">
<td style="width: 50px; text-align: center"> <?php echo formatIcon('Diary',32,null,true);?></td>
<td style="width: 50px; text-align: left"><span class="title"><?php echo i18n('menuDiary');?></span></td>
<td style="width: 200px; text-align: right; align: right;" nowrap="nowrap">
<?php
echo i18n("colFirstDay");
$currentWeek = weekNumber(date('Y-m-d'));
$currentYear = pq_strftime("%Y");
$currentDay = date('Y-m-d', firstDayofWeek($currentWeek, $currentYear));
?>
<div dojoType="dijit.form.DateTextBox"
<?php
if (sessionValueExists('browserLocaleDateFormatJs')) {
echo ' constraints="{datePattern:\'' . getSessionValue('browserLocaleDateFormatJs') . '\'}" ';
}
?>
id="dateSelector" name=""
dateSelector""
invalidMessage="<?php echo i18n('messageInvalidDate')?>"
type="text" maxlength="10"
style="width: 100px; text-align: center;"
class="input roundedLeft" hasDownArrow="true"
value="<?php if(sessionValueExists('dateSelectorDiary')){ echo getSessionValue('dateSelectorDiary');}else{ echo $currentDay; }?>">
<script type="dojo/method" event="onChange">
saveDataToSession('dateSelectorDiary',formatDate(dijit.byId('dateSelector').get("value")), false);
return diarySelectDate(this.value);
</script>
</div>
</td>
</tr>
</table>
</div>
<?php
$destinationHeight=intval($_REQUEST['destinationHeight'])-54;
if (isset($displayStatus) and $displayStatus!='none') $destinationHeight-=16;
?>
<div id="detailDiv" dojoType="dijit.layout.ContentPane" region="center" style="overflow-x:auto;height: <?php echo $destinationHeight?>px">
<p> I can put text here and I can read it on screen \o/ </p>
<div id="visualization"></div>
</div>
</div>
<script type="text/javascript">
// except the alert below, this is the exact same script as in toto.html
alert("Here I am") ;
// DOM element where the Timeline will be attached
const container = document.getElementById("visualization");
// Create a DataSet (allows two way data-binding)
const items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2014-04-20" },
{ id: 2, content: "item 2", start: "2014-04-14" },
{ id: 3, content: "item 3", start: "2014-04-18" },
{ id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
{ id: 5, content: "item 5", start: "2014-04-25" },
{ id: 6, content: "item 6", start: "2014-04-27", type: "point" }
]);
// Configuration for the Timeline
const options = {};
// Create a Timeline
const timeline = new vis.Timeline(container, items, options);
</script>
I tried to include vis.js from several places and it never worked (even in main.php before many other javascripts)
Does anybody have an idea on how to proceed?