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