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