plugins/asap/static/js/asap.js

   1 /**
   2  * MyPlugin:    demonstration plugin
   3  * Version:     0.1
   4  * Description: Template for writing new plugins and illustrating the different
   5  *              possibilities of the plugin API.
   6  *              This file is part of the Manifold project
   7  * Requires:    js/plugin.js
   8  * URL:         http://www.myslice.info
   9  * Author:      Jordan Augé <jordan.auge@lip6.fr>
  10  * Copyright:   Copyright 2012-2013 UPMC Sorbonne Universités
  11  * License:     GPLv3
  12  */
  13
  14 var AsapDateSelected = new Date();
  15
  16 (function($){
  17
  18     var AsapPlugin = Plugin.extend({
  19
  20         /** XXX to check
  21          * @brief Plugin constructor
  22          * @param options : an associative array of setting values
  23          * @param element :
  24          * @return : a jQuery collection of objects on which the plugin is
  25          *     applied, which allows to maintain chainability of calls
  26          */
  27         init: function(options, element) {
  28             // for debugging tools
  29             this.classname="myplugin";
  30             // Call the parent constructor, see FAQ when forgotten
  31             this._super(options, element);
  32
  33             /* Member variables */
  34
  35             /* Plugin events */
  36
  37             /* Setup query and record handlers */
  38
  39             // Explain this will allow query events to be handled
  40             // What happens when we don't define some events ?
  41             // Some can be less efficient
  42             this.listen_query(options.query_uuid, 'resources');
  43             this.listen_query(options.query_lease_uuid, 'leases');
  44
  45             /* GUI setup and event binding */
  46             // call function
  47             this._initUI();
  48         },
  49
  50         /* PLUGIN EVENTS */
  51         // on_show like in querytable
  52
  53         remove(id) {
  54             return (elem=document.getElementById(id)).parentNode.removeChild(elem);
  55         },
  56         /* GUI EVENTS */
  57         /**
  58          * Initialize the date picker, the table, the slider and the buttons. Once done, display scheduler.
  59          */
  60         _initUI: function()
  61         {
  62             var self = this;
  63             dateToday = new Date();
  64
  65             $("#DateAsap").datepicker({
  66                 //dateFormat: "D, d M yy",
  67                 minDate: dateToday,
  68                 defaultDate: dateToday,
  69                 /*
  70                 onRender: function(date) {
  71                     return date.valueOf() < now.valueOf() ? 'disabled' : '';
  72                 },
  73                 */
  74             }).on('changeDate', function(ev) {
  75                 if(ev.date < dateToday){
  76                     $("#asap_msg").show();
  77                     $("#asap_msg").css("color","red");
  78                     $("#asap_msg").html("Please select an end date today or later");
  79                     $("#asap_msg").fadeOut(4000);
  80                     $("#DateAsap").datepicker( "setDate", dateToday );
  81                 }else{
  82                     AsapDateSelected = ev.date;
  83                 }
  84             }).datepicker('setValue', AsapDateSelected);
  85             /*
  86             .on('changeDate', function(ev) {
  87                 AsapDateSelected = new Date(ev.date);
  88                 AsapDateSelected.setHours(0,0,0,0);
  89                 // Set slider to origin
  90                 //$('#tblSlider').slider('setValue', 0); // XXX
  91                 // Refresh leases
  92                 self._scope_clear_leases();
  93                 self._set_all_lease_slots();
  94                 // Refresh display
  95                 self._get_scope().$apply();
  96             }).datepicker('setValue', AsapDateSelected); //.data('datepicker');
  97             */
  98             $("#asap_schedule").click(function() {
  99                 dateNow = new Date();
 100                 r = document.getElementById("resources");
 101                 if(r.childNodes.length == 0){
 102                     $("#asap_msg").show();
 103                     $("#asap_msg").css("color","orange");
 104                     $("#asap_msg").html("Please select at least one resource");
 105                     $("#asap_msg").fadeOut(4000);
 106                 }else{
 107                     start_time = 0;
 108                     hours = $("#hours").val();
 109                     minutes = $("#minutes").val();
 110                     AsapDateSelected.setHours(hours,minutes,0,0);
 111                     if(AsapDateSelected <= dateNow){
 112                         $("#asap_msg").show();
 113                         $("#asap_msg").css("color","red");
 114                         $("#asap_msg").html("Please select a correct end time");
 115                         $("#asap_msg").fadeOut(4000);
 116                     }else{
 117                         $.each(r.childNodes, function(i, el){
 118                             t_id = el.id.split("_");
 119                             console.log(t_id[1]);
 120                             self.send_lease(t_id[1], start_time, AsapDateSelected);
 121                         });
 122                     }
 123                 }
 124             });
 125         },
 126
 127         // a function to bind events here: click change
 128         // how to raise manifold events
 129         send_lease: function(resource_urn, start_time, end_time)
 130         {
 131             var lease_key, new_lease, data;
 132
 133             lease_key = manifold.metadata.get_key('lease');
 134
 135             new_lease = {
 136                 resource:   resource_urn,
 137                 start_time: start_time,
 138                 end_time:   end_time.getTime()/1000,
 139             };
 140
 141             // This is needed to create a hashable object
 142             new_lease.hashCode = manifold.record_hashcode(lease_key.sort());
 143             new_lease.equals   = manifold.record_equals(lease_key);
 144
 145             data = {
 146                 state: STATE_SET,
 147                 key  : null,
 148                 op   : STATE_SET_ADD,
 149                 value: new_lease
 150             }
 151             prev_state = manifold.query_store.get_record_state(this.options.query_uuid, resource_urn, STATE_SET);
 152             manifold.raise_event(this.options.query_lease_uuid, FIELD_STATE_CHANGED, data);
 153
 154
 155         },
 156
 157         /* GUI MANIPULATION */
 158
 159         // We advise you to write function to change behaviour of the GUI
 160         // Will use naming helpers to access content _inside_ the plugin
 161         // always refer to these functions in the remaining of the code
 162
 163         show_hide_button: function()
 164         {
 165             // this.id, this.el, this.cl, this.elts
 166             // same output as a jquery selector with some guarantees
 167         },
 168
 169         /* TEMPLATES */
 170
 171         // see in the html template
 172         // How to load a template, use of mustache
 173
 174         /* QUERY HANDLERS */
 175
 176         // How to make sure the plugin is not desynchronized
 177         // He should manifest its interest in filters, fields or records
 178         // functions triggered only if the proper listen is done
 179
 180         // no prefix
 181
 182         on_filter_added: function(filter)
 183         {
 184
 185         },
 186
 187         // ... be sure to list all events here
 188
 189         on_resources_field_state_changed: function(record)
 190         {
 191             console.log("on_resources_field_state_changed ---- ");
 192             console.log(record);
 193             if(record['op']==2){
 194                 var elm = document.createElement('div');
 195                 elm.innerHTML = record['value'];
 196                 elm.id = "asap_"+record['value'];
 197                 r = document.getElementById("resources");
 198                 r.appendChild(elm);
 199             }else if(record['op']==1){
 200                 this.remove("asap_"+record['value']);
 201             }
 202         },
 203         on_leases_field_state_changed: function(record)
 204         {
 205             console.log(record);
 206             if(record['op']==2){
 207                 this.remove("asap_"+record['value']['resource']);
 208             }else if(record['op']==1){
 209                 var elm = document.createElement('div');
 210                 elm.innerHTML = record['value']['resource'];
 211                 elm.id = "asap_"+record['value']['resource'];
 212                 r = document.getElementById("resources");
 213                 r.appendChild(elm);
 214             }
 215         },
 216
 217         /* RECORD HANDLERS */
 218         on_all_new_record: function(record)
 219         {
 220             console.log("on_all_new_record ---- ");
 221             console.log(record);
 222         },
 223
 224         /* INTERNAL FUNCTIONS */
 225         _dummy: function() {
 226             // only convention, not strictly enforced at the moment
 227         },
 228
 229     });
 230
 231     /* Plugin registration */
 232     $.plugin('AsapPlugin', AsapPlugin);
 233
 234     // TODO Here use cases for instanciating plugins in different ways like in the pastie.
 235
 236 })(jQuery);