[ERLEDIGT] Button value als Variable möglich?

colaholiker · 21 August 2023

Sclero2004 schrieb:
Nicht den eigentlichen Upload mit fetch abwickeln sondern nur das Formular, das in #57 durch C++ erzeugt wird, holen.

Genau. Aber auch Dein Upload- Beispiel müßte ich erst genauso in den Browser bekommen.

Sclero2004 schrieb:
<div id="upload-form">

Das kommt evtl. in meinem C++- Beispiel nicht so deutlich raus, aber ich sende die komplette HTML-Seite. Die soll sicher nicht ins <div> rein?
Mit "<!DOCTYPE html>" bis </html>?
Was passiert mit der bisherigen Seite: bleibt die bestehen (mit diesem ganzen <div> Inhalt?

Ich teste das, habe aber die o.g. Bedenken.

Da ich mich vormittags mit css und #Content beschäftigt habe:
Man könnte den Content immer in ein <div> setzen, entweder als Tabelle, oder als Update- Formular (und Weiteres...)?

Code:

<div id="content">

Dann halt immer <head>, <header> und <footer> stehenlassen?
So könnte dein Vorschlag mit <div> funktionieren.

Sclero2004 · 21 August 2023

Das kommt evtl. in meinem C++- Beispiel nicht so deutlich raus, aber ich sende die komplette HTML-Seite.

Das war mir schon klar, denn da werden ja auch Header und Footer aus gegeben. Und deshalb wird in meinem Beispiel in #60 ja auch nur das verwendet, was im body steht:

Code:

uploadForm = docLoaded.querySelector('body')

d. h. das Mini-Formular mit den Überschriften.
Was mir noch nicht klar ist: Wo soll das ganze dann hin? Irgend wo in die vollständige Seite mit der Tabelle ein gebettet? Oder in ein Popup? Oder soll die Tabelle verschwinden und statt dessen nur das Upload-Formular mit den Überschriften angezeigt werden?

colaholiker · 21 August 2023

Sclero2004 schrieb:
Oder soll die Tabelle verschwinden und statt dessen nur das Upload-Formular mit den Überschriften angezeigt werden?

So läuft das original mit dem Link-Button und ich hatte es auch so im Sinn.

Mein CSS- Ausflug heute vormittag sollte dazu führen, daß nur der Content, also die Tabelle scrollt.
Daher baue ich gerade meine Webseite um: <h1> in den <header>, die <ul> -Leisten (ich nutze als Übergang noch eine alte und eine neue) wandern mit in den <footer>.
Als Content im Body bleiben nur noch zwei Dialogboxen und die Tabelle.
Das

Sclero2004 schrieb:
uploadForm = docLoaded.querySelector('body')

hatte ich natürlich überlesen!

Heißt das also generell, daß ich schon mal alles im Body ins <div> setzen kann?
Oder sollte die bisherige Tabellenkonstruktion erhalten bleiben mit dem Replace?

Sclero2004 · 21 August 2023

Ob die Tabelle stehen bleiben soll hängt ganz davon ab, wie Du es dir wünschst. Wenn ja, ein zusätzliches div wo die Überschriften und das Formular eingetragen werden. Wenn nicht, die ganze Tabelle in ein div und dort das Formular hinein.

colaholiker · 21 August 2023

Also...
nur der Body-Inhalt soll getauscht werden.
Das ist:
- die Tabelle mit den 2 Dialogboxen oder
- das Formular für das updaten.

Die Überschrift <h1> befindet sich inzwischen im <header>.
Muß die in ein <div>? Hatten wir bisher nicht.

Und für Tabelle und Updateteil je ein eigenes <div> im Body?

Ich muß den C++-Code auch entsprechend anpassen, wenn ich die Webseite lauffähig habe.

Bin aber noch beim "style" wegen des scrollens...

Sclero2004 · 21 August 2023

Am einfachsten wäre es wahrscheinlich wenn wir den kompletten Body austauschen würden. Im HTML des Upload-Formulars sind ja auch Header und Footer mit drin, so dass dann auch gleich die Überschriften getauscht würden.

colaholiker · 21 August 2023

Naja. Die Überschrift <h1> wird immer noch in der Fetch- Routine aktualisiert, was den Pfad betrifft. Konnte den Code aus #60 noch nicht einbauen.

Jetzt bin ich mit dem Projekt aber styling- mäßig erstmal durch: auf merkwürdige Art scrollt es nur noch im Body.

Außerdem hab ich den Body auch von allem befreit. Der Footer, die Funktionen sind zwischen </body> und </html>.
Damit gibt es im Body nur noch

<div id='upload-form'></div>
- die Dialogboxen
- und die Tabelle.

Das sieht für mich komisch aus, aber funktioniert.

Also wenn Du "jetzt" den Body tauschen möchtest ist das inhaltlich dasselbe wie den Content darin.
Für das Hochladen vom Prozessor aus ist es zeitlich besser wenn nicht immer Kopf- und Fußteil mitgeladen wird (ist schon einiger Code entstanden).

Was das scrollen betrifft: könntest Du bitte mal reingucken? Die Datei enthält eine längere Tabelle (halt zum scrollen).
Der Body fängt wohl am oberen Fensterrand an, das bekomme ich nicht weg.

Das ist auch der aktuelle Stand heute (header, footer usw.)
-vielen Dank

Sclero2004 · 21 August 2023

Gut, dass Du wieder das HTML postest. Ich sehe es mir später an.

colaholiker · 22 August 2023

Test der Routine aus #60:

Laut Console wurde die "upload-form" als Body empfangen.

Das äußert sich darin, daß die Tabelle (vgl. meine zuletzt gepostete Datei) an die Fenster- Oberkante "springt". Das deutet darauf hin, daß "etwas" mit dem <div id='upload-form'></div> passiert. Angezeigt wird das Formular nicht.

Auch beobachtet, daß der Firefox offensichtlich korrigiert und <body> über <header> setzt.
Das habe ich im Code nachkorrigiert. Ergebnis beim betätigen des Upload- Buttons in <ul> bleibt dasselbe.

Sclero2004 · 22 August 2023

Ich habe mir jetzt dein HTML angesehen und versucht, es ein wenig schöner zu machen und vor allem das Scrolling der Tabelle zu verbessern, siehe Anhang. Die absoluten Positionierungen habe ich heraus genommen.
In einem weiteren Schritt habe ich auch die Ausrichtung der Buttons verschönert mit Gridlayout.

Code:

        /* Buttons mit Grid hübsch ausrichten: */
        td .grid-cont,
        td form {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        td form {
            grid-column: 1/3;
        }

Code:

                <tr>
                    <td class='td-filename'>Text - Kopie (64).txt</td>
                    <td>File</td>
                    <td>5 B</td>
                    <td style='white-space:nowrap'>
                        <div class="grid-cont">
                            <form action='/dir' method='post'>
                                <button class='2' data-action='download'>Download</button>
                                <button class='2' type='submit' name='reserve'
                                    value='download_Text - Kopie (64).txt'>Dnl
                                    old</button>
                            </form>
                            <button class='4' data-action='qren'>Rename</button>
                            <button class='questDel' data-action='qdel'>l&ouml;schen</button>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class='td-filename'>Text - Kopie (65).txt</td>
                    <td>File</td>
                    <td>5 B</td>
                    <td style='white-space:nowrap'>
                        <div class="grid-cont">
                            <form action='/dir' method='post'>
                                <button class='2' data-action='download'>Download</button>
                                <button class='2' type='submit' name='reserve'
                                    value='download_Text - Kopie (65).txt'>Dnl
                                    old</button>
                            </form>
                            <button class='4' data-action='qren'>Rename</button>
                            <button class='questDel' data-action='qdel'>l&ouml;schen</button>
                        </div>
                    </td>
                </tr>

Und damit wir wegen des Upload-Formulars nicht im Dunkeln tappen: Poste bitte auch noch das HTML, das dort vom fetch zurück kommt. Du findest es im Netzwerk-Tab unter "Response".

colaholiker · 22 August 2023

Jaaaa!
Erstmals hat ein Upload mit dem neuen Button funktioniert!

Hab gerade alles auf den neuesten Stand gebracht.

Mit den Codes oben hab ich aber noch nichts gemacht.
Ich hatte Dir meine Datei nur mit dem relevanten <style> für das Scrollen geschickt. Den Rest hatte ich auskommentiert um wegen des Problems besseren Durchblick zu haben.

Demnächst wird das Styling wieder komplettiert, und dann werde ich auf jeden Fall deinen obigen Code beachten.

Jetzt aber zum aktuellen Stand:
- das vertikale scrollen sieht gut aus
- die Tabelle ist plötzlich breiter und es entsteht ein horizontaler Scrollbalken. Das ist aber nicht in Deinem Beispielfile so. Muß ich beobachten.
- Das Formular wird eingesetzt, nochmal mit Kopf und Footer.
Da muß ich noch testen, ob ich was in C++ ändern muß.
- Die Fetch- Routine muß als Adresse (bzw. Link?) statt 'dir?' 'upload?' enthalten.
Das bedeutet, daß es jetzt 2 Fetch- Funktionen gibt.

So, dann kümmere ich mich mal um diesen horizontal- Scrollbalken und die doppelten Köpfe/Footer...

colaholiker · 22 August 2023

alles klar:
- im C++ Code die "append"- Zeilen deaktiviert verhindert doppelte Header- und Footer.
Das sieht nun so aus, daß das Upload- Formular die obere Hälfte des Bodys einnimmt und die Tabelle (mit passendem Scrollbalken) im unteren Body- Teil verbleibt.

Das gefällt mir eigentlich... wenn: siehe unten.

Der Quer- Scrollbalken entsteht wegen langer Filenamen. Das war mal nicht so, in der Tabellenspalte fand ein Umbruch statt.
So sollte es wieder sein, sonst verschwinden die Tabellen-Buttons im toten Scrollbereich.

Nun zum Upload:

Ich frug schon ein paar Posts höher, ob Uploads in Unterordnern (aus Sicherheitsgründen) nicht möglich sind (Recherche)?

Ansonsten wäre die stehenbleibende Tabelle nützlich, wenn der Upload in den angezeigten Ordner erfolgen würde. Mit Aktualisierung...

Sclero2004 · 22 August 2023

ob Uploads in Unterordnern (aus Sicherheitsgründen) nicht möglich sind (Recherche)?

Die Frage kann ich leider nicht beantworten weil ich mit deiner speziellen Konfiguration mit MC und SD-Karte nicht vertraut bin. In PHP sieht das auf dem Server alles ganz anders aus.

colaholiker · 22 August 2023

Ich hatte das vor einiger Zeit im Zusammenhang mit HTML gelesen.
Egal: gerade probiert: es geht!

Die mit dem Uploadformular weiter sichtbare Tabelle nutzt aber erstmal nichts, weil eine success-Meldumg dann im ganzen Bereich erfolgt (läuft nicht über Fetch).

Mit dem dortigen "back"- Button erscheint aber die aktualisierte (!) Tabelle. Was will man mehr?
Änderungen mit C++ wären möglich (success kann man sparen wenn die aktuelle Tabelle den Erfolg anzeigt. Später vielleicht.

Der Upload erfolgt jetzt Pfad- abhängig, getestet bis zur 3.Ebene.

Sclero2004 schrieb:
und vor allem das Scrolling der Tabelle zu verbessern, siehe Anhang. Die absoluten Positionierungen habe ich heraus genommen.

Da kommt wohl die relative Tabellenbreite her?
Das ist meine nächste Beschäftigung um das Querscrollen zu vermeiden.

Sclero2004 · 23 August 2023

Was das Querscrollen betrifft, das kannst Du unterbinden, indem Du die Breite der Zelle begrenzt und den Zeilenumbruch frei gibst:

colaholiker · 23 August 2023

Guten Abend Sclero2004,
Das mit den langen Filenamen hatte ich auch schon bemerkt.
Ein Zeilenumbruch findet aber schon statt, kommt auf die Stellen an:
Ein langer Name mit normalen Zeichen wird nicht umgebrochen, ein Name mit Space darin wird an dieser Stelle getrennt.
Das scheint mit Deiner Lösung ja behoben zu sein: prima, werde ich umsetzen.

Bei den Table-Buttons habe ich grid eingebaut und noch etwas Schnickschnack:

Code:

        td .grid-cont,
        td form {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        td form {
            grid-column: 1/3;
        }

        tr:nth-child(odd) {
            background-color: #eeeeee;
        }
       
        table button {
            float: left;
            width: 100%;
            background-color:green;
            color:white;
            border-radius: 0.375em;
            border-right: 0.2em solid #bbb;
            font-size: 60%;
        }
       
        table button:hover {
            background-color: darkgreen;
            border-radius: 0.375em;
            font-size: 70%
        }

Das "richtige" Styling (andere Buttons usw.) mache ich aber ganz zum Schluß.

Inzwischen bin ich etwas abgekommen:
Ich wollte das Erreichte in einen laufenden Datenlogger einbauen.
Der empfängt viele Sensordaten und Meldungen und speichert sie als Textfiles auf die SD-Karte.

Da hab ich erstmal realisiert, daß ich nicht gleichzeitig auf die SD zugreifen kann.
Also brauche ich einen Wartungsmodus, der die Datenspeicherung solange abstellt.

Arbeit für morgen...

colaholiker · 25 August 2023

Sclero2004 schrieb:
Was das Querscrollen betrifft, das kannst Du unterbinden, indem Du die Breite der Zelle begrenzt und den Zeilenumbruch frei gibst:

Das klappt nicht bei mir.

Code:

        td:first_of_type {
            overflow-wrap: anywhere;
            max-width: 10em
        }

gehört das in <style> an eine bestimmte Stelle oder muß ich eine andere Einstellung dafür löschen?

...p.S.:
habe mit

Code:

      #table-wrapper {
            flex: 1;
            overflow: auto;
            overflow-wrap: anywhere;
        }

ohne die "max-width"- Angabe ein gutes Ergebnis bekommen.
Ist das ok?

msi · 25 August 2023

colaholiker schrieb:
Das klappt nicht bei mir.

Kein Wunder, denn first_of_type ist nämlich falsch. siehe https://www.w3schools.com/cssref/sel_first-of-type.php

colaholiker · 25 August 2023

ich denke mal, Sclero2004 bezieht sich auf eine Tabellenzeile und deren erste Spalte.
Von der Logik her (und ich hab den Link besucht) kann ich den Code nachvollziehen.

Allerdings wäre es gut, die ersten zwei Spalten zu berücksichtigen, denn in der 2.Spalte stehen die Ordnernamen.
Aber das ist meckern auf hohem Niveau, und dann noch von mir Anfänger ;-)

Sclero2004 · 25 August 2023

Allerdings wäre es gut, die ersten zwei Spalten zu berücksichtigen, denn in der 2.Spalte stehen die Ordnernamen.

Das ist natürlich ein Grund, denn Ordnernamen können u. U. auch ein wenig länger werden.
Ich hätte nicht gedacht, dass sich overflow-wrap vererbt, ist aber anscheinend der Fall, denn dein CSS funktioniert ja.

[ERLEDIGT] Button value als Variable möglich?

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Anhänge

Mitglied

Mitglied

Mitglied

Anhänge

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied