src/templates/booking/booking_calendar.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

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

{% load bootstrap3 %}

{% block extrahead %}
    <link href="{% static "bower_components/fullcalendar/dist/fullcalendar.css" %}"
          rel='stylesheet'/>
    <link href="{% static "bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" %}"
          rel='stylesheet'/>
{% endblock extrahead %}

{% block content %}
    <div class="col-lg-8">
        <div class="container-fluid">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-calendar fa-fw"></i>Calendar
                </div>
                <div class="panel-body">
                    <div id='calendar'>
                    </div>
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
    </div>

    <div class="col-lg-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-edit fa-fw"></i>Booking
            </div>
            <div class="panel-body">
                {% if user.is_authenticated %}
                    <div id="booking_form_div">
                        {% bootstrap_form_errors form type='non_fields' %}
                        <form method="post" action="" class="form" id="bookingform">
                            {% csrf_token %}

                            <div class='input-group' id='starttimepicker'>
                                {% bootstrap_field form.start addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
                            </div>
                            <div class='input-group' id='endtimepicker'>
                                {% bootstrap_field form.end addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
                            </div>
                            {% bootstrap_field form.opsys %}
                            {% bootstrap_field form.purpose %}
                            {% bootstrap_field form.installer %}
                            {% bootstrap_field form.scenario %}
                            {% buttons %}
                                <button type="submit" class="btn btn btn-success">
                                    Book
                                </button>
                            {% endbuttons %}
                        </form>
                    </div>
                    <div id="booking_edit_form_div">
                        {% bootstrap_form_errors form type='non_fields' %}
                        <form method="post" action="" class="form" id="bookingeditform">
                            {% csrf_token %}

                            <div class='input-group' id='starttimeeditpicker'>
                                {% bootstrap_field form.start addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
                            </div>
                            <div class='input-group' id='endtimeeditpicker'>
                                {% bootstrap_field form.end addon_after='<span class="glyphicon glyphicon-calendar"></span>' %}
                            </div>
                            {% bootstrap_field form.purpose %}
                            {% bootstrap_field form.installer %}
                            {% bootstrap_field form.scenario %}
                            {% bootstrap_field form.reset %}
                            {% buttons %}
                                <button type="submit" class="btn btn btn-success">
                                    Confirm Edit
                                </button>
                            {% endbuttons %}
                        </form>
                    </div>
                {% else %}
                    <p>Please
                        <a href="{% url 'account:login' %}">
                            login with Jira</a>
                        to book this Pod</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div id="booking_detail_modal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Booking Detail</h4>
                </div>
                <div class="modal-body" id="booking_detail_content">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close
                    </button>
                </div>
            </div>

        </div>
    </div>
{% endblock content %}

{% block extrajs %}
    <script type="text/javascript">
        var bookings_url = "{% url 'booking:bookings_json' resource_id=resource.id %}";
        var booking_detail_prefix = "{% url 'booking:detail_prefix' %}";
        var booking_delete_prefix = "{% url 'booking:delete_prefix' %}";
        var user_timezone = "{{ request.user.userprofile.timezone }}"
    </script>

    <script src={% static "bower_components/moment/moment.js" %}></script>
    <script src={% static "bower_components/fullcalendar/dist/fullcalendar.js" %}></script>
    <script type="text/javascript"
            src={% static "bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js" %}></script>
    <script src={% static "js/fullcalendar-options.js" %}></script>
    <script src={% static "js/datetimepicker-options.js" %}></script>
    <script src={% static "js/booking-calendar.js" %}></script>
{% endblock extrajs %}