diverse Listboxen durch Schalter oder Checkbox ersetzen

[geimist]

Es ist intuitiver und schneller, binäre Einstellungen nicht über eine Listbox, sondern über eine Checkbox oder einen switch schalten zu können.

• ggf. mit JQuery
• onoffswitch

[toafez]

Hi! Kann man auf jeden Fall machen und habe ich in meinen Projekten zum Teil auch bereits so umgesetzt. Wäre nur die Frage zu klären, ob Änderungen an einer Checkbox oder ein Radio Button direkt weggespeichert werden sollen, oder erst, nachdem du auf den speichern Button klickst. Letzteres wäre der Einfachheit halber vorzuziehen. Dafür benötigt man auch kein jQuery o.ä. das kannst du alles über die Key/Value Engine /usr/syno/bin/synosetkeyvalue bzw. /bin/get_key_value regeln. Machst du mit allen anderen Formularübergaben ja bereits so.

toafez

[geimist]

Na so was aber auch - hab deine Antwort gar nicht mitbekommen 😳 Du hast das schon richtig eingeordnet, dass es nicht sofort weggespeichert werden muss, sondern in den normalen Workflow reingehört. Wenn du das selbst schon einsetzt, könntest du mir mal einen Link zu einer entsprechenden Stelle in deinem Repo geben? Danke 🙂

[toafez]

Eine Checkbox an ein Formular per POST-Request übergeben Die Eingabe wird erst übernommen, wenn das Formular gesendet wird. Angewendet habe ich das in LogAnalysis um z.B. nach Datum zu filtern oder nicht.

<div class="form-check">'
    echo -n '<input type="checkbox" class="form-check-input" id="date_check" name="date"'; \
        [[ "${post[date]}" == "on" ]] && echo -n ' checked />' || echo -n ' />'
    echo '<label for="date_check" class="form-check-label text-secondary">'${txtUseDate}'</label>
</div>

https://github.com/toafez/LogAnalysis/blob/62847906ab6a46e63b68b9c255d8942754be9a29/ui/main.sh#L274

Eine Checkbox an einen Link per GET-Request übergeben Die Eingabe wird direkt ausgeführt und die Seite wird neu geladen. Angewendet habe ich das in Basic Backup, um z.B. eine AutoPilot Funktion zum automatischen auswerfen zu aktivieren bzw. deaktivieren.

echo -n '
<a class="material-icons text-success" href="index.cgi?page=autoconfig&section=save&option=disconnect&'; \
    if [[ "${disconnect}" == "false" ]]; then
        echo -n 'query=">
        <i style="font-size: 1.1rem;" class="bi bi-check-square text-secondary"></i>'
    else
        echo -n 'query=false">
        <i style="font-size: 1.1rem;" class="bi bi-square text-secondary"></i>'
    fi
    echo -n '
</a>

https://github.com/toafez/BasicBackup/blob/af6668277e906ceddf7cecc2b9744ab4cf68bf1a/ui/autoconfig.sh#L88

[geimist]

Vielen Dank. Der erste Versuch war neben des anzupassenden CSS noch nicht speicherbar, aber ich gucke mir das nochmal in Ruhe an. Danke schonmal 🤗

[toafez]

Zeig mal, an welcher Stelle du es versucht hast, dann versuch ich mich daran, dir ein Beispiel zu geben, an dem du dich besser orientieren kannst.

[geimist]

Z.B. hier: https://github.com/geimist/synOCR/blob/bed8b6e3df8b337f73f3125bfa6feef777de1564/APP/ui/GUI_edit.sh#L1146

Der Parameter hat die Werte 0 oder 1. Was ich an dem Code nicht verstehe, wie die 0 gesetzt wird.

Quelle:

                    # update docker image?:
                    echo '
                    <div class="row mb-3">
                        <div class="col-sm-5">
                            <label for="dockerimageupdate">'$lang_edit_set2_dockerimageupdate_title'</label>
                        </div>
                        <div class="col-sm-5">
                            <select name="dockerimageupdate" id="dockerimageupdate" class="form-select form-select-sm">'

                                if [[ "$dockerimageupdate" == "0" ]]; then
                                    echo '<option value="0" selected>'$lang_edit_set2_dockerimageupdate_no'</option>'
                                else
                                    echo '<option value="0">'$lang_edit_set2_dockerimageupdate_no'</option>'
                                fi
                                if [[ "$dockerimageupdate" == "1" ]]; then
                                    echo '<option value="1" selected>'$lang_edit_set2_dockerimageupdate_yes'</option>'
                                else
                                    echo '<option value="1">'$lang_edit_set2_dockerimageupdate_yes'</option>'
                                fi

                                echo '
                            </select>
                        </div>'

Umsetzung:

                    # update docker image?:
                    echo '
                    <div class="row mb-3">
                        <div class="col-sm-5">
                            <label for="dockerimageupdate">'$lang_edit_set2_dockerimageupdate_title'</label>
                        </div>                  
                        <div class="form-check">'
                            echo -n '<input type="checkbox" class="form-check-input" id="dockerimageupdate" name="dockerimageupdate"'; \
                                [[ "$dockerimageupdate" == "1" ]] && echo -n ' checked />' || echo -n ' />'
                            echo '<label for="dockerimageupdate" class="form-check-label text-secondary">'$dockerimageupdate'</label>
                        </div>'

Auch wenn die Optik erstmal zweitrangig ist, aber so sieht es mit dem aktuellen CSS aus:

[toafez]

Ich bin grad selbst in das Problem gelaufen, eine 0 oder 1 bei einer Checkbox zu setzten und entsprechend wegzuspeichern. Normalerweise ist es so, das bei einem gesetzten Haken ein „on“ als Wert übergeben wird und keine 0 oder 1. Auch habe ich Probleme, den gespeicherten Wert wieder an die Checkbox zu übergeben. Für den Moment habe ich da auch noch keine Lösung, arbeite aber daran. Sobald ich das Rätsel enträtselt habe, melde ich mich wieder. Sorry

[geimist]

Ist doch kein Problem. Ich hab, glaube, auch noch Parameter mit on off. Da kann ich mal probieren. Ich habe aber auch noch andere Schalter, die definierte Werte enthalten.

[geimist]

Für dein Beispiel habe ich mal ChatGPT gefragt. Die Antwort klingt logisch, ändert aber nichts an dem Verhalten bei mir, aber vielleicht bringt es ja dich weiter:

Um die Checkbox-Werte auf 0 und 1 zu setzen, müssen Sie den Wert des "checked" Attributs basierend auf dem Wert von "${post[date]}" ändern. Hier ist eine mögliche Lösung:

echo '
<div class="form-check">'
echo -n '<input type="checkbox" class="form-check-input" id="date_check" name="date"'; \
[[ "${post[date]}" == "1" ]] && echo -n ' checked value="1" />' || echo -n ' value="0" />'
echo '<label for="date_check" class="form-check-label text-secondary">'${txtUseDate}'</label>
</div>'

In diesem Code haben wir das "value" Attribut hinzugefügt, um den Wert der Checkbox zu definieren. Wenn die Variable "${post[date]}" den Wert "1" hat, wird die Checkbox als aktiviert angezeigt und der Wert "1" wird gesendet. Andernfalls wird die Checkbox als deaktiviert angezeigt und der Wert "0" wird gesendet.

[toafez]

ChatGPT... darauf bin ich auch noch nicht gekommen. Jedoch hatte ich das mit den value= Werten auch bereits probiert. Ich bekomm es aber momentan nicht hin. Alternativ biete ich dir mal eine Lösung unter Verwendung von Radio-Buttons an. Kopier dir den Code und schau es dir an. Vielleicht gefällt dir das ja sogar besser. Ich persönlich finde diese Lösung auch sehr sympathisch. An der Formatierung bzw. Ausrichtung der Radio-Buttons kann man noch arbeiten, damit am Ende alles symmetrisch aussieht.

# update docker image?:
echo '
<div class="row mb-3">
    <div class="col-sm-5">
        <label for="dockerimageupdate">'$lang_edit_set2_dockerimageupdate_title'</label>
    </div>
    <div class="col-sm-5">
        <input class="form-check-input" type="radio" id="dockerimageupdate-on" name="dockerimageupdate" value='; \
            [[ "$dockerimageupdate" == "1" ]] && echo -n '"1" checked />' || echo -n '"1" />'
        echo '<label for="dockerimageupdate-on" class="form-check-label ps-2 pe-4">'$lang_edit_set2_dockerimageupdate_yes'</label>'
        echo -n '
        <input class="form-check-input" type="radio" id="dockerimageupdate-off" name="dockerimageupdate" value='; \
            [[ "$dockerimageupdate" != "1" ]] && echo -n '"0" checked />' || echo -n '"0" />'
        echo '<label for="job-10" class="form-check-label ps-2">'$lang_edit_set2_dockerimageupdate_no'</label>
    </div>
    <div class="col-sm-2">
        <div class="float-end">
            <a data-bs-toggle="collapse" href="#dockerimageupdate-info" role="button" aria-expanded="false" aria-controls="dockerimageupdate-info">
                <img src="images/icon_information_mini@geimist.svg" height="25" width="25"/></a>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-10">
        <div class="collapse" id="dockerimageupdate-info">
            <div class="card card-body mb-3" style="background-color: #F2FAFF;">
                <span>
                    '$lang_edit_set2_dockerimageupdate_help1'
                </span>
            </div>
        </div>
    </div>
    <div class="col-sm-2"></div>
</div>'

[geimist]

Sehr schön, das ist auch eine gute Möglichkeit. Und hier passt sogar das CSS 😃 Danke schön.

[toafez]

Wie gesagt, man kann die Radio-Buttons noch mit div-Boxen oder einer Tabelle gleichmäßig anordnen. Dafür war die Zeit heut Morgen aber zu knapp. Ich reich dir das aber auf jeden Fall noch nach. Gleiches gilt für den Fall, wenn ich das Rätsel mit den Checkboxen noch gelöst bekomme.

[geimist]

Die dynamische Anordnung ist ausreichend. Ich stelle gerade den Code um. Einige Sprachvariablen habe ich gekürzt, damit das Layout passt. Also alles gut und du brauchst hier keine zusätzliche Mühe zu investieren. Ich finde die aktuelle Lösung schon viel übersichtlicher. Vielen Dank nochmal 🙂