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                     <div class="form-group">
  77                         <label>
  78                             Provide an URL for your project (not required)
  79                         </label>
  80                         <input type="text" class="form-control" name="url" id="url" style="width:100%" placeholder="Experiment URL (if one exists)"
  81                         title="Please provide the url of your project" value="{{url}}">
  82                     </div>
  83                     <label>
  84                         Please provide a description of the purpose for your project
  85                     </label>
  86                     <div class="form-group">
  87                         <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>
  88                     </div>
  89                     <button type="submit" class="btn btn-onelab"><span class="glyphicon glyphicon-plus"></span> Send Request</button>
  90                 </form>
  91
  92             </div>
  93         </div>
  94     </div>
  95
  96         <div class="tab-pane" id="existing">
  97         <div class="row">
  98             <div class="col-md-6">
  99                  <h3>Join an existing Project</h3>
 100             </div>
 101             <div class="col-md-6">
 102                  <h3>List of projects you are part of</h3>
 103             </div>
 104         </div>
 105         <div class="row">
 106             <div class="col-md-6">
 107                 <form role="form" method="post" action="/portal/project_request">
 108                 {% csrf_token %}
 109                 <div id="project_loading" style="display:inline;"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading projects" /></div>
 110                 <select id="projects" name="project_name" style="display:none;"></select>
 111                 <div style="display:none;" id="projects_button">
 112                     <input type="submit" id="join" name="join" value="Join" class="btn"/>
 113                 </div>
 114                 </form>
 115             </div>
 116             <div class="col-md-6">
 117                 <table class="table project-list">
 118                     {% for pending in pending_projects %}
 119                     <tr><td>(PENDING) {{ pending.project_name }}</td><td>{{ pending.authority_hrn }}</td><td>{{ pending.created|date:"d/m/Y" }}</td></tr>
 120                     {% endfor %}
 121                     {% for pending in pending_join_projects %}
 122                     <tr><td>(PENDING JOIN) {{ pending.project_name }}</td><td>&nbsp;</td><td>{{ pending.created|date:"d/m/Y" }}</td></tr>
 123                     {% endfor %}
 124
 125                 </table>
 126             </div>
 127         </div>
 128     </div>
 129 </div>
 130
 131 <script>
 132 $(document).ready(function() {
 133     var myprojects = JSON.parse(localStorage.getItem('projects'));
 134     if (myprojects) {
 135         $.each(myprojects, function (i, val){
 136             $('.project-list').append('<tr><td>'+ val +'</td></tr>');
 137         });
 138     } else {
 139         $('.project-list').html('<tr><td>no projects</td></tr>');
 140     }
 141
 142     $('.nav-tabs a').click(function (e) {
 143         e.preventDefault();
 144         $(this).tab('show');
 145     });
 146     $.post("/rest/myslice:authority/",{'fields':['authority_hrn','pi_users'],'filters':{'authority_hrn':'CONTAINS{{ root_authority_hrn }}' }}, function( data ) {
 147
 148         var projects = [];
 149         project_row = "<option value=''> - </option>";
 150         projects.push(project_row);
 151
 152         $.each( data, function( key, val ) {
 153             if(val.authority_hrn.split('.').length > 2){
 154                 if($.inArray(val.authority_hrn, myprojects)==-1){
 155                 project_row = "<option value='"+val.authority_hrn+"'>"+val.authority_hrn+"</option>";
 156                 projects.push(project_row);
 157                 }
 158             }
 159         });
 160         $("#projects").show();
 161         $("#projects_button").css('margin-left', '50px');
 162         $("#projects_button").css('display', 'inline-block');
 163         $("#project_loading").hide();
 164         $("#projects").html(projects.join( "" ));
 165         $("#projects").combobox();
 166         var $s = jQuery("#projects").next().attr('id','listProjects');
 167         jQuery('#listProjects').bind("click",function(){
 168             // show all items click
 169             this.childNodes[1].click();
 170         });
 171
 172     });
 173 /*
 174
 175         $("#authority_hrn").load("/rest/myslice:user/", {"fields" : ["parent_authority"], "filters": {"user_hrn": "{{ user_hrn }}"}}, function(data) {
 176                 var jsonData = JSON.parse(data);
 177         $(this).attr("value", jsonData[0]['parent_authority']);
 178     });
 179         $("#authority_hrn").val("{{authority_name}}");
 180         var availableTags = [
 181     {% if authorities %}
 182         {% for authority in authorities %}
 183             {% if authority.name %}
 184                 {value:"{{ authority.name }}",label:"{{authority.name}}"},
 185                         // to show only full name
 186             {% else %}
 187                 {value:"{{ authority.authority_hrn }}",label:"{{authority.authority_hrn}}"},
 188             {% endif %}
 189         {% endfor %}
 190     {% else %}
 191         {value:"",label:"No authority found !!!"}
 192     {% endif %}
 193     ];
 194         // sorting the list
 195         availableTags.sort(function(a,b){
 196                 var nameA=a.value.toLowerCase(), nameB=b.value.toLowerCase();
 197                 if (nameA < nameB) {
 198                 return -1;
 199                 }
 200                 if (nameA > nameB) {
 201                 return 1;
 202                 }
 203         return 0;
 204         });
 205     $( "#authority_hrn" ).autocomplete({
 206       source: availableTags,
 207       minLength: 0,
 208       select: function( event, ui ) {console.log(jQuery(this));}
 209     });
 210 */
 211         $("#submit_pi").click(function() {
 212                 localStorage.clear();
 213         });
 214         // auto-complete the form
 215     jQuery("#org_name").combobox();
 216
 217     $('input[name=project_name]').keyup(function(){
 218         this.value = this.value.toLowerCase();
 219     });
 220 });
 221 </script>
 222 {% endblock %}
 223