projecthandler/template/project/projectlist.html

{% extends "base.html" %}
{% load get %}
{% load date_tag %}
{% load staticfiles %}

{% block head_block %}
  	{{ block.super }}
    <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">

{% endblock %}
{% block title_header_big %}
    {{ block.super }}
{% endblock %}
{% block left_sidebar %}

{% include 'osm/osm_project_left_sidebar.html' %}

{% endblock %}


{% block breadcrumb_body %}
  	{{ block.super }}
    <li><a href="{% url 'projects:projects_list' %}">Projects</a></li>
{% endblock %}

{% block content_body %}
  	{{ block.super }}
 {% csrf_token %}
<div class="row">
<div class="col-md-12">

    <div class="box">
        <div class="box-header with-border">
                  <h3 class="box-title">Projects</h3>
            <div class="box-tools">
                <button type="button" class="btn btn-default" data-container="body"
                                        data-toggle="tooltip" data-placement="top" title="New Project"
                                        onclick="javascript:showModalNewProject()">
                                    <i class="fa fa-plus"></i> New Project</button>
            </div>
        </div>
        <div class="box-body">
			<table id="projects_table" class="table table-bordered table-striped">
				<thead>
					<tr>

						<th>Name</th>

						<th>Modification Date</th>
						<th>Creation Date</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
				{% for p in projects %}
					<tr>

						<td>
							<a href="/projects/switch/{{ p.name }}" >{{ p.name }}</a>
						</td>

						<td>{{ p|get_sub:"_admin,modified"|get_date}}</td>
                        <td>{{ p|get_sub:"_admin,created"|get_date}}</td>

                        <td>
                            <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle"
                                    data-toggle="dropdown" aria-expanded="false">Actions
                                <span class="fa fa-caret-down"></span></button>
                            <ul class="dropdown-menu">
                                <li><a href="#"
                                       onclick="javascript:editProject('{% url 'projects:edit_project'  project_id=p.name %}')">
                                    <i class="fa fa-edit"></i> Rename</a></li>
                                <li>
                                    <a href="#" onclick="javascript:deleteProject('{% url 'projects:delete_project'  project_id=p.name%}')" style="color:red">
                                        <i class="fa fa-trash"  ></i> Delete</a>
                                </li>
                            </ul>
                            </div>
                        </td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
    </div>
</div>

</div>
{% include "modal/project_new.html" %}
{% include "modal/project_edit.html" %}
{% endblock %}

{% block resource_block %}
  	{{ block.super }}
    <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

    <script>
    $(document).ready( function () {
        $('#projects_table').DataTable();
    } );
    </script>
    <script>
    function showModalNewProject(){
        $('#modal_new_project').modal('show');
    }

    function editProject(url){
        $("#formEditProject").attr("action", url);
        $('#modal_edit_project').modal('show');
    }

    function deleteProject(url) {
    bootbox.confirm("Are you sure want to delete?", function (result) {
        if (result) {
            $.ajax({
            url: url,
            type: 'GET',
            headers: {
                "Accept": 'application/json'
            },
            contentType: false,
            processData: false
        }).done(function (response,textStatus, jqXHR) {

            bootbox.alert({
                title: "Result",
                message: "Project deleted.",
                callback: function () {
                    location.reload();
                }
            });
        }).fail(function(result){
            var data  = result.responseJSON;
            var title = "Error " + (data.code ? data.code: 'unknown');
                var message = data.detail ? data.detail: 'No detail available.';
                bootbox.alert({
                    title: title,
                    message: message
                });
        });
        }
    })
    }

    $(document).ready(function () {
    $("#formNewProject").submit(function (event) {
        event.preventDefault(); //prevent default action
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = new FormData(this); //Encode form elements for submission
        console.log(post_url);
        $.ajax({
            url: post_url,
            type: request_method,
            data: form_data,
            headers: {
                "Accept": 'application/json'
            },
            contentType: false,
            processData: false
        }).done(function (response,textStatus, jqXHR) {
            bootbox.alert({
                    title: "Result",
                    message: "Project created.",
                callback: function () {
                    location.reload();
                }
                });
        }).fail(function(result){
            var data  = result.responseJSON;
            var title = "Error " + (data.code ? data.code: 'unknown');
                var message = data.detail ? data.detail: 'No detail available.';
                bootbox.alert({
                    title: title,
                    message: message
                });
        });
    });
    });




    </script>


{% endblock %}