Using vis.js to write my own projeqtor screen

Début
Précédent
1
Suivant
Fin

fsouliers
Topic Author
Offline
Premium Member

31 Mar 2022 17:39 #1 by fsouliers

Using vis.js to write my own projeqtor screen was created by fsouliers

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?

Please Connexion or Create an account to join the conversation.

babynus
Offline
Administrator
Moderator

31 Mar 2022 20:18 #2 by babynus

Replied by babynus on topic Using vis.js to write my own projeqtor screen

Hi,
It is normal it does not work.
Projeqtor loads code into divs through loadContent() function.
This includes most javasript post load code, but won't take into account your part.
You must remind that as the whole web page is not loaded, just a div update, the javascript code in your page is never executed.
You must include some event management in one on your html elements so that it triggers your code.
For instance include an iframe with event inLoad that will trigger your code.

Babynus
Administrator of ProjeQtOr web site

The following user(s) said Thank You: fsouliers

Please Connexion or Create an account to join the conversation.

Début
Précédent
1
Suivant
Fin

Moderators: babynus, protion

Time to create page: 0.042 seconds

Prochaines sessions de formation

Démonstration de ProjeQtOr

(gratuit, sur inscription)

Planifiez avec ProjeQtOr

Administrez avec ProjeQtOr

Using vis.js to write my own projeqtor screen

Paramétrages de cookies

Cookies fonctionnels

Session

Autres cookies

Prochaines sessions de formation

Démonstration de ProjeQtOr

(gratuit, sur inscription)

Planifiez avec ProjeQtOr

Administrez avec ProjeQtOr

Using vis.js to write my own projeqtor screen

Paramétrages de cookies

Cookies fonctionnels

Session

Autres cookies

Login Form