UI fuer Seek in Vorbereitung

undisclosed

2023-01-02 792b21b74e40320c85e9a193c8fa8218851010e6

UI fuer Seek in Vorbereitung

 src/de/uhilger/tango/api/ListHandler.java

@@ -34,8 +34,15 @@
 * GET /mz/api/alist/[pl-name]          die Titel-Objekte der Liste [pl-name] liefern
 * PUT /mz/api/alist/[pl-name]          den Titel im Body anfuegen an die Liste [pl-name]
 * PUT /mz/api/alist/[pl-name]/[nr]     an der Position nr der Liste [pl-name] den Titel im Body einfuegen
 * Neu: PUT /mz/api/alist/[pl-name]/[nr]/up  den Titel an der Position nr der Liste [pl-name] eins nach oben
 * Neu: PUT /mz/api/alist/[pl-name]/[nr]/dn  den Titel an der Position nr der Liste [pl-name] eins nach unten
 * DELETE /mz/api/alist/[pl-name]/[nr]  den Titel an der Position [nr] aus der Liste [pl-name] entfernen  
 * DELETE /mz/api/alist/[pl-name]/alle  alle Titel aus der Liste [pl-name] entfernen  
 * 
 * TODO (2.1.2023):
 * - Titel eins nach oben/unten
 * - Liste ab Titel spielen
 * - Ganzes Album der Liste hinzufuegen
 *
 * @author Ulrich Hilger
 * @version 1, 8.4.2021

 src/de/uhilger/tango/api/MediaSteuerung.java

@@ -53,6 +53,7 @@
 *
 * HTTP GET /mz/api/strg/abspieler/pause 
 * HTTP GET /mz/api/strg/abspieler/stop 
 * HTTP GET /mz/api/strg/abspieler/seek/[sekunden]
 * 
 * Faustregel: Anzahl Elemente eines URL plus 1 ist die Anzahl der Elemente des 
 * Ergebnisses von String.split.
@@ -66,6 +67,7 @@
  private static final Logger logger = Logger.getLogger(MediaSteuerung.class.getName());

  public static final String PL_CMD_PLAY = "play";
  public static final String PL_CMD_SEEK = "seek";
  public static final String PL_DEFAULT_PARAMS = "?titel=";
  public static final String PL_PARAM_RUECK = "&r=";
  public static final String PL_API_STRG = "api/strg/"; 
@@ -122,6 +124,14 @@
          response = meldung("Ungueltiges Kommando: " + elems[5], AbstractHandler.RTC_NOT_FOUND);
        }
        break;
      case 7:
        if (elems[5].equalsIgnoreCase(PL_CMD_SEEK)) {
          // /calypso/seek?pos=[sekunden]
          response = kommandoSenden(fs, elems[4], "seek?pos=" + elems[6]);
        } else {
          response = meldung("Ungueltiges Kommando: " + elems[5], AbstractHandler.RTC_NOT_FOUND);
        }
        break;
      case 8:
        response = ersterTitel(fs, elems[4], elems[7]);
        break;

 www/app.css

@@ -179,6 +179,14 @@

/* ab hier Mediazentrale */

.gehe-zu-formular{
  font-size: smaller;
}

.gehe-zu-eingabe {
  width: 2rem;
}

.entity-formular {
  display: flex;
  flex-flow: column;

 www/data/menu/hauptmenue.json

@@ -28,6 +28,11 @@
        "funktion": "app.geraet_schalt_liste"
      },
      {
        "titel": "Gehe zu",
        "umenue": false,
        "funktion": "app.gehe_zu_dialog_zeigen"
      },
      {
        "titel": "",
        "umenue": false,
        "funktion": ""

 www/data/tpl/gehe-zu.txt

New file
@@ -0,0 +1,20 @@
<div class="dlg-info">
  <span class="close-btn pointer-cursor">&#10006;</span>
  <div class="dlg-behaelter">
    <form>
      <div class="gehe-zu-formular">
        <input name="std" class="entity-form-element gehe-zu-eingabe" type="text" id="std" placeholder="Std" value="{{std}}" />
        <input name="min" class="entity-form-element gehe-zu-eingabe" type="text" id="min" placeholder="Min" value="{{min}}" />
        <input name="sek" class="entity-form-element gehe-zu-eingabe" type="text" id="sek" placeholder="Sek" value="{{sek}}" />

        <input type="radio" id="vor" name="richtung" value="vor" checked="checked" > vor
        <input type="radio" id="zurueck" name="richtung" value="zurueck"> r&uuml;ck

        <div class="entity-buttons">
          <button type="submit" class="button-primary" id="ok-btn">Gehe</button>
          <button type="button" class="button" id="cancel-btn">Abbrechen</button>
        </div>
      </div>
    </form>    
  </div>
</div>

 www/js/app.js

@@ -494,6 +494,32 @@
    console.log('url: ' + url);
    //window.open(url);
  };  
  
  this.gehe_zu_dialog_zeigen = function () {
    self.dialog_laden_und_zeigen('data/tpl/gehe-zu.txt', '', function(){
      const form = document.querySelector('form');      
      form.addEventListener('submit', function(event) {
        // hier gehe zu realisieren
        event.preventDefault();
        const data = new FormData(event.target);
        const value = Object.fromEntries(data.entries());
        var daten = JSON.stringify(value);
        console.log('gehe zu mit ' + daten);
        var sekunden = (value['std'] * 3600) + (value['min'] * 60) + (value['sek'] * 1);
        if(value['richtung'] === 'zurueck') {
          sekunden *= -1;
        }
        console.log('sekunden: ' + sekunden);
        self.dialog_schliessen();
        // HTTP GET /mz/api/strg/abspieler/seek/[sekunden]
        self.kommando('seek/' + sekunden);
      });
      self.addEvtListener('#cancel-btn', 'click', function(event) {
        self.dialog_schliessen();
      });
      self.menue_umschalten();    
    });
  };
    
  /* ------------- Verwaltungsfunktionen Abspielliste -------------------- */