indico/MaKaC/webinterface/tpls/ConfModifCollaborationMultipleBookings.tpl

   1 <table>
   2     <tr>
   3         <td colspan="2" style="padding-top: 20px"></td>
   4     </tr>
   5     <tr>
   6         <td class="titleCellNoBorderTD" style="white-space: nowrap;vertical-align: middle;">
   7             <span class="titleCellFormat createBookingText">
   8                 ${ _("Create booking")}
   9             </span>
  10         </td>
  11         <td style="padding-left: 15px;">
  12             <% plugins = MultipleBookingPlugins %>
  13             <select id="pluginSelect" onchange="pluginSelectChanged()">
  14                 <option value="noneSelected">-- Choose a system --</option>
  15                 % for p in plugins:
  16                     <option value="${p.getId()}">${ p.getName() }</option>
  17                 % endfor
  18             </select>
  19             <div id="createBookingDiv" style="display: inline;">
  20                 <input type="button" value="${ _("Create")}" disabled>
  21             </div>
  22             <div id="createBookingHelp" style="display: inline;">
  23             </div>
  24             <span style="margin-left: 5em;font-size: 9pt;">
  25                 ${ _("Timezone: ")}${ Conference.getTimezone() }
  26             </span>
  27         </td>
  28     </tr>
  29 </table>
  30 <table>
  31     <tr>
  32         <td class="groupTitle" style="white-space: nowrap;padding-top: 1em;" colspan="2">
  33             ${ _("Current bookings")}
  34         </td>
  35     </tr>
  36     <tr>
  37         <td colspan="2" style="padding-top: 20px;">
  38             <table style="border-collapse: collapse;">
  39                 <thead>
  40                     <tr id="tableHeadRow" style="margin-bottom: 5px;">
  41                         <td></td>
  42                     </tr>
  43                 </thead>
  44                 <tbody id="bookingsTableBody">
  45                     <tr><td></td></tr>
  46                 </tbody>
  47                 <tr>
  48                     <td colspan="10" style="text-align: center; padding-top: 20px;">
  49                         <div id="startAll" style="display:none;">
  50                             <img class="clickableImage" style="vertical-align: middle;" onClick="startAll()" src="${Config.getInstance().getSystemIconURL('play')}" alt="${ _("Start All")}" />
  51                             <span class="clickableText" style="font-size: large; margin-left: 5px;" onClick="startAll()">${ _("Start All")}</span>
  52                         </div>
  53                         <div id="stopAll" style="display:none;">
  54                             <img class="clickableImage" style="vertical-align: middle; margin-left: 20px;" onClick="stopAll()" src="${Config.getInstance().getSystemIconURL('stop')}" alt="${ _("Stop All")}" />
  55                             <span class="clickableText" style="font-size: large; margin-left: 5px;" onClick="stopAll()">${ _("Stop All")}</span>
  56                         </div>
  57                     </td>
  58                 </tr>
  59             </table>
  60         </td>
  61     </tr>
  62 </table>
  63
  64 <script type="text/javascript">
  65
  66
  67 /* ------------------------------ GLOBAL VARIABLES ------------------------------- */
  68
  69 // HTML code for the popup dialog that will appear when adding or editing a booking, depending on the booking type
  70 var forms = {
  71 ${ ",\n". join(['"' + pluginName + '" \x3a ["' + escapeHTMLForJS(newBookingForm) + '", "' + escapeHTMLForJS(advancedTabForm) + '"]' for pluginName, (newBookingForm, advancedTabForm) in MultipleBookingForms.items()]) }
  72 }
  73
  74 /**
  75   * Watchlist of bookings objects, pickled from Indico CSBooking objects.
  76   * Structure of a booking object:
  77   * id: the id of the booking. Examples: 1,3,10,12
  78   * type: the plugin / booking type that this booking belongs to. Examples: EVO, DummyPlugin
  79   * statusMessage: a string representing the current status of the booking. Examples: "Booking accepted", "Booking refused"
  80   * statusClass: the CSS class for the status message.
  81   * bookingParams: an object / dictionary with plugin-defined parameters that are need to perform a booking.
  82   * startParams: an object / dictionary with plugin-defined parameters that may be needed to execute a local (browser, opposed to server)
  83   *              start action, such as downloading koala.jnlp with some given parameters, or sending a command to a Tandberg camera.
  84   * Different flags that depend on the plugin to which the booking belongs to, but are present in all booking objects for convenience:
  85   *     -hasStart : true if the plugin has a "start" concept. Otherwise, the "start" button will not appear, etc.
  86   *     -hasStop : true if the plugin has a "stop" concept. Otherwise, the "stop" button will not appear, etc.
  87   *     -hasConnect : true if the plugin has a "connect" concept. Otherwise, the "connect" button will not appear, etc.
  88   *     -requiresServerCallForStart: true if we should notify the server when the user presses the "start" button.
  89   *     -requiresServerCallForStop: true if we should notify the server when the user presses the "stop" button.
  90   *     -requiresClientCallForStart: true if the browser should execute some JS action when the user presses the "start" button.
  91   *     -requiresClientCallForStop: true if the browser should execute some JS action when the user presses the "stop" button.
  92   * Other flags that depend on the booking object:
  93   *     -canBeStarted : If its value is true, the "start" button for the booking will be able to be pushed.
  94   *                     It can be false if, for example:
  95   *                           + The server didn't like the booking parameters and doesn't give permission for the booking to be started,
  96   *                           + The booking has already been started, so the "start" button has to be faded in order not to be pressed twice.
  97   *     -canBeStopped: If its value is true, the "stop" button for the booking will be able to be pushed.
  98   *                    For example, before starting a booking the "stop" button for the booking will be faded.
  99   *     -permissionToStart : Even if the "start" button for a booking is able to be pushed, there may be cases where the booking should
 100   *                          not start. For example, if it's not the correct time yet.
 101   *                          In that case "permissionToStart" should be set to false so that the booking doesn't start.
 102   *     -permissionToStop: Same as permissionToStart. Sometimes the booking should not be allowed to stop even if the "stop" button is available.
 103   */
 104
 105 var bookings = $L(${ jsonEncode(BookingsM) });
 106
 107 var createButton;
 108 var createButtonTooltip;
 109
 110 var confLocationRoom = '${ Conference.getRoom().getName() if Conference.getRoom() else ""}';
 111
 112 /* ------------------------------ UTILITY / HELPER FUNCTIONS -------------------------------*/
 113
 114 /**
 115  * Returns a String with the name of the plugin currently selected in the 'pluginSelect' select widget.
 116  * Example: EVO, DummyPlugin...
 117  * @return {String}
 118  */
 119 var getSelectedPlugin = function() {
 120     value = $E('pluginSelect').dom.value;
 121     return value == 'noneSelected' ? null : value;
 122 }
 123
 124 var pluginSelectChanged = function() {
 125     selectedPlugin = getSelectedPlugin();
 126     if (exists(selectedPlugin)) {
 127         createButton.enable();
 128     } else {
 129         createButton.disable();
 130     }
 131 }
 132
 133 /* ------------------------------ FUNCTIONS TO BE CALLED WHEN USER EVENTS HAPPEN -------------------------------*/
 134
 135 /**
 136  * Function that will be called when the user presses the "Add" button.
 137  * It will call in turn 'createBooking' in Collaboration.js
 138  */
 139 var create = function() {
 140     selectedPlugin = getSelectedPlugin();
 141     if (exists(selectedPlugin)) {
 142         createBooking(selectedPlugin, '${ Conference.getId() }');
 143     }
 144 }
 145
 146 /**
 147  * Function that will be called when the user presses the "Remove" button for a plugin.
 148  * It will call in turn 'removeBooking' in Collaboration.js
 149  */
 150 var remove = function(booking) {
 151     removeBooking(booking, '${ Conference.getId() }');
 152 };
 153
 154
 155 /**
 156  * Function that will be called when the user presses the "Edit" button of a booking.
 157  * It will call in turn 'editBooking' in Collaboration.js
 158  */
 159 var edit = function(booking) {
 160     editBooking(booking, '${ Conference.getId() }');
 161 };
 162
 163 /**
 164  * Mouseover help popup for the 'Create' button
 165  */
 166 var CreateHelpPopup = function(event) {
 167     IndicoUI.Widgets.Generic.tooltip(this, event,
 168         '<div style="padding:3px">' +
 169             $T('Select a <strong>booking type<\/strong> from the drop-down list and press the "Create" button.') +
 170         '<\/div>');
 171 };
 172
 173 /* ------------------------------ STUFF THAT HAPPENS WHEN PAGE IS LOADED -------------------------------*/
 174
 175 IndicoUI.executeOnLoad(function(){
 176     // This is strictly necessary in this page because the progress dialog touches the body element of the page,
 177     // and IE doesn't like when this is done at page load by a script that is not inside the body element.
 178
 179     // We configure the "create" button and the list of plugins.
 180     createButton = new DisabledButton(Html.input("button", {disabled:true, style:{marginLeft: '6px'}}, $T("Create") ));
 181
 182     createButton.observeEvent('mouseover', function(event) {
 183         if (!createButton.isEnabled()) {
 184             createButtonTooltip = IndicoUI.Widgets.Generic.errorTooltip(event.clientX, event.clientY,
 185                      $T("Please select a booking type from the list."), "tooltipError");
 186         }
 187     });
 188
 189     createButton.observeEvent('mouseout', function(event){
 190         Dom.List.remove(document.body, createButtonTooltip);
 191     });
 192
 193     createButton.observeClick(function(){ create() });
 194
 195     $E('createBookingDiv').set(createButton.draw());
 196
 197     var createHelpImg = Html.img({src: imageSrc("help"), style: {marginLeft: '5px', verticalAlign: 'middle'}});
 198     createHelpImg.dom.onmouseover = CreateHelpPopup;
 199     $E('createBookingHelp').set(createHelpImg);
 200
 201     $E('pluginSelect').dom.value = 'noneSelected';
 202     pluginSelectChanged();
 203
 204     // We display the bookings
 205     displayBookings();
 206 });
 207
 208 % if MultipleBookingPlugins:
 209 IndicoUI.executeOnLoad(function(){
 210     % for plugin in MultipleBookingPlugins:
 211     if (pluginHasFunction("${plugin.getName()}", "onLoad")) {
 212         codes["${plugin.getName()}"]["onLoad"]();
 213     }
 214     % endfor
 215 });
 216 % endif
 217
 218 </script>
 219