Beiträge von Sempervivum

Sempervivum

Ein Problem, auf das ich ganz am Anfang gestoßen bin, ist folgendes: Deine Tabellendefinition ist nicht vollständig, es fehlt tbody. Der Browser erkennt das und fügt eigenmächtig das tbody hinzu. Man erkennt das, wenn man sich die Tabelle im HTML-Inspektor ansieht. Damit ist die Struktur bzgl. Kindelementen nicht mehr so, wie man sie erwartet. Um zu wissen, woran man ist, habe ich im HTML der Tabelle das tbody hinzu gefügt.

Was das Javascript betrifft, so habe ich das weitgehend überarbeitet und, hoffentlich, vereinfacht. Dieses funktiniert dann:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <div id="focus"></div>
    <div>
        <label id="überschrift" for="überschrift">Bitte legen Sie einen Vorlesungstermin fest
        </label>
        <label id="Termindatum" for="termindatum">Datum
            <input id="lbDatum" type="text" name="termindatum" placeholder="04.03.2020" value="04.03.2020" readonly>
        </label>
        <label id="Terminbezeichnung" for="terminbezeichnung">Bezeichnung:
            <input id="lbTerminbezeichnung" type="text" name="terminbezeichnung" placeholder="Statistik" maxlength="30">
        </label>
        <label id="Start" for="start">Von:
            <input id="lbStart" type="time" name="start">
        </label>
        <label id="Ende" for="ende">Bis:
            <input id="lbEnde" type="time" name="ende">
        </label>
        <label id="Kursbezeichnung" for="kursbezeichnung">Kurs:
            <input id="lbKursbezeichnung" type="text" name="kursbezeichnung" placeholder="WWI2020C" maxlength="10">
        </label>
    </div>
    <script>
        function clone_this() {
            // tbody in Variable bereit stellen
            var tbody = document.querySelector('#tab tbody');
            // neue Tabellenzeile durch Klonen der letzten erzeugen
            newRow = tbody.lastElementChild.cloneNode(true);
            // und an Ende in den tbody einfuegen
            tbody.appendChild(newRow);
            // Eingabefelder in der neuen Tabellenzeile bereit stellen
            var dstInputs = newRow.querySelectorAll('input');
            for (j = 0; j < dstInputs.length; j++) {
                // Quell-Eingabefeld bereitstellen
                var srcInput = document.getElementById('lb' + dstInputs[j].name);
                // und den Wert daraus in das Eingabefeld
                // in der neuen Tabellenzeile uebertragen
                dstInputs[j].value = srcInput.value;
            }
        }
    </script>
    <table id="tab" border="2">
        <tbody>
            <tr>
                <td width=" 160"><input type="text" name="Datum" value="Datum" readonly></td>
                <td width="60"><input type="time" name="Start" value="Von" readonly></td>
                <td width="60"><input type="time" name="Ende" value="Bis" readonly></td>
                <td width="160"><input type="text" name="Terminbezeichnung" value="Modulbezeichnung" readonly></td>
                <td width="160"><input type="text" name="Kursbezeichnung" value="Kursbezeichnung" readonly>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="button" id="erstellen" value="Festlegen" onclick="clone_this()">
</body>

</html>

Alles anzeigen

Was noch nicht befriedigt, ist, dass die erste Tabellenzeile eigentlich der Kopf thead sein müsste. Aber da wollte ich nicht einsteigen.

Sempervivum

Stimmt, das ist wenig plausibel. Allerdings ist das jetzt eine andere Datei: manifest.json.

Bei der bike.babylon kommt dagegen 503. Dazu findet man ja einiges im Web, ich habe es nicht im einzelnen gelesen, weil Du das ja genau so kannst.

Sempervivum

Guten Morgen Stef, lässt sich die Datei denn jetzt durch Direktaufruf im Browser laden?

Sempervivum

Die Empfehlung bei solchen Layout-Problemen ist immer dieselbe: Verabschiede dich von float und mache dich mit Flexlayout vertraut. Damit ist es wesentlich einfacher, die Anordnung der Element, die dir vorschwebt, zu realisieren.

Das Beispiel bei quform gefällt mir auch und es dürfte kein Problem sein, dein Formular ebenfalls in diesem Stil zu gestalten.

Sempervivum

Ein Login ohne Passwort hat gegenüber einem Select keine Vorteile aber zwei Nachteile:

1. Anfällig gegen Falscheingaben, d. h. wir sind wieder da, wo wir am Anfang waren.

2. Komplizierter in der Bedienung (zwei Schritte gegenüber einem) und der Realisierung.

Sempervivum

Ja. Leider habe ich als Webserver einen Exoten namens IIS-Express. Ich bekomme zusammen mit der Fehlermeldung eine Anleitung, wie ich der Erweiterung einen Mime-Typen hinzu fügen kann. Am besten dies in deinem Webserver tun. Oder, schnell und etwas schmutzig, versuchen, sie in .txt umzubennen und als solche zu laden.

Sempervivum

Zitat

Wenn ich die bike.babylon versuche über dem Browser aufzurufen kommt ein 404 Error (File or Directory not Fount) obwohl diese vorhanden ist

Genau so etwas hatte ich selber gerade gestern: Die Datei ist definitiv da, aber trotzdem kommt Fehler 404. Bei genauem Hinsehen und Direktaufruf im Browser wurde der Fehler dann genauer spezifiziert: 404.3 und irgend etwas in der Richtung, dass der Mimetyp nicht im Webserver spezifiziert ist (ich kann mich nicht an den genauen Wortlauf erinnern). Da .babylon keine Standard-Erweiterung ist, könnte es gut sein, dass dieses Problem auch bei dir vorliegt.

Sempervivum

So verstehe ich es besser. Ein Auswahlmenü ist schon mal ein guter Ansatz zur Lösung. Aber auch dabei gilt: Die Namen aus der DB auszulesen um das Menü zu füllen ist mit SQL ein Einzeiler, wenn sie alle in einer Tabelle sind. Allerdings müsste der Name, wenn er zum ersten Mal erfasst wird, die korrekte Form haben.

Scheint so eine Art Zeiterfassung zu werden, nicht wahr?

Sempervivum

Das habe ich noch nicht richtig verstanden. Was ist mit den verschiedenen Variante für Max?

Sempervivum

Zitat

Meine Frage ist nun ist mein Denkansatz überhaupt richtig und macht man das so?

Definitiv nein. Stell dir nur mal vor, Du willst alle Mitarbeiter auslesen, die älter als 50 sind. Oder in xyz wohnen. Sind alle Mitarbeiter in einer Tabelle ist das SQL ein Einzeiler. Aber wenn es für jeden Mitarbeiter eine getrennte Tabelle gibt?

Sempervivum

Lokal geht, auf dem Server geht nicht - trivialer Fehler mit Groß-/Kleinschreibung? Datei hochgeladen?

Sempervivum

Dieses funktioniert im groben:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Demo API mit Vue</title>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
</head>

<body>
    <input id="vname" type="number" name="vname">
    <input id="sendebtn" type="submit" value="senden">
    <!-- In dem folgenden Container werden die Platzhalter in doppelten geschweiften Klammern
    durch die Elemente in der Antwort vom Server ersetzt, siehe auch unten im Javascript -->
    <div id="app">
        <h1>Statistik</h1>
        <table>
            <thead>
                <th>Name</th>
                <th>Wert</th>
            </thead>
            <tbody>
                <tr>
                    <td>Jobs</td>
                    <td>{{stats.jobs}}</td>
                </tr>
                <tr>
                    <td>Economy</td>
                    <td>{{stats.economy}}</td>
                </tr>
                <tr>
                    <td>Damage</td>
                    <td>{{stats.damage}}</td>
                </tr>
                <tr>
                    <td>Odometer</td>
                    <td>{{stats.odometer}}</td>
                </tr>
                <tr>
                    <td>Fuel</td>
                    <td>{{stats.fuel}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // Eventlistener fuer Klick auf Button registrieren
        // Wird der Button geklickt, wird die Funktion getData() aufgerufen
        document.getElementById('sendebtn').addEventListener('click', getData);

        // Code für das Holen der Daten von der API in eine Funktion legen:
        function getData() {
            // Name aus dem Eingabefeld auslesen:
            const name = document.getElementById('vname').value.trim();

            url = 'https://api.vtlog.net/v1/users/' + name + '?idType=vtlog';
            new Vue({
                // Hier wird angegeben, in welchem Container die Daten
                // eingetragen werden sollen:
                el: '#app',
                data() {
                    return {
                        stats: null
                    }
                },
                mounted() {
                    axios
                        .get(url)
                        // das folgende ist eine Kurzschreibweise für eine Funktion
                        // response ist der Eingangsparameter, in diesem Fall
                        // die Antwort vom Server
                        .then(response => (
                            // das was hier unter this.stats eingetragen wird,
                            // ist oben im HTML unter stats verfuegbar
                            this.stats = response.data.response.stats
                        ));
                }
            });
        }
    </script>
</body>

</html>

Alles anzeigen

Unschön ist noch dass beim Laden der Seite die Tabelle mit den Platzhaltern angezeigt wird. Entweder die Tabelle verbergen oder gleich die Abfrage für eine Default-ID ausführen.

Sempervivum

Genau, sieh dir den Code unter "Anwendungsbeispiel" an, den kannst Du relativ leicht auf unseren Fall übertragen:

https://wiki.selfhtml.org/wiki/JavaScrip…endungsbeispiel

Sempervivum

Hier noch zwei Erklärungen, wie das funktioniert:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Demo API mit Vue</title>
    <meta charset="utf-8">
</head>
<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
    // In dem folgenden Container werden die Platzhalter in doppelten geschweiften Klammern
    // durch die Elemente in der Antwort vom Server ersetzt, siehe auch unten im Javascript
    <div id="app">
        <h1>Statistik</h1>
        <table>
            <thead>
                <th>Name</th>
                <th>Wert</th>
            </thead>
            <tbody>
                <tr>
                    <td>Jobs</td>
                    <td>{{stats.jobs}}</td>
                </tr>
                <tr>
                    <td>Economy</td>
                    <td>{{stats.economy}}</td>
                </tr>
                <tr>
                    <td>Damage</td>
                    <td>{{stats.damage}}</td>
                </tr>
                <tr>
                    <td>Odometer</td>
                    <td>{{stats.odometer}}</td>
                </tr>
                <tr>
                    <td>Fuel</td>
                    <td>{{stats.fuel}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        const userID = 8;
        url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';
        new Vue({
            // Hier wird angegeben, in welchem Container die Daten
            // eingetragen werden sollen:
            el: '#app',
            data() {
                return {
                    stats: null
                }
            },
            mounted() {
                axios
                    .get(url)
                    // das folgende ist eine Kurzschreibweise für eine Funktion
                    // response ist der Eingangsparameter, in diesem Fall
                    // die Antwort vom Server
                    .then(response => (
                        // das was hier unter this.stats eingetragen wird,
                        // ist oben im HTML unter stats verfuegbar
                        this.stats = response.data.response.stats
                    ));
            }
        });
    </script>
</body>
</html>

Alles anzeigen

Sempervivum

Zitat

Ok Schade, du hast ja nun die id schon angegeben eigentlich wollte ich dass man diese in einem feld eintragen kann und dann die Statistiken angezeigt werden. Kannst du ja ber später noch erklären

eigentlich hatte ich mir vorgestellt, dass Du das in Eigeniniative selbst hinzu fügen kannst. Informiere dich am besten über Eventlistener und Eingabefelder (input):

https://wiki.selfhtml.org/wiki/JavaScrip…ddEventListener

https://wiki.selfhtml.org/wiki/HTML/Formulare/input

Sempervivum

OK, ich habe es zunächst mal einfach gemacht und nur die stats angezeigt:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Demo API mit Vue</title>
    <meta charset="utf-8">
</head>

<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>

    <div id="app">
        <h1>Statistik</h1>
        <table>
            <thead>
                <th>Name</th>
                <th>Wert</th>
            </thead>
            <tbody>
                <tr>
                    <td>Jobs</td>
                    <td>{{stats.jobs}}</td>
                </tr>
                <tr>
                    <td>Economy</td>
                    <td>{{stats.economy}}</td>
                </tr>
                <tr>
                    <td>Damage</td>
                    <td>{{stats.damage}}</td>
                </tr>
                <tr>
                    <td>Odometer</td>
                    <td>{{stats.odometer}}</td>
                </tr>
                <tr>
                    <td>Fuel</td>
                    <td>{{stats.fuel}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        const userID = 8;
        url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';
        new Vue({
            el: '#app',
            data() {
                return {
                    stats: null
                }
            },
            mounted() {
                axios
                    .get(url)
                    .then(response => (
                        this.stats = response.data.response.stats
                    ));
            }
        });
    </script>
</body>

</html>

Alles anzeigen

Leider habe ich keine Zeit mehr, um Erklärungen zu schreiben. Vielleicht später.

Sempervivum

Die userID kannst Du dynamisch aus einer Variablen in die URL einbauen, z. B. so:

Code

const userID = 8;
url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';

Sempervivum

So etwas kann man auch sehr gut mit Templating bzw. Vorlagen machen. Ich habe da vor einiger Zeit eine Demo mit Vue gemacht:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Demo API mit Vue</title>
    <meta charset="utf-8">
</head>

<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>

    <div id="app">
        <h1>Bitcoin Price Index</h1>
        <div v-for="currency in info" class="currency">
            {{ currency.description }}:
            <span class="lighten">
                <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
            </span>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    info: null
                }
            },
            mounted() {
                axios
                    .get('https://api.coindesk.com/v1/bpi/currentprice.json')
                    .then(response => (this.info = response.data.bpi));
            },
            filters: {
                currencydecimal(value) {
                    return value.toFixed(2)
                }
            }
        });
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Das dürfte kein Problem sein, aber man muss dazu das HTML und CSS sehen, bitte poste es. Und benutze dabei Codetags, das </> in der Werkzeugleiste oben.

Sempervivum

Einfach das PHP-Skript außerhalb des application-Ordners legen?

Beiträge von Sempervivum

Werte per Button in neue dynamische Tabellenzeile übernehmen

Babylon-Datei wird auf Webserver nicht gefunden

Babylon-Datei wird auf Webserver nicht gefunden

Formularelemente gestalten/Anordnen

zwei Fragen Formular und GET/POST

Babylon-Datei wird auf Webserver nicht gefunden

Babylon-Datei wird auf Webserver nicht gefunden

zwei Fragen Formular und GET/POST

zwei Fragen Formular und GET/POST

zwei Fragen Formular und GET/POST

Babylon-Datei wird auf Webserver nicht gefunden

Frage zu Api

Frage zu Api

Frage zu Api

Frage zu Api

Frage zu Api

Frage zu Api

Frage zu Api

Frage zum Logo

Verzeichnisschutz