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>\r
 107                 <div style=" width: 70% !important" id="slicelist">\r
 108                         \r
 109                         {% for aslice in slicelist %}\r
 110                                 <h3>Slice <b>{{ aslice.slice_hrn }}</b></h3>\r
 111                         <div style="padding-bottom:0;padding-top:0;">\r
 112                             <ul><li>\r
 113                                     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
 114                                         </ul>\r
 115                         </div>\r
 116                 \r
 117                 \r
 118                         {%endfor%}\r
 119                 </div>  \r
 120         \r
 121           </div>\r
 122         </div>\r
 123 \r
 124 </div>\r
 125 \r
 126 \r
 127 <div id="scoreform" style="display:none">\r
 128     <ol>\r
 129         <li>\r
 130             <span>How was your overall experience with this Testbed?</span> \r
 131             <div id="q1">\r
 132             </div>\r
 133         </li>\r
 134         <li>\r
 135             Did you experience any problems during the experiment?\r
 136             <div id="q2">\r
 137                 <input type="radio" name="q2" value="1" />Yes\r
 138                 <input type="radio" name="q2" value="0" />No\r
 139             </div>\r
 140         </li>\r
 141 \r
 142         <li>\r
 143             How would you rate the provided user support (instructions, tutorials, email support)?\r
 144             <div id="q3">\r
 145             </div>\r
 146         </li>\r
 147         <li>\r
 148             Would you use this testbed again?\r
 149             <div id="q4">\r
 150                 <input type="radio" name="q4" value="1" />Yes\r
 151                 <input type="radio" name="q4" value="0" />No\r
 152             </div>\r
 153         </li>\r
 154         <li>\r
 155             Would you be willing to pay for this service?\r
 156             <div id="q5">\r
 157                 <input type="radio" name="q5" value="1" />Yes\r
 158                 <input type="radio" name="q5" value="0" />No\r
 159             </div>\r
 160         </li>\r
 161         <li>\r
 162             How would you rate the Node Availability in the experiment?\r
 163             <div id="q6">\r
 164             </div>\r
 165         </li>\r
 166         <li>\r
 167             How would you rate the Link Quality regarding PDR in the experiment (1:Very Low, 5:Very High )?\r
 168             <div id="q7">\r
 169             </div>\r
 170         </li>\r
 171         <li>\r
 172             Rate your level of certainty regarding your answers above?\r
 173             <div id="q8">\r
 174             </div>\r
 175         </li>\r
 176 \r
 177     </ol>\r
 178     <div id="submit">\r
 179         <a href="#">Submit &raquo;</a>\r
 180     </div>\r
 181 </div>\r
 182 \r
 183 \r
 184 </div>\r
 185 \r
 186 \r
 187         <div id='temp_log' style="display: none;">\r
 188 \r
 189         <table class="mytable table table-bordered table-hover">\r
 190             <tr class="odd">\r
 191                 <th>User Email</th>\r
 192                 <th>User HRN</th>\r
 193                                 <th>Slice HRN</th>\r
 194                                 <th>Resources</th>\r
 195                                 <th>Leases</th>\r
 196                                 \r
 197             </tr>\r
 198             \r
 199             {% for slice in slices_users %}\r
 200             <tr class="border_bottom">\r
 201                 <td class="odd">\r
 202                                         <a href="/portal/user/{{slice.user}}"><span class="glyphicon glyphicon-search"></span></a>      \r
 203                                         {{ slice.user }} \r
 204                                 </td>\r
 205                                 <td class="odd"> {{ slice.user_hrn }} </td>\r
 206                                 <td class="even"> {{ slice.slice_hrn }} </td>\r
 207                                 <td class="even"> {{ slice.resource }} </td>\r
 208                                 <td class="even"> {{ slice.lease }} </td>\r
 209                                 \r
 210             </tr>\r
 211             {%endfor%}\r
 212                         \r
 213         </table>\r
 214 \r
 215                 <div id='logging_out'>{{ logging_test }}</div>\r
 216         \r
 217         </div>\r
 218 \r
 219 <!-- END of Reputation Specific -->\r
 220 \r
 221 \r
 222 <div class="onelab-title well-lg">\r
 223   <h2>Onelab Support</h2>\r
 224   <h4>If you have already registered, then please send an <a href="mailto:support@myslice.info">e-mail</a>\r
 225   or <a href="http://trac.myslice.info/" >visit us</a></h4>\r
 226 </div>\r
 227 \r
 228 \r
 229 <!-- Reputation Specific -->\r
 230 \r
 231 <script type="text/javascript">\r
 232 \r
 233 serv_per_tb = jQuery.parseJSON('{{ serv_per_tb|safe }}');\r
 234 \r
 235 $(function() {\r
 236         $( "#tabs" ).tabs();\r
 237 });\r
 238 \r
 239 var data = jQuery.parseJSON('{{ json_data|safe }}');\r
 240 \r
 241 var resid = -1;\r
 242 var q1 = -1;\r
 243 var q2 = -1;\r
 244 var q3 = -1;\r
 245 var q4 = -1;\r
 246 var q5 = -1;\r
 247 var q6 = -1;\r
 248 var q7 = -1;\r
 249 var q8 = -1;\r
 250 \r
 251 function initDialog() {\r
 252         \r
 253         \r
 254     $("input:radio").removeAttr("checked");\r
 255     $("#submit > a").click(function() {\r
 256         if ($("#q2 input:checked").val()) {\r
 257             q2 = $("#q2 input:checked").val();\r
 258         }\r
 259         if ($("#q4 input:checked").val()) {\r
 260             q4 = $("#q4 input:checked").val();\r
 261         }\r
 262         if ($("#q5 input:checked").val()) {\r
 263             q5 = $("#q5 input:checked").val();\r
 264         }\r
 265 \r
 266         $("a[data-resid='"+resid+"']").css("text-decoration", "line-through").unbind("click").removeAttr("href");\r
 267 \r
 268         //TODO: validate input before submitting\r
 269 \r
 270         sum = q1 + q2 + q3 + q4 + q5 + q6 + q7 +q8;\r
 271 \r
 272         if (sum == -8) {\r
 273             alert("Please provide at least one rating to submit");\r
 274         }\r
 275         else {\r
 276             $("#scoreform").dialog("close");\r
 277             slicedata = {};\r
 278                 for(var event in data){\r
 279                                 if ((data[event]).id == resid) {\r
 280                                         slicedata = (data[event]);\r
 281                                 }       \r
 282                         }\r
 283                         \r
 284                         slicedata["user_eval"] = {'overall':q1, 'problems':q2, 'support':q3, 'reuse':q4, 'pay':q5, 'availability':q6, 'link_quality':q7, 'quality':q8};\r
 285                         testbeds_str = JSON.stringify(slicedata['testbeds'])\r
 286                         delete slicedata['testbeds'];\r
 287             //console.log(JSON.stringify(slicedata))\r
 288                         \r
 289             $.ajax({\r
 290                     type: "GET",\r
 291                     url: "reputation/submit_eval",\r
 292                     data: {slicedata: slicedata, testbeds: testbeds_str},\r
 293                     accepts: "application/json",\r
 294                     success: function (data) {\r
 295                         var json = $.parseJSON(data);\r
 296                         console.log(json);\r
 297                         },\r
 298                     error: function(xhr,errmsg,err) {\r
 299                         alert(" X " + errmsg + " X " + err+ ": " + xhr.responseText);\r
 300                     }\r
 301                 });\r
 302         }\r
 303 \r
 304         return false;\r
 305     });\r
 306     $("#q1").raty({\r
 307         number: 5,\r
 308         size: 24,\r
 309         starOn: 'static/reputation_static/img/star-on.png',\r
 310         starOff: 'static/reputation_static/img/star-off.png',\r
 311         click: function(score, evt) {\r
 312             q1 = score;\r
 313         }\r
 314     });\r
 315     $("#q3").raty({\r
 316         number: 5,\r
 317         size: 24,\r
 318         starOn: 'static/reputation_static/img/star-on.png',\r
 319         starOff: 'static/reputation_static/img/star-off.png',\r
 320         click: function(score, evt) {\r
 321             q3 = score;\r
 322         }\r
 323     });\r
 324     $("#q6").raty({\r
 325         number: 5,\r
 326         size: 24,\r
 327         starOn: 'static/reputation_static/img/star-on.png',\r
 328         starOff: 'static/reputation_static/img/star-off.png',\r
 329         click: function(score, evt) {\r
 330             q6 = score;\r
 331         }\r
 332     });\r
 333     $("#q7").raty({\r
 334         number: 5,\r
 335         size: 24,\r
 336         starOn: 'static/reputation_static/img/star-on.png',\r
 337         starOff: 'static/reputation_static/img/star-off.png',\r
 338         click: function(score, evt) {\r
 339             q7 = score;\r
 340         }\r
 341     });\r
 342     $("#q8").raty({\r
 343         number: 5,\r
 344         size: 24,\r
 345         starOn: 'static/reputation_static/img/star-on.png',\r
 346         starOff: 'static/reputation_static/img/star-off.png',\r
 347         click: function(score, evt) {\r
 348             q8 = score;\r
 349         }\r
 350     });\r
 351 }\r
 352 $(function() {\r
 353     /* \r
 354         vars with answers to questions\r
 355     */\r
 356 \r
 357     $("#slicelist").accordion({\r
 358         heightStyle: "content"\r
 359     });\r
 360 \r
 361     initDialog();\r
 362                 \r
 363     clone = $("#scoreform").clone(true);\r
 364 \r
 365     $(".rate_button").click(function() {\r
 366         q1 = -1;\r
 367         q2 = -1;\r
 368         q3 = -1;\r
 369         q4 = -1;\r
 370         q5 = -1;\r
 371         q6 = -1;\r
 372                 q7 = -1;\r
 373                 q8 = -1;\r
 374         resid = $(this).attr("data-resid"); \r
 375         \r
 376         slicedata = {};\r
 377         for(var event in data){\r
 378                         if ((data[event]).id == resid) {\r
 379                                 slicedata = (data[event]);\r
 380                         }       \r
 381                 }       \r
 382 \r
 383                 srv_arr = []            \r
 384         for (var tb in slicedata["testbeds"]){ \r
 385                 for (var srv in serv_per_tb[tb]){ \r
 386                         if (srv != 'equals') {\r
 387                                 //console.log(serv_per_tb[tb][srv]); \r
 388                                 srv_arr.push(serv_per_tb[tb][srv]) \r
 389                         } \r
 390                 } \r
 391         }     \r
 392         \r
 393         cq1 = "overall";\r
 394         cq6 = "availability";\r
 395         cq7 = "link_quality";\r
 396         \r
 397         q_to_remove = []\r
 398         \r
 399         if ($.inArray(cq1, srv_arr) == -1 ){\r
 400                 $("#scoreform > ol").children(':eq('+0+')').remove();\r
 401         } \r
 402         if ($.inArray(cq6, srv_arr) == -1 ){\r
 403                 $("#scoreform > ol").children(':eq('+5+')').remove();\r
 404         } \r
 405                 if ($.inArray(cq7, srv_arr) == -1 ){\r
 406                 $("#scoreform > ol").children(':eq('+6+')').remove();\r
 407         } \r
 408         \r
 409         $("#scoreform").dialog({\r
 410             title: "Rate experiment",\r
 411             width: 500,\r
 412             modal: true,\r
 413             draggable: false,\r
 414             resizable: false,\r
 415             hide: "fade",\r
 416             close : function() {\r
 417                 $(this).dialog("destroy");\r
 418                 $("#scoreform").remove();\r
 419                 $("body").append(clone); \r
 420                 initDialog();\r
 421             }\r
 422         });\r
 423         return false;\r
 424     }); \r
 425     \r
 426 \r
 427 });\r
 428 </script>\r
 429 \r
 430 <!-- END of Reputation Specific -->\r
 431 \r
 432 {% endblock %}