frontend next prev stop

src/main/resources/static/js/control.js

@@ -2,6 +2,9 @@ import {serverUrl, getCookie, sendHttpRequest} from './common.js';
 
 var playBtn = document.getElementById('play');
 var pauseBtn = document.getElementById('pause');
+var nextBtn = document.getElementById('next');
+var prevBtn = document.getElementById('prev');
+var stopBtn = document.getElementById('stop');
 var shutdown1Btn = document.getElementById('shutdown1');
 var shutdown2Btn = document.getElementById('shutdown2');
 
@@ -23,21 +26,14 @@ window.setInterval(updatePlayedTrack, 500);
 
 let addPlaylist = document.querySelectorAll(".change-playlist")
 addPlaylist.forEach(button => button.addEventListener('click', function () {
-    sendHttpRequest('POST', serverUrl + apiVlcPrefix + '/addPlaylist/' + this.value)
+    sendHttpRequest('POST', serverUrl + apiVlcPrefix + '/addplaylist/' + this.value)
         .then(responseData => {
         }).catch(err => {
     })
 }));
 
-function controlPlay() {
-    sendHttpRequest('POST', serverUrl + apiVlcPrefix + '/play').then(responseData => {
-        handeResponseAlert(responseData);
-    }).catch(err => {
-    })
-}
-
-function controlPause() {
-    sendHttpRequest('POST', serverUrl + apiVlcPrefix + '/pause').then(responseData => {
+function controlEvent(event) {
+    sendHttpRequest('POST', serverUrl + apiVlcPrefix + '/' + event).then(responseData => {
         handeResponseAlert(responseData);
     }).catch(err => {
     })
@@ -56,9 +52,11 @@ function handeResponseAlert(text) {
     // alertMessageBox.insertAdjacentHTML('beforeend', '<div class="alert alert-success" role="alert">'+text+'</div>');
 }
 
-
-playBtn.addEventListener('click', controlPlay)
-pauseBtn.addEventListener('click', controlPause)
+stopBtn.addEventListener('click', () => controlEvent("stop"));
+playBtn.addEventListener('click', () => controlEvent("play"));
+nextBtn.addEventListener('click', () => controlEvent("next"));
+prevBtn.addEventListener('click', () => controlEvent("prev"));
+pauseBtn.addEventListener('click', () => controlEvent("pause"));
 shutdown1Btn.addEventListener('click', () => {
     controlShutdown(shutdown1Btn, 1);
 })

src/main/resources/templates/control.html

@@ -19,6 +19,9 @@
     <div>
         <button id="play" type="button" class="btn btn-primary">Play</button>
         <button id="pause" type="button" class="btn btn-primary">Pause</button>
+        <button id="next"  type="button" class="btn btn-primary" > Next</button>
+        <button id="prev"  type="button" class="btn btn-primary" > Prev</button>
+        <button id="stop"  type="button" class="btn btn-primary" > Stop</button>
     </div>
     <br>
     <dl class="row">

src/main/resources/templates/fragments/footer.html

@@ -11,15 +11,6 @@
             <div class="col">
                 <span class="text-muted" th:text="#{footer.info}"></span>
             </div>
-<!--            <div class="col text-right">-->
-<!--                <span class="text-muted" th:text="#{lang.name}"> </span>&nbsp-->
-<!--&lt;!&ndash;                <span>&nbsp</span>&ndash;&gt;-->
-<!--                <select class="btn btn-sm btn-outline-secondary" id="locales">-->
-<!--                    <option class="btn btn-sm"  th:unless="${#locale.toString() == 'cz' }" value="en" th:text="#{lang.eng}"></option>-->
-<!--                    <option class="btn btn-sm"  value="cz" th:text="#{lang.cz}"></option>-->
-<!--                    <option class="btn btn-sm"  th:if="${#locale.toString() == 'cz' }" value="en" th:text="#{lang.eng}"></option>-->
-<!--                </select>-->
-<!--            </div>-->
         </div>
 
     </div>

src/main/resources/templates/fragments/header.html

@@ -67,16 +67,6 @@
             <option class="btn btn-sm"  value="cz" th:text="#{lang.cz}"></option>
             <option class="btn btn-sm"  th:if="${#locale.toString() == 'cz' }" value="en" th:text="#{lang.eng}"></option>
         </select>
-        <script type="text/javascript">
-            $(document).ready(function () {
-                $("#locales").change(function () {
-                    var selectedOption = $('#locales').val();
-                    if (selectedOption != '') {
-                        window.location.replace('?lang=' + selectedOption);
-                    }
-                });
-            });
-        </script>
     </div>
 
     <div class="divider-vertical"></div>