source: src/main/resources/templates/restaurantForm.html@ db39d9e

main
Last change on this file since db39d9e was d24f17c, checked in by Aleksandar Panovski <apano77@…>, 15 months ago

Initial commit
  • Property mode set to 100644
File size: 6.6 KB
RevLine 
[d24f17c]1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Restaurant Registration</title>
7 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8</head>
9<body>
10<div class="container">
11 <h2 class="my-4">Restaurant Registration Form</h2>
12 <form action="/register-restaurant" method="post">
13 <div class="form-group">
14 <label for="name">Name</label>
15 <input type="text" class="form-control" id="name" name="name" required>
16 </div>
17 <div class="form-group">
18 <label for="cuisineType">Cuisine Type (Italian, French, Grill)</label>
19 <input type="text" class="form-control" id="cuisineType" name="cuisineType" required>
20 </div>
21 <div class="form-group">
22 <label for="address">Address</label>
23 <input type="text" class="form-control" id="address" name="address" required>
24 </div>
25 <div class="form-group">
26 <label for="phone">Phone</label>
27 <input type="text" class="form-control" id="phone" name="phone" required>
28 </div>
29 <div class="form-group">
30 <label for="operatingHours">Operating Hours (Format example: 09:00-23:00, 10:00-01:00)</label>
31 <input type="text" class="form-control" id="operatingHours" name="operatingHours" required>
32 </div>
33 <div class="form-group">
34 <label for="website">Website</label>
35 <input type="text" class="form-control" id="website" name="website">
36 </div>
37 <div class="form-group">
38 <label for="socialMediaLinks">Social Media Links</label>
39 <input type="text" class="form-control" id="socialMediaLinks" name="socialMediaLinks">
40 </div>
41 <div class="form-group">
42 <label for="rating">Rating</label>
43 <input type="number" step="0.01" class="form-control" id="rating" name="rating" min="0" max="5">
44 </div>
45 <div class="form-group">
46 <label for="numberOfTables">Number of Tables:</label>
47 <input type="number" class="form-control" id="numberOfTables" name="numberOfTables" required>
48 </div>
49
50 <!-- Table details -->
51 <div id="tableDetails">
52 <!-- Table details fields will be added dynamically here -->
53 </div>
54 <button type="submit" class="btn btn-primary">Submit</button>
55 </form>
56</div>
57<script>
58 document.getElementById('numberOfTables').addEventListener('change', function() {
59 var numberOfTables = parseInt(this.value);
60 var tableDetails = document.getElementById('tableDetails');
61
62 // Clear previous inputs
63 tableDetails.innerHTML = '';
64
65 // Add input fields for each table
66 for (var i = 0; i < numberOfTables; i++) {
67 var tableDiv = document.createElement('div');
68 tableDiv.className = 'table-details';
69
70 var title = document.createElement('h4');
71 title.innerText = 'Table ' + (i + 1) + ' Details';
72 tableDiv.appendChild(title);
73
74 // Capacity input field
75 var capacityInput = document.createElement('input');
76 capacityInput.type = 'number';
77 capacityInput.className = 'form-control';
78 capacityInput.placeholder = 'Capacity';
79 capacityInput.name = 'tableCapacities';
80 capacityInput.required = true; // Set as required
81 tableDiv.appendChild(capacityInput);
82 tableDiv.appendChild(document.createElement('br'));
83
84 // Location input field
85 var locationInput = document.createElement('input');
86 locationInput.type = 'text';
87 locationInput.className = 'form-control';
88 locationInput.placeholder = 'Location';
89 locationInput.name = 'tableLocations';
90 locationInput.required = true; // Set as required
91 tableDiv.appendChild(locationInput);
92 tableDiv.appendChild(document.createElement('br'));
93
94 var smokingAreaInput = document.createElement('input');
95 smokingAreaInput.type = 'checkbox';
96 smokingAreaInput.className = 'form-check-input';
97 smokingAreaInput.id = 'smokingArea' + (i + 1);
98 smokingAreaInput.name = 'tableSmokingAreas';
99 tableDiv.appendChild(smokingAreaInput);
100
101// Smoking area input field
102 var smokingAreaInput = document.createElement('input');
103 smokingAreaInput.type = 'checkbox';
104 smokingAreaInput.className = 'form-check-input';
105 smokingAreaInput.id = 'smokingArea' + (i + 1);
106 smokingAreaInput.name = 'tableSmokingAreas';
107 tableDiv.appendChild(smokingAreaInput);
108
109// Smoking area input field
110 var smokingAreaInput = document.createElement('input');
111 smokingAreaInput.type = 'checkbox';
112 smokingAreaInput.className = 'form-check-input';
113 smokingAreaInput.id = 'smokingArea' + (i + 1);
114 smokingAreaInput.name = 'tableSmokingAreas';
115 tableDiv.appendChild(smokingAreaInput);
116
117// Hidden input field for 'false' value
118 var hiddenSmokingAreaInput = document.createElement('input');
119 hiddenSmokingAreaInput.type = 'hidden';
120 hiddenSmokingAreaInput.name = 'tableSmokingAreas';
121 hiddenSmokingAreaInput.value = 'false';
122 tableDiv.appendChild(hiddenSmokingAreaInput);
123
124 var smokingAreaLabel = document.createElement('label');
125 smokingAreaLabel.className = 'form-check-label';
126 smokingAreaLabel.innerText = 'Smoking Area';
127 smokingAreaLabel.setAttribute('for', 'smokingArea' + (i + 1));
128 tableDiv.appendChild(smokingAreaLabel);
129 tableDiv.appendChild(document.createElement('br'));
130
131 // Description input field
132 var descriptionInput = document.createElement('textarea');
133 descriptionInput.className = 'form-control';
134 descriptionInput.placeholder = 'Description';
135 descriptionInput.name = 'tableDescriptions';
136 descriptionInput.required = true; // Set as required
137 tableDiv.appendChild(descriptionInput);
138 tableDiv.appendChild(document.createElement('br'));
139
140 tableDetails.appendChild(tableDiv);
141 }
142 });
143</script>
144
145<!-- Bootstrap JS -->
146<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
147<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
148<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
149</body>
150</html>
Note: See TracBrowser for help on using the repository browser.