• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Button value als Variable möglich?

colaholiker

Mitglied
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.
<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

Mitglied
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

Mitglied
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
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

Mitglied
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

Mitglied
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

Mitglied
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

Mitglied
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
 

Anhänge

  • scroll content 005.txt
    42,2 KB · Aufrufe: 1

colaholiker

Mitglied
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

Mitglied
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".
 

Anhänge

  • thread1159-colalkoholiker-my.txt
    66,3 KB · Aufrufe: 1

colaholiker

Mitglied
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

Mitglied
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

Mitglied
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

Mitglied
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.

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

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

colaholiker

Mitglied
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

Mitglied
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?
 
Zuletzt bearbeitet:

colaholiker

Mitglied
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

Mitglied
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.
 
Oben