portal/templates/projectrequest_view.html

   1 {% extends "layout.html" %}
   2 {% load i18n %}
   3 {% block head %}
   4 <script src="{{ STATIC_URL }}js/jquery-ui.js"></script>
   5 <script src="{{ STATIC_URL }}js/jquery-ui-combobox.js"></script>
   6 <link rel='stylesheet' type='text/css' href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
   7 <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery.ui.combobox.css">
   8 {% endblock head %}
   9 {% block content %}
  10 <div class="row">
  11     <div class="col-md-12">
  12          <div class="breadcrumbs" style="line-height: 3;">
  13              Experiment &nbsp;>&nbsp; Create or join a Project
  14          </div>
  15     </div>
  16 </div>
  17 <div class="row">
  18     <div class="col-md-12">
  19         <ul class="nav nav-tabs nav-section">
  20             <li class="active"><a href="#new">Create new Project</a></li>
  21             <li><a href="#existing">Join existing Project</a></li>
  22
  23         </ul>
  24     </div>
  25 </div>
  26
  27 {% if errors %}
  28 <div class="row">
  29     <div class="col-md-12">
  30     <ul class="error">
  31       {% for error in errors %}
  32       <li>{{ error }}</li>
  33       {% endfor %}
  34     </ul>
  35     </div>
  36 </div>
  37 {% endif %}
  38
  39 <div class="container tab-content">
  40
  41     <div class="tab-pane active" id="new">
  42
  43         <div class="row">
  44             <div class="col-sm-6 col-sm-offset-3">
  45                 <form role="form" method="post" action="/portal/project_request">
  46                 {% csrf_token %}
  47                     <label>
  48                         Please insert a name for your project under which you will be able to create slices <br />
  49                         <span class="sublabel">
  50                          The project name should only contain letters, numbers and the underscore "_"  (10 max length)<br />
  51                         </span>
  52                     </label>
  53                     <div class="form-group">
  54                         <input type="text" name="project_name" value="" class="form-control" maxlength="10"  style="width:100%;" title="The project name should not contain spaces but only letters, numbers and the underscore character" placeholder="Project name" required>
  55                     </div>
  56
  57                     <label>
  58                         The authority under which your project will be managed <br />
  59                         <span class="sublabel">
  60                         Before you can access your project a manager of this authority should approve the request
  61                         </span>
  62                     </label>
  63                     <div class="form-group">
  64                         <select id="org_name" name="authority_name" class="form-control" style="width:100%" value="{{ organization }}" required>
  65                         {% if authorities %}
  66                             {% for authority in authorities %}
  67                                 {% if authority.name %}
  68                                     <option value="{{ authority.authority_hrn }}" {% if authority.authority_hrn == authority_hrn %}selected{% endif %}>{{authority.name}}</option>
  69                                 {% else %}
  70                                     <option value="{{ authority.authority_hrn }}" {% if authority.authority_hrn == authority_hrn %}selected{% endif %}>{{authority.authority_hrn}}</option>
  71                                 {% endif %}
  72                             {% endfor %}
  73                         {% endif %}
  74                         </select>
  75                     </div>
  76
  77                     <label>
  78                         Please provide a description of the purpose for your project
  79                     </label>
  80                     <div class="form-group">
  81                         <textarea id="purpose" name="purpose" class="form-control" rows="6" placeholder="Project description" style="width:100%" title="Purpose of your project (informative)" required="required"></textarea>
  82                     </div>
  83                     <button type="submit" class="btn btn-onelab"><span class="glyphicon glyphicon-plus"></span> Send Request</button>
  84                 </form>
  85
  86             </div>
  87         </div>
  88     </div>
  89
  90         <div class="tab-pane" id="existing">
  91         <div class="row">
  92             <div class="col-md-6">
  93                  <h3>Join an existing Project</h3>
  94             </div>
  95             <div class="col-md-6">
  96                  <h3>List of projects you are part of</h3>
  97             </div>
  98         </div>
  99         <div class="row">
 100             <div class="col-md-6">
 101                 <form role="form" method="post" action="/portal/project_request">
 102                 {% csrf_token %}
 103                 <div id="project_loading" style="display:inline;"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading projects" /></div>
 104                 <select id="projects" name="project_name" style="display:none;"></select>
 105                 <div style="display:none;" id="projects_button">
 106                     <input type="submit" id="join" name="join" value="Join" class="btn"/>
 107                 </div>
 108                 </form>
 109             </div>
 110             <div class="col-md-6">
 111                 <table class="table project-list">
 112                     {% for pending in pending_projects %}
 113                     <tr><td>(PENDING) {{ pending.project_name }}</td><td>{{ pending.authority_hrn }}</td><td>{{ pending.created|date:"d/m/Y" }}</td></tr>
 114                     {% endfor %}
 115                     {% for pending in pending_join_projects %}
 116                     <tr><td>(PENDING JOIN) {{ pending.project_name }}</td><td>&nbsp;</td><td>{{ pending.created|date:"d/m/Y" }}</td></tr>
 117                     {% endfor %}
 118
 119                 </table>
 120             </div>
 121         </div>
 122     </div>
 123 </div>
 124
 125 <script>
 126 $(document).ready(function() {
 127     var myprojects = JSON.parse(localStorage.getItem('projects'));
 128     if (myprojects) {
 129         $.each(myprojects, function (i, val){
 130             $('.project-list').append('<tr><td>'+ val +'</td></tr>');
 131         });
 132     } else {
 133         $('.project-list').html('<tr><td>no projects</td></tr>');
 134     }
 135
 136     $('.nav-tabs a').click(function (e) {
 137         e.preventDefault();
 138         $(this).tab('show');
 139     });
 140     $.post("/rest/myslice:authority/",{'fields':['authority_hrn','pi_users'],'filters':{'authority_hrn':'CONTAINS{{ root_authority_hrn }}' }}, function( data ) {
 141
 142         var projects = [];
 143         project_row = "<option value=''> - </option>";
 144         projects.push(project_row);
 145
 146         $.each( data, function( key, val ) {
 147             if(val.authority_hrn.split('.').length > 2){
 148                 if($.inArray(val.authority_hrn, myprojects)==-1){
 149                 project_row = "<option value='"+val.authority_hrn+"'>"+val.authority_hrn+"</option>";
 150                 projects.push(project_row);
 151                 }
 152             }
 153         });
 154         $("#projects").show();
 155         $("#projects_button").css('margin-left', '50px');
 156         $("#projects_button").css('display', 'inline-block');
 157         $("#project_loading").hide();
 158         $("#projects").html(projects.join( "" ));
 159         $("#projects").combobox();
 160         var $s = jQuery("#projects").next().attr('id','listProjects');
 161         jQuery('#listProjects').bind("click",function(){
 162             // show all items click
 163             this.childNodes[1].click();
 164         });
 165
 166     });
 167 /*
 168
 169         $("#authority_hrn").load("/rest/myslice:user/", {"fields" : ["parent_authority"], "filters": {"user_hrn": "{{ user_hrn }}"}}, function(data) {
 170                 var jsonData = JSON.parse(data);
 171         $(this).attr("value", jsonData[0]['parent_authority']);
 172     });
 173         $("#authority_hrn").val("{{authority_name}}");
 174         var availableTags = [
 175     {% if authorities %}
 176         {% for authority in authorities %}
 177             {% if authority.name %}
 178                 {value:"{{ authority.name }}",label:"{{authority.name}}"},
 179                         // to show only full name
 180             {% else %}
 181                 {value:"{{ authority.authority_hrn }}",label:"{{authority.authority_hrn}}"},
 182             {% endif %}
 183         {% endfor %}
 184     {% else %}
 185         {value:"",label:"No authority found !!!"}
 186     {% endif %}
 187     ];
 188         // sorting the list
 189         availableTags.sort(function(a,b){
 190                 var nameA=a.value.toLowerCase(), nameB=b.value.toLowerCase();
 191                 if (nameA < nameB) {
 192                 return -1;
 193                 }
 194                 if (nameA > nameB) {
 195                 return 1;
 196                 }
 197         return 0;
 198         });
 199     $( "#authority_hrn" ).autocomplete({
 200       source: availableTags,
 201       minLength: 0,
 202       select: function( event, ui ) {console.log(jQuery(this));}
 203     });
 204 */
 205         $("#submit_pi").click(function() {
 206                 localStorage.clear();
 207         });
 208         // auto-complete the form
 209     jQuery("#org_name").combobox();
 210
 211     $('input[name=project_name]').keyup(function(){
 212         this.value = this.value.toLowerCase();
 213     });
 214 });
 215 </script>
 216 {% endblock %}
 217