Skip to content

Commit 2e32c02

Browse files
AndyNuzziAndyNuzzi
committed
adding ajax to adding new exercises tables
1 parent 6fde955 commit 2e32c02

File tree

5 files changed

+104
-41
lines changed

5 files changed

+104
-41
lines changed

‎backend/src/main/java/webapp3/webapp3/controller/AdminController.java‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -362,12 +362,13 @@ public String clients(Model model){
362362
return "USRADM_12Clients";
363363
}
364364

365+
//ajax
365366
@GetMapping("/clients/page/{page}")
366367
public String getClientPage(Model model, @PathVariable int page){
367368
Page<User> client = userServ.findPageClient(page, "member");
368369
model.addAttribute("list", client.toList());
369370

370-
return "USRADM_12CLientsAJAX";
371+
return "USRMON_06AddExerciseTableAJAX";
371372

372373
}
373374

‎backend/src/main/java/webapp3/webapp3/controller/MonitorController.java‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,11 +233,33 @@ public ResponseEntity<Object> downloadExerciseImage(@PathVariable long id) throw
233233
//add exercise table page
234234
@GetMapping("/MONaddNewExerciseTable")
235235
public String newExerciseTable(Model model, HttpServletRequest request) {
236+
List<User> all = monServ.findByUserType("monitor");
237+
Page<User> userPage = monServ.findPageClient(0, "monitor");
238+
239+
List<Exercise> allEx = exerServ.findAll();
240+
Page<Exercise> exerPage = exerServ.findPage(0);
241+
236242
model.addAttribute("monitor", monServ.findByEmail(request.getUserPrincipal().getName()).orElseThrow());
237243
model.addAttribute("exercises", exerServ.findAll());
244+
245+
model.addAttribute("exerList", allEx);
246+
model.addAttribute("clientList", all);
247+
model.addAttribute("list", exerPage.toList());
248+
model.addAttribute("last", exerPage.getTotalPages());
249+
238250
return "USRMON_06AddExerciseTable";
239251
}
240252

253+
//ajax for adding new exercises
254+
@GetMapping("/MONaddNewExercise/page/{page}")
255+
public String getExercisesPageMonitor(Model model, @PathVariable int page){
256+
Page<Exercise> exerTabPage = exerServ.findPage(page);
257+
model.addAttribute("list", exerTabPage.toList());
258+
259+
return "USRMON_06AddExerciseTableAJAX";
260+
261+
}
262+
241263
@PostMapping("/MONaddNewExerciseTable")
242264
public String addNewExerciseTable(Model model, @RequestParam String name, @RequestParam String description,
243265
@RequestParam List<Long> id,@RequestParam("image") MultipartFile image) throws IOException {

‎backend/src/main/java/webapp3/webapp3/service/ExerciseService.java‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
package webapp3.webapp3.service;
22

33
import org.springframework.beans.factory.annotation.Autowired;
4+
import org.springframework.data.domain.Page;
5+
import org.springframework.data.domain.PageRequest;
46
import org.springframework.stereotype.Service;
57
import webapp3.webapp3.model.Exercise;
68

@@ -37,4 +39,7 @@ public void delete(long id) {
3739
repository.deleteById(id);
3840
}
3941

42+
public Page<Exercise> findPage(int page){
43+
return repository.findAll(PageRequest.of(page, 10));
44+
}
4045
}

‎backend/src/main/resources/templates/USRMON_06AddExerciseTable.html‎

Lines changed: 65 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ <h5 class="card-title colorBlackText">Lista de Ejercicios</h5>
7171
</tr>
7272
</thead>
7373
<tbody class="colorBlackText">
74-
{{#exercises}}
74+
{{#list}}
7575
<tr>
7676
<td>{{name}}</td>
7777
<td>{{description}}</td>
@@ -80,10 +80,14 @@ <h5 class="card-title colorBlackText">Lista de Ejercicios</h5>
8080
<span class="checkmark"></span>
8181
</label></td>
8282
</tr>
83-
{{/exercises}}
83+
{{/list}}
8484
</tbody>
8585
</table>
8686
</div>
87+
<button class="btn default btn-outline el-link selector2 colorWhiteText" type="button" id="loadMore">
88+
Cargar más
89+
<i class="" id="spinner"></i>
90+
</button>
8791

8892
<div class="card-body">
8993
<h4 class="card-title" style="color: black; margin-bottom: 20px;">Descripción</h4>
@@ -164,47 +168,68 @@ <h4 class="card-title" style="color: black; margin-bottom: 20px;">Descripción</
164168
<script src="/assets/libs/quill/dist/quill.min.js"></script>
165169

166170
<script>
167-
//***********************************//
168-
// For select 2
169-
//***********************************//
170-
$(".select2").select2();
171-
172-
/*colorpicker*/
173-
$('.demo').each(function() {
174-
//
175-
// Dear reader, it's actually very easy to initialize MiniColors. For example:
176-
//
177-
// $(selector).minicolors();
178-
//
179-
// The way I've done it below is just for the demo, so don't get confused
180-
// by it. Also, data- attributes aren't supported at this time...they're
181-
// only used for this demo.
182-
//
183-
$(this).minicolors({
184-
control: $(this).attr('data-control') || 'hue',
185-
position: $(this).attr('data-position') || 'bottom left',
186-
187-
change: function(value, opacity) {
188-
if (!value) return;
189-
if (opacity) value += ', ' + opacity;
190-
if (typeof console === 'object') {
191-
console.log(value);
192-
}
193-
},
194-
theme: 'bootstrap'
195-
});
196-
197-
});
198-
/*datwpicker*/
199-
jQuery('.mydatepicker').datepicker();
200-
jQuery('#datepicker-autoclose').datepicker({
201-
autoclose: true,
202-
todayHighlight: true
171+
var contPage = 1;
172+
$( "#loadMore" ).click(function() {
173+
$.ajax({
174+
url: "/MONaddNewExercise/page/" + contPage,
175+
method: "get",
176+
beforeSend: ()=>{
177+
$("#spinner").addClass("fa fa-circle-notch fa-spin");
178+
}
179+
}).done(function (answer) {
180+
$("tr").last().after(answer);
181+
contPage += 1;
182+
$("#spinner").removeClass("fa fa-circle-notch fa-spin");
183+
if(contPage === {{last}}){
184+
$("#loadMore").off("click");
185+
$("#loadMore").remove();
186+
}
203187
});
204-
var quill = new Quill('#editor', {
205-
theme: 'snow'
188+
});
189+
</script>
190+
191+
<script>
192+
//***********************************//
193+
// For select 2
194+
//***********************************//
195+
$(".select2").select2();
196+
197+
/*colorpicker*/
198+
$('.demo').each(function() {
199+
//
200+
// Dear reader, it's actually very easy to initialize MiniColors. For example:
201+
//
202+
// $(selector).minicolors();
203+
//
204+
// The way I've done it below is just for the demo, so don't get confused
205+
// by it. Also, data- attributes aren't supported at this time...they're
206+
// only used for this demo.
207+
//
208+
$(this).minicolors({
209+
control: $(this).attr('data-control') || 'hue',
210+
position: $(this).attr('data-position') || 'bottom left',
211+
212+
change: function(value, opacity) {
213+
if (!value) return;
214+
if (opacity) value += ', ' + opacity;
215+
if (typeof console === 'object') {
216+
console.log(value);
217+
}
218+
},
219+
theme: 'bootstrap'
206220
});
207221

222+
});
223+
/*datwpicker*/
224+
jQuery('.mydatepicker').datepicker();
225+
jQuery('#datepicker-autoclose').datepicker({
226+
autoclose: true,
227+
todayHighlight: true
228+
});
229+
var quill = new Quill('#editor', {
230+
theme: 'snow'
231+
});
232+
208233
</script>
209234

210235

‎backend/src/main/resources/templates/USRMON_06AddExerciseTableAJAX.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{{#list}}
2+
<tr>
3+
<td>{{name}}</td>
4+
<td>{{description}}</td>
5+
<td><label class="customcheckbox m-b-20">
6+
<input type="checkbox" id="mainCheckbox{{id}}" name="id" value="{{id}}"/>
7+
<span class="checkmark"></span>
8+
</label></td>
9+
</tr>
10+
{{/list}}

0 commit comments

Comments
 (0)