portal/templates/fed4fire/fed4fire_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="{{ STATIC_URL }}css/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 character "_" <br />
  51                         </span>
  52                     </label>
  53                     <div class="form-group">
  54                         <input type="text" name="project_name" value="" 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                         Before you can access your newly created project a manager of this authority should approve the request.
  60                     </label>
  61                     <div class="form-group">
  62                         <select id="org_name" name="authority_name" class="form-control" style="width:100%" value="{{ organization }}" required>
  63                         {% if authorities %}
  64                             {% for authority in authorities %}
  65                                 {% if authority.name %}
  66                                     <option value="{{ authority.authority_hrn }}" {% if authority.authority_hrn == authority_hrn %}selected{% endif %}>{{authority.name}}</option>
  67                                 {% else %}
  68                                     <option value="{{ authority.authority_hrn }}" {% if authority.authority_hrn == authority_hrn %}selected{% endif %}>{{authority.authority_hrn}}</option>
  69                                 {% endif %}
  70                             {% endfor %}
  71                         {% endif %}
  72                         </select>
  73                     </div>
  74
  75                     <label>
  76                         Please provide a description of the purpose for your project
  77                     </label>
  78                     <div class="form-group">
  79                         <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>
  80                     </div>
  81                     <button type="submit" class="btn btn-onelab"><span class="glyphicon glyphicon-plus"></span> Send Request</button>
  82                 </form>
  83
  84             </div>
  85         </div>
  86     </div>
  87
  88         <div class="tab-pane" id="existing">
  89         <div class="row">
  90             <div class="col-md-6">
  91                  <h3>Join an existing Project</h3>
  92             </div>
  93             <div class="col-md-6">
  94                  <h3>List of projects you are part of</h3>
  95             </div>
  96         </div>
  97         <div class="row">
  98             <div class="col-md-6">
  99                 <form role="form" method="post" action="/portal/project_request">
 100                 {% csrf_token %}
 101                 <div id="project_loading" style="display:inline;"><img src="{{ STATIC_URL }}img/loading.gif" alt="Loading projects" /></div>
 102                 <select id="projects" name="project_name" style="display:none;"></select>
 103                 <div style="display:none;" id="projects_button">
 104                     <input type="submit" id="join" name="join" value="Join" class="btn"/>
 105                 </div>
 106                 </form>
 107             </div>
 108             <div class="col-md-6">
 109                 <table class="table project-list">
 110                     {% for pending in pending_projects %}
 111                     <tr><td>(PENDING) {{ pending.project_name }}</td><td>{{ pending.authority_hrn }}</td><td>{{ pending.created|date:"d/m/Y" }}</td></tr>
 112                     {% endfor %}
 113                     {% for pending in pending_join_projects %}
 114                     <tr><td>(PENDING JOIN) {{ pending.project_name }}</td><td>&nbsp;</td><td>{{ pending.created|date:"d/m/Y" }}</td></tr>
 115                     {% endfor %}
 116
 117                 </table>
 118             </div>
 119         </div>
 120     </div>
 121 </div>
 122
 123 <script>
 124 $(document).ready(function() {
 125     var myprojects = JSON.parse(localStorage.getItem('projects'));
 126     console.log(myprojects);
 127     if (myprojects) {
 128         $.each(myprojects, function (i, val){
 129             console.log(val);
 130             $('.project-list').append('<tr><td>'+ val +'</td></tr>');
 131         });
 132     } else {
 133         $('.project-list').html('<tr><td>no projetcs</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     });
 161 /*
 162
 163         $("#authority_hrn").load("/rest/user/", {"fields" : ["parent_authority"], "filters": {"user_hrn": "{{ user_hrn }}"}}, function(data) {
 164                 var jsonData = JSON.parse(data);
 165         $(this).attr("value", jsonData[0]['parent_authority']);
 166     });
 167         $("#authority_hrn").val("{{authority_name}}");
 168         var availableTags = [
 169     {% if authorities %}
 170         {% for authority in authorities %}
 171             {% if authority.name %}
 172                 {value:"{{ authority.name }}",label:"{{authority.name}}"},
 173                         // to show only full name
 174             {% else %}
 175                 {value:"{{ authority.authority_hrn }}",label:"{{authority.authority_hrn}}"},
 176             {% endif %}
 177         {% endfor %}
 178     {% else %}
 179         {value:"",label:"No authority found !!!"}
 180     {% endif %}
 181     ];
 182         // sorting the list
 183         availableTags.sort(function(a,b){
 184                 var nameA=a.value.toLowerCase(), nameB=b.value.toLowerCase();
 185                 if (nameA < nameB) {
 186                 return -1;
 187                 }
 188                 if (nameA > nameB) {
 189                 return 1;
 190                 }
 191         return 0;
 192         });
 193     $( "#authority_hrn" ).autocomplete({
 194       source: availableTags,
 195       minLength: 0,
 196       select: function( event, ui ) {console.log(jQuery(this));}
 197     });
 198 */
 199         $("#submit_pi").click(function() {
 200                 localStorage.clear();
 201         });
 202         // auto-complete the form
 203     jQuery("#org_name").combobox();
 204
 205 });
 206 </script>
 207 {% endblock %}
 208