Skip to content
Snippets Groups Projects
Commit 80257abb authored by Ondřej Trojan's avatar Ondřej Trojan
Browse files

display set detail

parent 9087e2fc
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/main/java/com/museum/projection/controller/WebController.java
+ 7
− 0
View file @ 80257abb
......@@ -271,6 +271,13 @@ public class WebController implements WebMvcConfigurer {
return "videoedit/videoset";
}
@GetMapping("/control/videoedit/videoset/{displaySetId}")
public String ControlVideoEditVideoSetDetail(@PathVariable("displaySetId") @OnlyNumbers String displaySetId, Principal principal, Model model) {
model.addAttribute("displayTracksForDisplaySet", displayTrackService.getDisplayTracksByDisplaySetId(displaySetId));
model.addAttribute("displaySet", displaySetService.getDisplaySetById(displaySetId).getData());
return "fragments/videoSetFragments :: displaySetDetail";
}
@PostMapping("/control/videoedit/videoset/add")
public String ControlVideoEditVideoSetAdd(@Valid VideoSetForm videoSetForm, BindingResult bindingResult, Model model, Principal principal, RedirectAttributes redirectAttributes) {
if (bindingResult.hasErrors()) {
......
src/main/resources/static/js/displayset.js
+ 18
− 3
View file @ 80257abb
import {serverUrl, getCookie, sendHttpRequest} from './common.js';
let displaySetAddContent = document.querySelector("div#createSetTrack")
let videoSetDetailsButtons = document.querySelectorAll(".videoset-publish")
videoSetDetailsButtons.forEach(button => button.addEventListener('click', function () {
let displaySetDetailContent = document.querySelector("div#videoSetDetail")
let videoSetPublishButtons = document.querySelectorAll(".videoset-publish")
let videoSetDetailButtons = document.querySelectorAll(".video-set-detail")
videoSetPublishButtons.forEach(button => button.addEventListener('click', function () {
let publishedField = document.querySelector("span#field-publish-" + this.value.toString());
publishedField.innerText = "";
publishedField.classList.add("spinner-border");
......@@ -12,3 +13,17 @@ videoSetDetailsButtons.forEach(button => button.addEventListener('click', functi
}).catch(err => {
})
}));
videoSetDetailButtons.forEach(button => button.addEventListener('click', function () {
sendHttpRequest('GET', serverUrl + '/control/videoedit/videoset/' + this.value)
.then(responseData => {
clearDetailContainer();
displaySetDetailContent.insertAdjacentHTML('beforeend', responseData);
}).catch(err => {
})
}));
function clearDetailContainer() {
displaySetDetailContent = document.querySelector("div#videoSetDetail")
if (displaySetDetailContent) displaySetDetailContent.innerHTML = ""
}
\ No newline at end of file
src/main/resources/templates/fragments/videoSetFragments.html
+ 41
− 41
View file @ 80257abb
......@@ -34,7 +34,6 @@
</div>
<div class="form-group row">
<div class="col-sm-12">
<button id="uploadFileSubmitButton" type="submit" class="btn btn-primary float-right"
......@@ -50,44 +49,8 @@
</div>
<div th:fragment="displaySetDetail">
<h4>Detail for <span th:text="${displaySet.name}"></span></h4>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Filename</th>
<th scope="col">Path</th>
<th scope="col">Duration</th>
<th scope="col">Size</th>
<th scope="col">Description</th>
<th scope="col">Synchronized</th>
<th scope="col">Created</th>
<th scope="col">Created at</th>
</tr>
</thead>
<tbody>
<tr th:if="${videoFilesForDisplayTrack.isEmpty()}">
<td scope="row"> No users to be displayed</td>
</tr>
<tr th:each="videofile : ${videoFilesForDisplayTrack}">
<td scope="row"><span th:text="${videofile.getId()}"> Id </span></td>
<td><span th:text="${videofile.getFilename()}"> name </span></td>
<td><span th:text="${videofile.filepath}"> path </span></td>
<td><span th:text="${videofile.duration}"> duration </span></td>
<td><span th:text="${videofile.fileSize}"> size </span></td>
<td><span th:text="${videofile.description}"> description</span></td>
<td><span th:text="${videofile.clientSynchronized}"> synchronized </span></td>
<td><span th:text="${videofile.createdByUsername}"> created by </span></td>
<td><span th:text="${videofile.getCreatedCet()}"> created </span></td>
</tr>
</tbody>
</table>
</div>
<div th:fragment="autonomousCreate">
<div class="my-2" th:fragment="autonomousCreate">
<h3>Update autonomous order</h3>
<br>
......@@ -101,12 +64,14 @@
<div th:if="${clientCount==0}">
<a scope="row"> No videotracks to be displayed</a>
</div>
<div class="form-group row" th:each="displaySet, iter : ${displaySets}" >
<div class="form-group row" th:each="displaySet, iter : ${displaySets}">
<label for="inputFilename" class="col-sm-2 col-form-label" th:text="${displaySet.getName()}"></label>
<div class="col-sm-10">
<select class="custom-select" th:field="*{autonomousSets[__${displaySet.id}__].order}" >
<select class="custom-select" th:field="*{autonomousSets[__${displaySet.id}__].order}">
<option value="0" selected>-</option>
<option th:value="${order}" th:text="${order}" th:each="order:${#numbers.sequence(1,iter.size)}" >or</option>
<option th:value="${order}" th:text="${order}" th:each="order:${#numbers.sequence(1,iter.size)}">
or
</option>
</select>
</div>
......@@ -127,6 +92,41 @@
</div>
<div th:fragment="displaySetDetail">
<h4>Detail for <span th:text="${displaySet.name}"></span></h4>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Display set</th>
<th scope="col">Name</th>
<th scope="col">Duration</th>
<th scope="col">Track types</th>
<th scope="col">Description</th>
<th scope="col">Created by</th>
<th scope="col">Created</th>
</tr>
</thead>
<tbody>
<tr th:if="${displayTracksForDisplaySet.isEmpty()}">
<td scope="row"> No users to be displayed</td>
</tr>
<tr th:each="displayTrack : ${displayTracksForDisplaySet}">
<td scope="row"><span th:text="${displayTrack.getId()}"> Id </span></td>
<td><span th:text="${displayTrack.getDisplaySet()}"> display set Id </span></td>
<td><span th:text="${displayTrack.getName()}"> name </span></td>
<td><span th:text="${displayTrack.getDuration()}"> duration </span></td>
<td><span th:text="${displayTrack.getTrackType()}"> trackTypes </span></td>
<td><span th:text="${displayTrack.getDescription()}"> description </span></td>
<td><span th:text="${displayTrack.getCreatedByUsername()}"> createdby </span></td>
<td><span th:text="${displayTrack.getCreatedCet()}"> created </span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
\ No newline at end of file
src/main/resources/templates/videoedit/videoset.html
+ 12
− 7
View file @ 80257abb
......@@ -11,12 +11,14 @@
<div layout:fragment="content_videoedit">
<h1>Video set</h1>
<p>Video set is a set of video tracks</p>
<form class="card" th:classappend="${somethingIsPublished} ? bg-info : ''" th:method="post" th:action="@{/control/videoedit/videoset/synchronize}">
<form class="card" th:classappend="${somethingIsPublished} ? bg-info : ''" th:method="post"
th:action="@{/control/videoedit/videoset/synchronize}">
<div class="card-body">
<h3 th:if="${somethingIsPublished}">You have a set to synchronize!</h3>
<div class="row">
<p class="col-sm-10" th:classappend="${!clientConnected} ? text-bold : ''">
Synchronization copies all displaySets marked as <span class="text-success">Published</span> to all client devices.
Synchronization copies all displaySets marked as <span class="text-success">Published</span> to all
client devices.
Can be done only when all clients are connected.
<span th:if="${somethingIsPublished}">One of the display sets have changed</span>
</p>
......@@ -31,6 +33,8 @@
</div>
</form>
<br>
<div id="videoSetDetail">
</div>
<table class="table">
<thead class="thead-dark">
<tr>
......@@ -53,8 +57,10 @@
<td><span th:text="${videoset.getName()}"> name </span></td>
<td><span th:text="${videoset.getDuration()}"> duration </span></td>
<td><span th:id="'field-publish-'+${videoset.getId()}"
th:text="${videoset.getStatus()}" th:classappend="${videoset.isPublished()} ? (${videoset.isChanged()} ? text-warning : text-success) : ''"> status </span></td>
<!-- <td><span th:text="${videoset.getStatus()}"> status </span></td>-->
th:text="${videoset.getStatus()}"
th:classappend="${videoset.isPublished()} ? (${videoset.isChanged()} ? text-warning : text-success) : ''"> status </span>
</td>
<!-- <td><span th:text="${videoset.getStatus()}"> status </span></td>-->
<td><span th:text="${videoset.getDescription()}"> description </span></td>
<td><span th:text="${videoset.getCreatedByUsername()}"> createdby </span></td>
<td><span th:text="${videoset.getCreatedCet()}"> created </span></td>
......@@ -67,8 +73,10 @@
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<button class="dropdown-item videoset-publish" th:value="${videoset.getId()}">Publish</button>
<button class="dropdown-item video-set-detail" th:value="${videoset.getId()}">Details</button>
</div>
</div>
</td>
</tr>
......@@ -77,9 +85,6 @@
</table>
<div id="videoSetDetail">
</div>
<div id="createVideoSet">
<div th:replace="fragments/videoSetFragments :: displaySetCreate"></div>
......
src/main/resources/templates/videoedit/videotrack.html
+ 3
− 2
View file @ 80257abb
......@@ -11,6 +11,8 @@
<div layout:fragment="content_videoedit">
<h1>Video track</h1>
<p>Video track is set of videofiles, typicaly for 5 devices</p>
<div id="videoTrackDetail">
</div>
<table class="table">
<thead class="thead-dark">
<tr>
......@@ -53,12 +55,11 @@
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div id="videoTrackDetail">
</div>
<div id="createVideoTrack">
<div th:replace="fragments/videoTrackFragments :: displayTrackCreate"></div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment