projecthandler/template/project/projectlist.html

   1 {% extends "base.html" %}
   2 {% load get %}
   3 {% load date_tag %}
   4 {% load staticfiles %}
   5
   6 {% block head_block %}
   7         {{ block.super }}
   8     <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
   9
  10 {% endblock %}
  11 {% block title_header_big %}
  12     {{ block.super }}
  13 {% endblock %}
  14 {% block left_sidebar %}
  15
  16 {% include 'osm/osm_project_left_sidebar.html' %}
  17
  18 {% endblock %}
  19
  20
  21 {% block breadcrumb_body %}
  22         {{ block.super }}
  23     <li><a href="{% url 'projects:projects_list' %}">Projects</a></li>
  24 {% endblock %}
  25
  26 {% block content_body %}
  27         {{ block.super }}
  28  {% csrf_token %}
  29 <div class="row">
  30 <div class="col-md-12">
  31
  32     <div class="box">
  33         <div class="box-header with-border">
  34                   <h3 class="box-title">Projects</h3>
  35             <div class="box-tools">
  36                 <button type="button" class="btn btn-default" data-container="body"
  37                                         data-toggle="tooltip" data-placement="top" title="New Project"
  38                                         onclick="javascript:showModalNewProject()">
  39                                     <i class="fa fa-plus"></i> New Project</button>
  40             </div>
  41         </div>
  42         <div class="box-body">
  43                         <table id="projects_table" class="table table-bordered table-striped">
  44                                 <thead>
  45                                         <tr>
  46
  47                                                 <th>Name</th>
  48
  49                                                 <th>Modification Date</th>
  50                                                 <th>Creation Date</th>
  51                                                 <th>Actions</th>
  52                                         </tr>
  53                                 </thead>
  54                                 <tbody>
  55                                 {% for p in projects %}
  56                                         <tr>
  57
  58                                                 <td>
  59                                                         <a href="/projects/switch/{{ p.name }}" >{{ p.name }}</a>
  60                                                 </td>
  61
  62                                                 <td>{{ p|get_sub:"_admin,modified"|get_date}}</td>
  63                         <td>{{ p|get_sub:"_admin,created"|get_date}}</td>
  64
  65                         <td>
  66                             <div class="btn-group">
  67                             <button type="button" class="btn btn-default dropdown-toggle"
  68                                     data-toggle="dropdown" aria-expanded="false">Actions
  69                                 <span class="fa fa-caret-down"></span></button>
  70                             <ul class="dropdown-menu">
  71                                 <li><a href="#"
  72                                        onclick="javascript:editProject('{% url 'projects:edit_project'  project_id=p.name %}')">
  73                                     <i class="fa fa-edit"></i> Rename</a></li>
  74                                 <li>
  75                                     <a href="#" onclick="javascript:deleteProject('{% url 'projects:delete_project'  project_id=p.name%}')" style="color:red">
  76                                         <i class="fa fa-trash"  ></i> Delete</a>
  77                                 </li>
  78                             </ul>
  79                             </div>
  80                         </td>
  81                                         </tr>
  82                                 {% endfor %}
  83                                 </tbody>
  84                         </table>
  85                 </div>
  86     </div>
  87 </div>
  88
  89 </div>
  90 {% include "modal/project_new.html" %}
  91 {% include "modal/project_edit.html" %}
  92 {% endblock %}
  93
  94 {% block resource_block %}
  95         {{ block.super }}
  96     <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
  97     <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  98
  99     <script>
 100     $(document).ready( function () {
 101         $('#projects_table').DataTable();
 102     } );
 103     </script>
 104     <script>
 105     function showModalNewProject(){
 106         $('#modal_new_project').modal('show');
 107     }
 108
 109     function editProject(url){
 110         $("#formEditProject").attr("action", url);
 111         $('#modal_edit_project').modal('show');
 112     }
 113
 114     function deleteProject(url) {
 115     bootbox.confirm("Are you sure want to delete?", function (result) {
 116         if (result) {
 117             $.ajax({
 118             url: url,
 119             type: 'GET',
 120             headers: {
 121                 "Accept": 'application/json'
 122             },
 123             contentType: false,
 124             processData: false
 125         }).done(function (response,textStatus, jqXHR) {
 126
 127             bootbox.alert({
 128                 title: "Result",
 129                 message: "Project deleted.",
 130                 callback: function () {
 131                     location.reload();
 132                 }
 133             });
 134         }).fail(function(result){
 135             var data  = result.responseJSON;
 136             var title = "Error " + (data.code ? data.code: 'unknown');
 137                 var message = data.detail ? data.detail: 'No detail available.';
 138                 bootbox.alert({
 139                     title: title,
 140                     message: message
 141                 });
 142         });
 143         }
 144     })
 145     }
 146
 147     $(document).ready(function () {
 148     $("#formNewProject").submit(function (event) {
 149         event.preventDefault(); //prevent default action
 150         var post_url = $(this).attr("action"); //get form action url
 151         var request_method = $(this).attr("method"); //get form GET/POST method
 152         var form_data = new FormData(this); //Encode form elements for submission
 153         console.log(post_url);
 154         $.ajax({
 155             url: post_url,
 156             type: request_method,
 157             data: form_data,
 158             headers: {
 159                 "Accept": 'application/json'
 160             },
 161             contentType: false,
 162             processData: false
 163         }).done(function (response,textStatus, jqXHR) {
 164             bootbox.alert({
 165                     title: "Result",
 166                     message: "Project created.",
 167                 callback: function () {
 168                     location.reload();
 169                 }
 170                 });
 171         }).fail(function(result){
 172             var data  = result.responseJSON;
 173             var title = "Error " + (data.code ? data.code: 'unknown');
 174                 var message = data.detail ? data.detail: 'No detail available.';
 175                 bootbox.alert({
 176                     title: title,
 177                     message: message
 178                 });
 179         });
 180     });
 181     });
 182
 183
 184
 185
 186     </script>
 187
 188
 189 {% endblock %}