Ajaxify views

billard/templates/billard/base.html

@@ -42,12 +42,14 @@
         </div>
     </nav>
 
-    <div class="container">
+    <div class="container" id="content">
 {% block content %}
 {% endblock %}
     </div><!-- /.container -->
     <script src="{% static 'billard/js/jquery-1.12.4.min.js' %}"></script>
     <script src="{% static 'billard/js/bootstrap.min.js' %}"></script>
     <script src="{% static 'billard/js/carom.js' %}"></script>
+        {% block js %}
+        {% endblock %}
 </body>
 </html>

billard/templates/billard/index.html

@@ -1,34 +1,15 @@
 {% extends 'billard/base.html' %}
 {% load display_client %}
 
-{% block header %}
-    <meta http-equiv="refresh" content="3" />
-{% endblock %}
-
 {% block title %}Location Data{% endblock %}
 
 {% block content %}
-{% if not locations|length_is:"1" %}
-    <form action="." method="post" id="location-form">
-        {% csrf_token %}
-        <div id="location-selector" class="alert">
-            <select class="form-control" form="location-form" name="location-selector" id="location-select">
-{% for loc in locations %}
-                <option value="{{ loc.id }}"{%  if loc.id == location_id %} selected{% endif %}>{{ loc.code }} - {{ loc.name }}</option>
-{% endfor %}
-            </select>
-        </div>
-    </form>
-{% endif %}
-{% if clients %}
-{% for cli in clients %}
-{% for i in range %} {{ cli|display_client:i }} {% endfor %}
-{% endfor %}
-{% else %}
-<div class="col-md-12">
-    <div class="col-md-12 alert alert-danger">Keine Tische angelegt!</div>
-</div>
-{% endif %}
+{% include 'billard/index_ajax.html' %}
+{% endblock %}
+{% block js %}
+    <script type="text/javascript">
+$( document ).ready(function() {
+setInterval(function(){$( "#content" ).load( "#")},1000);
+});
+</script>
 {% endblock %}
-
-

billard/templates/billard/index_ajax.html

@@ -0,0 +1,23 @@
+{% load display_client %}
+
+{% if not locations|length_is:"1" %}
+    <form action="." method="post" id="location-form">
+        {% csrf_token %}
+        <div id="location-selector" class="alert">
+            <select class="form-control" form="location-form" name="location-selector" id="location-select">
+{% for loc in locations %}
+                <option value="{{ loc.id }}"{%  if loc.id == location_id %} selected{% endif %}>{{ loc.code }} - {{ loc.name }}</option>
+{% endfor %}
+            </select>
+        </div>
+    </form>
+{% endif %}
+{% if clients %}
+{% for cli in clients %}
+{% for i in range %} {{ cli|display_client:i }} {% endfor %}
+{% endfor %}
+{% else %}
+<div class="col-md-12">
+    <div class="col-md-12 alert alert-danger">Keine Tische angelegt!</div>
+</div>
+{% endif %}

billard/templates/billard/locationdata_detail.html

@@ -3,55 +3,13 @@
 {% block title %}Location Data{% endblock %}
 
 {% block content %}
-    <h1>Locationdata: {{ locationdata.id }}</h1>
-
-    {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
-
-    <form action="{% url 'index' %}" method="post" class="form-horizontal">
-        {% csrf_token %}
-        <div class="form-group">
-            <label for="location_id" class="col-sm-2 control-label">Location Id</label>
-            <div class="col-sm-10">
-                <input id="location_id" type="text" name="location_id" value="{{ locationdata.location_id }}"
-                       placeholder="Locaton" class="form-control" disabled="disabled"/>
-            </div>
-            <div class="form-group">
-                <label for="table_no" class="col-sm-2 control-label">Table Number</label>
-                <div class="col-sm-10">
-                    <input id="table_no" type="number" name="table_no" value="{{ locationdata.table_no }}"
-                           placeholder="Table" class="form-control" min="1" max="8" disabled="disabled"/>
-                </div>
-                <div class="form-group">
-                    <label for="tst" class="col-sm-2 control-label">Timestamp</label>
-                    <div class="col-sm-10">
-                        <input id="tst" type="datetime" name="tst" value="{{ locationdata.tst }}"
-                               placeholder="Table" class="form-control" disabled="disabled"/>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="on_off" class="col-sm-2 control-label">On / Off</label>
-                    <div class="col-sm-10">
-                        <input id="on_off" type="checkbox" name="on_off" value="{{ locationdata.on_off }}"
-                               placeholder="Table" class="form-control" disabled="disabled"/>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="processed" class="col-sm-2 control-label">Processed</label>
-                    <div class="col-sm-10">
-                        <input id="processed" type="checkbox" name="processed" value="{{ locationdata.processed }}"
-                               placeholder="Table" class="form-control" disabled="disabled"/>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="error_msg" class="col-sm-2 control-label">Error Message</label>
-                    <div class="col-sm-10">
-                        <input id="error_msg" type="text" name="error_msg" value="{{ locationdata.error_msg }}"
-                               placeholder="Table" class="form-control" disabled="disabled"/>
-                    </div>
-                </div>
-                <button type="submit" class="btn btn-default">Abschicken</button>
-                <a class="btn btn-default" href=".." role="button">Zurück</a>
-    </form>
+   {% include 'billard/locationdata_detail_ajax.html' %}
 {% endblock %}
 
-
+{% block js %}
+    <script type="text/javascript">
+$( document ).ready(function() {
+setInterval(function(){$( "#content" ).load( "#")},1000);
+});
+</script>
+{% endblock %}

billard/templates/billard/locationdata_detail_ajax.html

@@ -0,0 +1,51 @@
+<h1>Locationdata: {{ locationdata.id }}</h1>
+
+{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
+
+<form action="{% url 'index' %}" method="post" class="form-horizontal">
+    {% csrf_token %}
+    <div class="form-group">
+        <label for="location_id" class="col-sm-2 control-label">Location Id</label>
+        <div class="col-sm-10">
+            <input id="location_id" type="text" name="location_id" value="{{ locationdata.location_id }}"
+                   placeholder="Locaton" class="form-control" disabled="disabled"/>
+        </div>
+        <div class="form-group">
+            <label for="table_no" class="col-sm-2 control-label">Table Number</label>
+            <div class="col-sm-10">
+                <input id="table_no" type="number" name="table_no" value="{{ locationdata.table_no }}"
+                       placeholder="Table" class="form-control" min="1" max="8" disabled="disabled"/>
+            </div>
+            <div class="form-group">
+                <label for="tst" class="col-sm-2 control-label">Timestamp</label>
+                <div class="col-sm-10">
+                    <input id="tst" type="datetime" name="tst" value="{{ locationdata.tst }}"
+                           placeholder="Table" class="form-control" disabled="disabled"/>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="on_off" class="col-sm-2 control-label">On / Off</label>
+                <div class="col-sm-10">
+                    <input id="on_off" type="checkbox" name="on_off" value="{{ locationdata.on_off }}"
+                           placeholder="Table" class="form-control" disabled="disabled"/>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="processed" class="col-sm-2 control-label">Processed</label>
+                <div class="col-sm-10">
+                    <input id="processed" type="checkbox" name="processed" value="{{ locationdata.processed }}"
+                           placeholder="Table" class="form-control" disabled="disabled"/>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="error_msg" class="col-sm-2 control-label">Error Message</label>
+                <div class="col-sm-10">
+                    <input id="error_msg" type="text" name="error_msg" value="{{ locationdata.error_msg }}"
+                           placeholder="Table" class="form-control" disabled="disabled"/>
+                </div>
+            </div>
+            <button type="submit" class="btn btn-default">Abschicken</button>
+            <a class="btn btn-default" href=".." role="button">Zurück</a>
+</form>
+
+

billard/templates/billard/locationdata_list.html

@@ -3,40 +3,13 @@
 {% block title %}Location Data{% endblock %}
 
 {% block content %}
-    <div id="location-selector" class="alert">
-        <select class="form-control">
-            <option value="1">Casino 1</option>
-            <option value="2">Casino 2</option>
-        </select>
-    </div>
-
-{% if object_list %}
-    <h1>Location Data</h1>
-    <table class="table table-hover">
-        <tr>
-            <th>ID</th>
-            <th>Location</th>
-            <th>Table</th>
-            <th>Timestamp</th>
-            <th>On_Off</th>
-            <th>Proc</th>
-            <th>Error</th>
-        </tr>
-    {% for location_data in object_list %}
-        <tr>
-            <td><a href="{% url 'detail' location_data.id %}">{{ location_data.id }}</a></td>
-            <td>{{ location_data.location_id }}</td>
-            <td>{{ location_data.table_no }}</td>
-            <td>{{ location_data.tst }}</td>
-            <td>{{ location_data.on_off }}</td>
-            <td>{{ location_data.processed }}</td>
-            <td>{{ location_data.error_msg }}</td>
-        </tr>
-    {% endfor %}
-    </table>
-{% else %}
-    <p>No data available.</p>
-{% endif %}
+{% include 'billard/locationdata_list_ajax.html' %}
 {% endblock %}
 
-
+{% block js %}
+    <script type="text/javascript">
+$( document ).ready(function() {
+setInterval(function(){$( "#content" ).load( "#")},1000);
+});
+</script>
+{% endblock %}

billard/templates/billard/locationdata_list_ajax.html

@@ -0,0 +1,42 @@
+{% extends 'billard/base.html' %}
+
+{% block title %}Location Data{% endblock %}
+
+{% block content %}
+    <div id="location-selector" class="alert">
+        <select class="form-control">
+            <option value="1">Casino 1</option>
+            <option value="2">Casino 2</option>
+        </select>
+    </div>
+
+{% if object_list %}
+    <h1>Location Data</h1>
+    <table class="table table-hover">
+        <tr>
+            <th>ID</th>
+            <th>Location</th>
+            <th>Table</th>
+            <th>Timestamp</th>
+            <th>On_Off</th>
+            <th>Proc</th>
+            <th>Error</th>
+        </tr>
+    {% for location_data in object_list %}
+        <tr>
+            <td><a href="{% url 'detail' location_data.id %}">{{ location_data.id }}</a></td>
+            <td>{{ location_data.location_id }}</td>
+            <td>{{ location_data.table_no }}</td>
+            <td>{{ location_data.tst }}</td>
+            <td>{{ location_data.on_off }}</td>
+            <td>{{ location_data.processed }}</td>
+            <td>{{ location_data.error_msg }}</td>
+        </tr>
+    {% endfor %}
+    </table>
+{% else %}
+    <p>No data available.</p>
+{% endif %}
+{% endblock %}
+
+

billard/views.py

@@ -17,14 +17,26 @@ class LocationDataViewSet(viewsets.ModelViewSet):
 class IndexView(generic.ListView):
     model = LocationData
 
+    def get_template_names(self):
+        if self.request.is_ajax():
+            return ('billard/locationdata_list_ajax.html',)
+        return super().get_template_names()
 
 class LocationDataDetailView(DetailView):
     model = LocationData
 
+    def get_template_names(self):
+        if self.request.is_ajax():
+            return ('billard/locationdata_detail_ajax.html',)
+        return super().get_template_names()
+
 
 @login_required
 def index(request):
     if request.method == 'GET':
+        template = 'billard/index.html'
+        if request.is_ajax():
+            template = 'billard/index_ajax.html'
         min_loc = Location.objects.filter(users__id=request.user.id).aggregate(Min('id'))['id__min']
         loc = None
         if 'loc' in request.GET:
@@ -35,7 +47,7 @@ def index(request):
                 resp['Location'] += '?loc={}'.format(str(min_loc))
                 return resp
             else:
-                return render(request, 'billard/index.html')
+                return render(request, template)
         if loc is None:
             loc = min_loc
         locations = Location.objects.filter(users__id=request.user.id).order_by('code')
@@ -46,7 +58,7 @@ def index(request):
             'clients': clients,
             'location_id': int(loc),
         }
-        return render(request, 'billard/index.html', context=context)
+        return render(request, template, context=context)
     if request.method == 'POST':
         loc = request.POST['location-selector']
         resp = redirect('carom_index')