source: vorlesung/code/VL10-rest_express/shop/app/index.html

Last change on this file was 246, checked in by tr, 6 years ago
File size: 4.0 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Artikelverwaltung REST Demo</title>
6<style>
7th {
8    border: 1px solid black;
9    font-weight: bold;
10}
11td {
12    border: 1px solid black;
13}
14</style>
15
16</head>
17<body>
18<div id="status"></div>
19<hr />
20<div id="daten"></div>
21<hr />
22<form id="newentry" name="newentry" method="post" action="/article">
23    Neu / Bearbeiten<br />
24    <label for="name">Name</label><input id="name" name="name" type="text" /><br />
25    <label for="preis">Preis</label><input id="preis" name="preis" type="text" /><br />
26    <label for="beschreibung">Beschreibung</label><input id="beschreibung" name="beschreibung" type="text" /><br />
27    <input id="id" name="id" type="hidden" value="-1" />
28    <button id="neu" type="submit">Absenden</button>
29    <input id="clear" type="button" value="Formular leeren" />
30</form>
31<script src="lib/jquery-3.2.1.js"></script>
32<script>
33$(document).ready(function () {
34    // Eventhandler für den Submit-Button des Formulars
35    $('#newentry').submit(function(e) {
36       
37        var method = 'POST';
38        var url = '/articles';
39       
40        // Wenn im Formular eine ID gesetzt ist: Bearbeiten statt neu anlegen
41        if ($('#id').val() != '-1') {
42            method = 'PUT';
43            url = url + '/' + $('#id').val();
44        }
45
46        $.ajax({
47            type: method,
48            url: url,
49            // Daten des Formulars als Querystring serialisieren
50            data: $('#newentry').serialize(),
51        })
52        .done(function(data) {
53            // Wird bei Eintreffen der Antwort aufgerufen
54            createTable();
55            getAll();
56        });
57
58        // Verhindern, dass der normale Submit des Browser ausgeführt wird
59        e.preventDefault();
60    });
61
62    // onclick für den Clear-Button
63    $('#clear').click(function(e){
64        clearForm();
65    });
66   
67    createTable();
68    getAll();
69});
70
71// Holt Artikel mit bestimmter ID vom Server und gibt
72// ihn im div 'status' aus
73function getEntry(id) {
74    $.ajax({
75        type: 'GET',
76        url: '/articles/' + id,
77    })
78    .done(function(data) {         
79        // Wird bei Eintreffen der Antwort aufgerufen
80        var s = '';
81        for(var key in data){
82            s += (key + ': ' + data[key] + '<br>');
83        }
84        $('#status').html(s);
85        clearForm();
86    });
87}
88
89// Holt alle Artikel vom Server und gibt sie als Tabelle aus
90function getAll() {
91    $.ajax({
92        type: 'GET',
93        url: '/articles',
94    })
95    .done( function(data) {
96        // Wird bei Eintreffen der Antwort aufgerufen
97        for (var i = 0; i < data.length; i++) {
98            createTableRow(data[i]);
99        }
100        clearForm();
101    });
102}
103
104// Holt Artikel mit bestimmter ID vom Server und schreibt
105// die Attributwerte in das Formular
106function editEntry(id) {
107    $.ajax({
108        type: 'GET',
109        url: '/articles/' + id,
110    })
111    .done(function(data) {
112        // Wird bei Eintreffen der Antwort aufgerufen
113        $('#name').val(data.name);
114        $('#preis').val(data.preis);
115        $('#beschreibung').val(data.beschreibung);
116        $('#id').val(data.id);
117    });
118}
119
120// Löscht Artikel mit bestimmter ID vom Server
121function deleteEntry(id) {
122    $.ajax({
123        type: 'DELETE',
124        url: '/articles/' + id,
125    })
126    .done(function(data) {
127        // Wird bei Eintreffen der Antwort aufgerufen
128        $('#status').html(data);
129        createTable();
130        getAll();
131    });
132}
133
134// Erzeugt Tabellenzeile mit einem Artikel
135function createTableRow(entry) {
136    var tr = $('<tr></tr>');
137    var td1 = $('<td></td>').text('[' + entry.id + '] ' + entry.name);
138    td1.click(function(){
139        getEntry(entry.id);
140    });
141   
142    var td2 = $('<td></td>');
143   
144    var span2 = $('<span></span>').html('&nbsp;edit | ');
145    span2.click(function(){
146        editEntry(entry.id);
147    });
148
149    var span3 = $('<span></span>').html('delete&nbsp;');
150    span3.click(function(){
151        deleteEntry(entry.id);
152    });
153
154    td2.append(span2, span3);
155    tr.append(td1, td2);
156    $('#tabelle').append(tr);
157}
158
159// Erzeugt leere Tabelle
160function createTable() {
161    $('#tabelle').remove();
162
163    $('#daten').append('<table id="tabelle"></table>');
164    $('#tabelle').append('<tr><th>[ID] Name</th><th>Funktionen</th></tr>'); 
165}
166
167// Leert das Formular
168function clearForm() {
169    $('#newentry').trigger('reset');
170    $('#id').val('-1');
171}
172</script>
173</body>
174</html>
Note: See TracBrowser for help on using the repository browser.