portal/templates/reputation.html

   1 {% extends "layout-unfold1.html" %}\r
   2 \r
   3 {% block head %}\r
   4 {{ wizard.form.media }}\r
   5 {% endblock %}\r
   6 \r
   7 {% block unfold_main %}\r
   8 \r
   9 <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/onelab.css" />\r
  10 \r
  11 <!-- Reputation Specific -->\r
  12 <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}reputation_static/css/main.css" />\r
  13 \r
  14 <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}reputation_static/css/jquery-ui-1.9.2.custom.min.css" />\r
  15 \r
  16 <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}reputation_static/css/jquery.rating.css" /> \r
  17 \r
  18 <script src="{{STATIC_URL}}reputation_static/js/jquery-1.9.0.min.js" type="text/javascript"></script>\r
  19 <script type="text/javascript" src="{{STATIC_URL}}reputation_static/js/ui/jquery-ui-1.9.2.custom.min.js"></script>\r
  20 <script type="text/javascript" src="{{STATIC_URL}}reputation_static/js/jquery.raty.min.js"></script>\r
  21  <style>\r
  22         #slicelist a {\r
  23                 color: rgb(96, 96, 216);\r
  24                 width:75% !important;\r
  25         }\r
  26         \r
  27         .ui-accordion-header, .ui-accordion-content {\r
  28                 width:120% !important;\r
  29         }\r
  30         \r
  31         ul {\r
  32                 list-style: none;\r
  33                 margin: 0;\r
  34                 padding: 0;\r
  35         }\r
  36         ul > li {\r
  37                 margin: 0;\r
  38                 padding: 0 0 8px 0;\r
  39                 height: 25px;\r
  40         }\r
  41         ol > li {\r
  42                 height: 60px;\r
  43         }\r
  44         #slicelist li:last-child {\r
  45                 padding: 0;\r
  46         }\r
  47         #slicelist {\r
  48                 width: 50%;\r
  49         }\r
  50 \r
  51         #scoreform {\r
  52                 width: 500px;\r
  53         }\r
  54         #submit {\r
  55                 text-align: center;\r
  56         }\r
  57         \r
  58         #scoreform > ol > li > div > input:first-child {\r
  59                 margin: 4px 3px 0 0;\r
  60         }\r
  61         #scoreform > ol > li > div > input:last-child {\r
  62                 margin: 4px 3px 0 10px;\r
  63         }\r
  64 </style> \r
  65 \r
  66 <div id='rep-container' align="center" style="text-align:left;margin-left:1%;"> \r
  67 \r
  68 \r
  69         <div id="tabs">\r
  70           <ul>\r
  71             <li><a href="#tabs-1">Testbeds' Reputation</a></li>\r
  72             <li><a href="#tabs-2">Evaluate your experiments</a></li>\r
  73           </ul>\r
  74           <div id="tabs-1">\r
  75         \r
  76                           \r
  77                 <table class="reptable table table-bordered table-hover">\r
  78                     <tr class="odd">\r
  79                                 <th> Testbed </th>\r
  80                                 {% for service in rep_serv %}\r
  81                                                 <th id='service{{forloop.counter}}' class='{{service}}-class'>Service: {{ service}} </th>\r
  82                                 {%endfor%}\r
  83                     </tr>\r
  84                     \r
  85                     \r
  86                     {% for testbed_rep in reputation %}\r
  87                             <tr class="border_bottom">\r
  88                                 <td class="odd">\r
  89                                                         <span> {{ testbed_rep.testbed }} </span>         \r
  90                                                 </td>\r
  91                                         \r
  92                                         {% for tb_serv in testbed_rep.services %}\r
  93                                                 <td>\r
  94                                                         {{tb_serv}}\r
  95                                                 </td>\r
  96                                         {%endfor%}\r
  97                                                 \r
  98                             </tr>\r
  99                     {%endfor%}\r
 100                                 \r
 101                 </table>    \r
 102             \r
 103           </div>\r
 104           <div id="tabs-2">\r
 105                 <h1>Experiment Evaluation</h1>\r
 106                 <p><b>List of your unrated experiments</b></p><div id="slicelist">\r
 107                         \r
 108                         {% for aslice in slicelist %}\r
 109                         <h3>Slice <b>{{ aslice.slice_hrn }}</b></h3>\r
 110                         <div style="padding-bottom:0;padding-top:0;">\r
 111                             <ul><li>\r
 112                                     experiment from <b>{{ aslice.start_t }}</b> to <b>{{ aslice.end_t }}</b> | <a href="#" class="rate_button" data-resid={{ aslice.id }}>Rate it</a>\r
 113                                         </ul>\r
 114                         </div>\r
 115                 \r
 116                 \r
 117                         {%endfor%}\r
 118                 </div>  \r
 119         \r
 120           </div>\r
 121         </div>\r
 122 \r
 123 </div>\r
 124 \r
 125 \r
 126 <div id="scoreform" style="display:none">\r
 127     <ol>\r
 128         <li>\r
 129             <span>How was your overall experience with NETMODE Testbed?</span> \r
 130             <div id="q1">\r
 131             </div>\r
 132         </li>\r
 133         <li>\r
 134             Did you experience any problems during the experiment?\r
 135             <div id="q2">\r
 136                 <input type="radio" name="q2" value="1" />Yes\r
 137                 <input type="radio" name="q2" value="0" />No\r
 138             </div>\r
 139         </li>\r
 140 \r
 141         <li>\r
 142             How would you rate the provided user support (instructions, tutorials, email support)?\r
 143             <div id="q3">\r
 144             </div>\r
 145         </li>\r
 146         <li>\r
 147             Would you use NETMODE testbed again?\r
 148             <div id="q4">\r
 149                 <input type="radio" name="q4" value="1" />Yes\r
 150                 <input type="radio" name="q4" value="0" />No\r
 151             </div>\r
 152         </li>\r
 153         <li>\r
 154             Would you be willing to pay for this service?\r
 155             <div id="q5">\r
 156                 <input type="radio" name="q5" value="1" />Yes\r
 157                 <input type="radio" name="q5" value="0" />No\r
 158             </div>\r
 159         </li>\r
 160         <li>\r
 161             How would you rate the Node Availability in the experiment?\r
 162             <div id="q6">\r
 163             </div>\r
 164         </li>\r
 165         <li>\r
 166             How would you rate the Link Quality regarding PDR in the experiment (1:Very Low, 5:Very High )?\r
 167             <div id="q7">\r
 168             </div>\r
 169         </li>\r
 170         <li>\r
 171             Rate your level of certainty regarding your answers above?\r
 172             <div id="q8">\r
 173             </div>\r
 174         </li>\r
 175 \r
 176     </ol>\r
 177     <div id="submit">\r
 178         <a href="#">Submit &raquo;</a>\r
 179     </div>\r
 180 </div>\r
 181 \r
 182 \r
 183 </div>\r
 184 \r
 185 \r
 186         <div id='temp_log' style="display: none;">\r
 187 \r
 188         <table class="mytable table table-bordered table-hover">\r
 189             <tr class="odd">\r
 190                 <th>User Email</th>\r
 191                 <th>User HRN</th>\r
 192                                 <th>Slice HRN</th>\r
 193                                 <th>Resources</th>\r
 194                                 <th>Leases</th>\r
 195                                 \r
 196             </tr>\r
 197             \r
 198             {% for slice in slices_users %}\r
 199             <tr class="border_bottom">\r
 200                 <td class="odd">\r
 201                                         <a href="/portal/user/{{slice.user}}"><span class="glyphicon glyphicon-search"></span></a>      \r
 202                                         {{ slice.user }} \r
 203                                 </td>\r
 204                                 <td class="odd"> {{ slice.user_hrn }} </td>\r
 205                                 <td class="even"> {{ slice.slice_hrn }} </td>\r
 206                                 <td class="even"> {{ slice.resource }} </td>\r
 207                                 <td class="even"> {{ slice.lease }} </td>\r
 208                                 \r
 209             </tr>\r
 210             {%endfor%}\r
 211                         \r
 212         </table>\r
 213 \r
 214                 <div id='logging_out'>{{ logging_test }}</div>\r
 215         \r
 216         </div>\r
 217 \r
 218 <!-- END of Reputation Specific -->\r
 219 \r
 220 \r
 221 <div class="onelab-title well-lg">\r
 222   <h2>Onelab Support</h2>\r
 223   <h4>If you have already registered, then please send an <a href="mailto:support@myslice.info">e-mail</a>\r
 224   or <a href="http://trac.myslice.info/" >visit us</a></h4>\r
 225 </div>\r
 226 \r
 227 \r
 228 <!-- Reputation Specific -->\r
 229 \r
 230 <script type="text/javascript">\r
 231 \r
 232 serv_per_tb = jQuery.parseJSON('{{ serv_per_tb|safe }}');\r
 233 \r
 234 $(function() {\r
 235         $( "#tabs" ).tabs();\r
 236 });\r
 237 \r
 238 var data = jQuery.parseJSON('{{ json_data|safe }}');\r
 239 \r
 240 \r
 241 \r
 242 \r
 243 var resid = -1;\r
 244 var q1 = -1;\r
 245 var q2 = -1;\r
 246 var q3 = -1;\r
 247 var q4 = -1;\r
 248 var q5 = -1;\r
 249 var q6 = -1;\r
 250 var q7 = -1;\r
 251 var q8 = -1;\r
 252 \r
 253 function initDialog() {\r
 254         \r
 255         \r
 256     $("input:radio").removeAttr("checked");\r
 257     $("#submit > a").click(function() {\r
 258         if ($("#q2 input:checked").val()) {\r
 259             q2 = $("#q2 input:checked").val();\r
 260         }\r
 261         if ($("#q4 input:checked").val()) {\r
 262             q4 = $("#q4 input:checked").val();\r
 263         }\r
 264         if ($("#q5 input:checked").val()) {\r
 265             q5 = $("#q5 input:checked").val();\r
 266         }\r
 267 \r
 268         $("a[data-resid='"+resid+"']").css("text-decoration", "line-through").unbind("click").removeAttr("href");\r
 269 \r
 270         //TODO: check input if valid before submitting\r
 271 \r
 272         sum = q1 + q2 + q3 + q4 + q5 + q6 + q7 +q8;\r
 273 \r
 274         if (sum == -8) {\r
 275             alert("Please provide at least one rating to submit");\r
 276         }\r
 277         else {\r
 278             $("#scoreform").dialog("close");\r
 279             slicedata = {};\r
 280                 for(var event in data){\r
 281                                 if ((data[event]).id == resid) {\r
 282                                         slicedata = (data[event]);\r
 283                                 }       \r
 284                         }\r
 285                         \r
 286 \r
 287                         \r
 288                         slicedata["user_eval"] = {'overall':q1, 'problems':q2, 'support':q3, 'reuse':q4, 'pay':q5, 'availability':q6, 'link_quality':q7, 'quality':q8};\r
 289                         testbeds_str = JSON.stringify(slicedata['testbeds'])\r
 290                         delete slicedata['testbeds'];\r
 291             //console.log(JSON.stringify(slicedata))\r
 292                         \r
 293             $.ajax({\r
 294                     type: "GET",\r
 295                     url: "reputation/submit_eval",\r
 296                     data: {slicedata: slicedata, testbeds: testbeds_str},\r
 297                     accepts: "application/json",\r
 298                     success: function (data) {\r
 299                         var json = $.parseJSON(data);\r
 300                         console.log(json);\r
 301                         },\r
 302                     error: function(xhr,errmsg,err) {\r
 303                         alert(" X " + errmsg + " X " + err+ ": " + xhr.responseText);\r
 304                     }\r
 305                 });\r
 306         }\r
 307 \r
 308         return false;\r
 309     });\r
 310     $("#q1").raty({\r
 311         number: 5,\r
 312         size: 24,\r
 313         starOn: 'static/reputation_static/img/star-on.png',\r
 314         starOff: 'static/reputation_static/img/star-off.png',\r
 315         click: function(score, evt) {\r
 316             q1 = score;\r
 317         }\r
 318     });\r
 319     $("#q3").raty({\r
 320         number: 5,\r
 321         size: 24,\r
 322         starOn: 'static/reputation_static/img/star-on.png',\r
 323         starOff: 'static/reputation_static/img/star-off.png',\r
 324         click: function(score, evt) {\r
 325             q3 = score;\r
 326         }\r
 327     });\r
 328     $("#q6").raty({\r
 329         number: 5,\r
 330         size: 24,\r
 331         starOn: 'static/reputation_static/img/star-on.png',\r
 332         starOff: 'static/reputation_static/img/star-off.png',\r
 333         click: function(score, evt) {\r
 334             q6 = score;\r
 335         }\r
 336     });\r
 337     $("#q7").raty({\r
 338         number: 5,\r
 339         size: 24,\r
 340         starOn: 'static/reputation_static/img/star-on.png',\r
 341         starOff: 'static/reputation_static/img/star-off.png',\r
 342         click: function(score, evt) {\r
 343             q7 = score;\r
 344         }\r
 345     });\r
 346     $("#q8").raty({\r
 347         number: 5,\r
 348         size: 24,\r
 349         starOn: 'static/reputation_static/img/star-on.png',\r
 350         starOff: 'static/reputation_static/img/star-off.png',\r
 351         click: function(score, evt) {\r
 352             q8 = score;\r
 353         }\r
 354     });\r
 355 }\r
 356 $(function() {\r
 357     /* \r
 358         vars with answers to questions\r
 359     */\r
 360 \r
 361     $("#slicelist").accordion({\r
 362         heightStyle: "content"\r
 363     });\r
 364 \r
 365     initDialog();\r
 366                 \r
 367     clone = $("#scoreform").clone(true);\r
 368 \r
 369     $(".rate_button").click(function() {\r
 370         q1 = -1;\r
 371         q2 = -1;\r
 372         q3 = -1;\r
 373         q4 = -1;\r
 374         q5 = -1;\r
 375         q6 = -1;\r
 376                 q7 = -1;\r
 377                 q8 = -1;\r
 378         resid = $(this).attr("data-resid"); \r
 379         \r
 380         slicedata = {};\r
 381         for(var event in data){\r
 382                         if ((data[event]).id == resid) {\r
 383                                 slicedata = (data[event]);\r
 384                         }       \r
 385                 }       \r
 386 \r
 387                 srv_arr = []            \r
 388         for (var tb in slicedata["testbeds"]){ \r
 389                 for (var srv in serv_per_tb[tb]){ \r
 390                         if (srv != 'equals') {\r
 391                                 //console.log(serv_per_tb[tb][srv]); \r
 392                                 srv_arr.push(serv_per_tb[tb][srv]) \r
 393                         } \r
 394                 } \r
 395         }     \r
 396         \r
 397         cq1 = "overall";\r
 398         cq6 = "availability";\r
 399         cq7 = "link_quality";\r
 400         \r
 401         q_to_remove = []\r
 402         \r
 403         if ($.inArray(cq1, srv_arr) == -1 ){\r
 404                 $("#scoreform > ol").children(':eq('+0+')').remove();\r
 405         } \r
 406         if ($.inArray(cq6, srv_arr) == -1 ){\r
 407                 $("#scoreform > ol").children(':eq('+5+')').remove();\r
 408         } \r
 409                 if ($.inArray(cq7, srv_arr) == -1 ){\r
 410                 $("#scoreform > ol").children(':eq('+6+')').remove();\r
 411         } \r
 412         \r
 413         $("#scoreform").dialog({\r
 414             title: "Rate experiment",\r
 415             width: 500,\r
 416             modal: true,\r
 417             draggable: false,\r
 418             resizable: false,\r
 419             hide: "fade",\r
 420             close : function() {\r
 421                 $(this).dialog("destroy");\r
 422                 $("#scoreform").remove();\r
 423                 $("body").append(clone); \r
 424                 initDialog();\r
 425             }\r
 426         });\r
 427         return false;\r
 428     }); \r
 429     \r
 430 \r
 431 });\r
 432 </script>\r
 433 \r
 434 <!-- END of Reputation Specific -->\r
 435 \r
 436 {% endblock %}