Ajaxify views

This commit is contained in:
Alexander Werner 2017-02-20 19:11:48 +01:00
parent 61ff97a8b2
commit b100c15a82
8 changed files with 157 additions and 115 deletions

View File

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

View File

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

View File

@ -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 %}

View File

@ -3,55 +3,13 @@
{% block title %}Location Data{% endblock %} {% block title %}Location Data{% endblock %}
{% block content %} {% block content %}
<h1>Locationdata: {{ locationdata.id }}</h1> {% include 'billard/locationdata_detail_ajax.html' %}
{% 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>
{% endblock %} {% endblock %}
{% block js %}
<script type="text/javascript">
$( document ).ready(function() {
setInterval(function(){$( "#content" ).load( "#")},1000);
});
</script>
{% endblock %}

View File

@ -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>

View File

@ -3,40 +3,13 @@
{% block title %}Location Data{% endblock %} {% block title %}Location Data{% endblock %}
{% block content %} {% block content %}
<div id="location-selector" class="alert"> {% include 'billard/locationdata_list_ajax.html' %}
<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 %} {% endblock %}
{% block js %}
<script type="text/javascript">
$( document ).ready(function() {
setInterval(function(){$( "#content" ).load( "#")},1000);
});
</script>
{% endblock %}

View File

@ -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 %}

View File

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