Fehlersuche Flask, mit Vue.js

[Sirius3]

Instanzen von Klassen erzeugt man erst dann, wenn man auch die Werte dazu hat. Den Fall, dass man eine leere Instanz erzeugt und die nach und nach füllt, sollte man vermeiden.
Ein Wörterbuch `result` mit den beiden Schlüsseln `input` und `output` halte ich nicht für unschön. Auch bei der Anzeige auf der Web-Seite möchte man ja wissen, mit welchen Input-Parametern das gerechnet worden ist. Muß es wirklich ein PDF sein, oder reicht es auch, dass man die Webseite als PDF im Browser drucken läßt?

[Dennis89]

Danke für die Antwort.
Okay, dann werde ich so ein Wörterbuch erstellen.

Es kann vorkommen, dass das Berechnungsergebnis an Kunden weiter gegeben werden muss. Da wäre ein schöne PDF-Datei wünschenswert. Ich weis nicht welche Optionen man hat, wenn man die Website als PDF drucken lässt. Das was ich auf diese Art bist jetzt gemacht habe, sah meist nicht sonderlich schön aus. Kann man da beim Aufbau der Webseite Einfluss drauf nehmen?

Die reine PDF-Erstellung ist sicherlich auch nicht ganz einfach.Zumindest habe ich noch nie ein Programm geschrieben, dass das macht. Immerhin habe ich letztens gelernt, dass die einzelnen Elementen Koordinaten haben.

Grüße
Dennis


Edit: Wenn ich das Wörterbuch erstelle, würdet ihr dann die Schlüssel als Konstante definieren. Zum Beispiel eine Liste mit Schlüssel für das Ergebnis? Weil die von Hand mitten im Code in das Wörterbuch zu schreiben, wäre ja auch doof. So habe ich es jetzt zumindest für meine Testberechnung. Ich schreibe die Ergebnisse auch in eine Liste und mit den zwei Listen und `zip`erstelle ich dann das Wörterbuch.

[__blackjack__]

@Dennis89: Also ich würde hier kein Wörterbuch verwenden. Wörterbücher mit einem festen Satz an Zeichenketten als Schlüssel sind IMHO Objekte. Für die Eingabe hast Du ja schon Klassen. Und die Umwandlung geht ja auch in die andere Richtung mit `cattrs.unstructure()` wenn man das dann an den Browser senden will.

CSS hat auch Kram der für's Drucken gilt. Man kann also für's Drucken von der Bildschirmdarstellung abweichende CSS-Regeln angeben. Man ist dann natürlich immer so ein bisschen darauf angewiesen, was der Browser daraus macht, wie bei der Bildschirmdarstellung auch. Wenn man eine Umwandlung HTML+CSS nach PDF schon serverseitig machen möchte, könnte man sich https://weasyprint.org/ anschauen. Es gibt auch eine Integration in Flask: https://doc.courtbouillon.org/flask-weasyprint

[Dennis89]

Danke für die Antwort.

Wörterbücher mit einem festen Satz an Zeichenketten als Schlüssel sind IMHO Objekte.

Schön, dass du diesen Satz (auch) hier schreibst. Das habe ich in letzter Zeit öfters von dir gelesen und war sicherlich mit ein Auslöser meiner Frage.
Nun die zwei unterschiedlichen Meinungen, sind für mich jetzt natürlich etwas doof.

Verstehe ich dich richtig, dass du für das Ergebnis eine Klasse erstellen würdest? Oder die vorhandene mit den Eingaben um "Result" oder etwas ähnlichem erweitern?

Die Hinweise zu PDF und CSS speichere ich mir mal ab. Ich denke das dauert noch etwas bis ich dazu komme.


Grüße
Dennis

[Sirius3]

@Dennis89: mir ging es in erster Linie darum, dass das Ergebnis in einer Datenstruktur serialisiert wird. Wie die interne Datenablage aussieht, ist wieder etwas anderes. Das wäre dann eine Input-Dataclass, eine Output-Dataclass und eine Result-Dataclass, die diese beiden Attribute hat.

Natürlich sollte man eine schöne Druckansicht in HTML generieren. Dadurch muß man nicht nochmal eine weitere Auszeichungssprache lernen, und braucht auf Server-Seite nicht einmal Code. Alternativ setzt man eine Bibliothek wie weasyprint ein, muß dann Serverseitig das HTML über ein Template erzeugen.

[__blackjack__]

Ich würde für das Ergebnis eine eigene Klasse erstellen. Ob man dann noch einen übergeordneten Datentyp braucht, der beides zu einem Wert zusammenfasst, ist wahrscheinlich diskussionswürdig. Einerseits könnte man das auch in einem Tupel zusammenfassen, andererseits bin ich persönlich mindestens ab drei Elementen auch sehr schnell dabei `collections.namedtuple()` oder eine Klasse mit `attrs` zu erstellen.

[Dennis89]

Danke für die Erklärungen und Klarstellung.

Ich werde mal schauen, was ich hinbekomme und werde euch das Ergebnis zeigen.

`namedtuple` habe ich noch nie verwendet, wäre dann natürlich eine "Chance" das zu ändern, allerdings habe ich schon Gefallen an `attrs` gefunden und benutze es im Code auch schon. Ich denke ich werde ein paar einfache Versuche schreiben und mich dann für eine Lösung entscheiden. Das gilt auch für die übergeordnete Klasse, das muss ich erst probieren, ob ich das mit ihr schön umgesetzt bekomme oder ob ich dann die angesprochenen leeren Attribute habe. Aber jetzt schweife ich ab, das sind zuviele Gedanken ohne Erfahrung/Routine.


Grüße
Dennis

[__blackjack__]

@Dennis89: Wenn man schon `attrs` an Bord hat, dann macht `namedtuple` fast gar keinen Sinn mehr, ausser man braucht tatsächlich noch die Eigenschaft eines Tupels, also hauptsächlich das man eine Länge hat, auch mittels Index auf die Elemente zugreifen kann, und über die Elemente iterieren kann. Falls man die Eigenschaften eines Tupels ausser das man keine neuen Werte zuweisen kann, nicht braucht, dann gilt in etwa:

Code: Alles auswählen

Point = collections.namedtuple("Point", "x y")

# ist ähnlich zu:

Point = attrs.make_class("Point", ["x", "y"], frozen=True)

[Dennis89]

Dankeschön, so wie ich es im Kopf habe, muss ich nicht darüber iterieren und Indexzugriffe versuche ich immer so gut es geht zu vermeiden, wäre hier aber auch nicht notwendig.

Eventuell komme ich morgen dazu mich etwas intensiver damit zu beschäftigen und Lösungsvorschläge auszuarbeiten.


Grüße
Dennis

[Dennis89]

Guten Abend,

Für die Eingabe hast Du ja schon Klassen. Und die Umwandlung geht ja auch in die andere Richtung mit `cattrs.unstructure()` wenn man das dann an den Browser senden will.

ich muss hier noch ein mal kurz nachfragen. Ja für die Eingabe habe ich eine Klasse und für die Ergebnisse habe ich eine Liste mit `Result`-Klassen. Das ist analog zu der Kühlereingabe. Da gibt es auch eine Liste mit mehreren Kühlern und je nach dem wie viele da drin sind, so viele Ergebnisse gibt es.

`unstructure()` kann ich auf meine `Result`-Klasse und auch auf die Klassen für die Eingaben anwenden. In jedem Fall erhalte ich ein Wörterbuch. Soweit perfekt.
Eigentlich muss ich die Eingaben ja nicht noch mal an den Browser senden? Die sind da ja schon und vor allem in der Einheit in der sie eingegeben worden sind. Oder gibt es einen Grund, die Eingaben wieder zurück zu schicken?
Im ersten Moment habe ich nicht daran gedacht, dass die Daten ja schon "im" Browser sind und war dabei ein Wörterbuch mit Eingaben und Ergebnissen zu erstellen. Dabei muss Ich das Ergebnis von `unstructure` an einen Namen binden, weil ich nicht `unstructure(user_input)["results"] = ...` schreiben kann und `update` None als Rückgabewert hat. Ja dabei habe ich keinen sinnvollen Namen finden können und dass ist immer das Zeichen, dass da was mit der Logik nicht stimmt.

So und darum "stehe" ich jetzt schon wieder bei euch.
Wenn ich die Eingabedaten nicht senden muss, dann könnte ich die Result-Klasse eigentlich auch weglassen und doch ein Wörterbuch nehmen, wenn ich es eh wieder in eins wandeln muss? Oder übersehe ich noch etwas?
Wenn ich die Eingabe wieder zurück senden muss, dann gibt es einen Zwischenschritt um die Einheiten wieder umzurechnen und dann, ein Wörterbuch mit allem drin?

Vielen Dank und Grüße
Dennis

[__blackjack__]

@Dennis89: Ob es für das zurücksenden der Eingaben einen Grund gibt, musst *Du* wissen. Einen möglichen hat Sirius3 glaube ich genannt: Der Leser möchte zu den Ergebnissen normalerweise auch die Eingaben wissen. Falls die da noch stehen und das nicht mit neuladen der Seite gemacht ist, kann man sich das wohl wirklich sparen.

Du hattest doch aber auch von einem PDF gesprochen? *Da* sollten doch auch die Eingaben rein, oder auch da nur die Ergebnisse?

[Dennis89]

Guten Morgen,

danke für die Antwort.
Ja ich brauche die Eingaben auf jeden Fall, aus den genannten Gründen. Es sollen Eingaben und Ergebnisse angezeigt werden und die PDF soll auch beides enthalten. Die Frage war eher ob man die noch einmal zurück schickt oder ob man die nimmt, die noch in den JavaScript-Objekten sind.

Die Validierung der Eingaben mache ich auch zwei mal, weil es dafür Gründe gibt, deswegen hat sich mir die Frage gestellt. Ich denke wenn ich die Eingaben wieder zurück schicke, dann wäre der Code universeller und unabhängiger vom Aufbau der Webseite.

Wenn zurück schicken dann würde ich sowas machen:

Code: Alles auswählen

    def merge_result_and_input(self):
        user_input = unstructure(self.user_input)
        results = {'results': unstructure(self.results)}
        return user_input | results

`
Habe mich von `ic()` täuschen lassen, `unstructure(self.results)` gibt mir eine Liste zurück. Erstellt wird `self.results`so:

Code: Alles auswählen

Results = make_class(
    "Results",
    [
        "condensate",
        "power",
    ],
    frozen=True,
)

Grüße
Dennis

[Sirius3]

Natürlich kannst Du Dir auch zusätzlichen Code schreiben, der im Browser die Eingabedaten für jede Anfrage an den Server zwischenspeichert.
Da die Struktur für die PDF-Erzeugung aber sowieso gebraucht wird, würde ich persönlich versuchen, den Code für beide Anwendungen (PDF und Browser) möglichst identisch zu halten.

[__blackjack__]

Das wäre auch von Vorteil wenn man am Ende so etwas wie `weasyprint` verwendet, und da vielleicht der Unterschied wirklich nur noch ist ob man das HTML ausliefert, oder es in ein PDF umwandeln lässt und das ausliefert.

[Dennis89]

Vielen Dank für eure Antworten.

Dann schaue ich, dass ich eine Struktur hinbekomme, die ich für beide Zwecke verwenden kann.


Viele Grüße
Dennis

[Dennis89]

Hallo mal wieder,

Also hast Du ein `Promise` als Rückgabewert. Wenn Du auf das Ergebnis vom Promise warten möchtest, fehlt da ein ``await``.

entweder verstehe ich hier was nicht (was wahrscheinlich ist) oder `await` wartet nicht. Ich habe hier ein kleines Beispiel geschrieben und eigentlich erwarte ich, das nach dem Klick auf den "Drück mich" - Button meine Datenstruktur, die ich vom Server sende, angezeigt wird. Das tut es aber nicht, ich erhalte nur ein `{}` .

Code: Alles auswählen

<html lang="en">
<head>
  <meta charset="utf-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<template v-if="show_result_mode">
  <h2>Berechnungsergebnisse</h2>
    {{calculated_data}}<br/>
  <div>
  <button @click="show_result_mode = false">Zurück</button>
  </div>
</template>

<template v-else>
  <h2>Test</h2>
    <button @click="start_calculation">Drück mich</button>
</template>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const show_result_mode = ref(false)
      const calculated_data = ref({})

      async function start_calculation() {
        const calculated_data = await fetch('http://localhost:5000/index');
	    calculated_data.value = await calculated_data.json();
        console.log(calculated_data);
        show_result_mode.value = true
      };

      return {
        start_calculation, calculated_data, show_result_mode
      }
    }
  }).mount('#app')
</script>
</body>

</html>

Mit `await` dachte ich, das ich warte bis `calculated_data.json()` ausgeführt ist. An sich funktioniert es auch, weil in der Konsole kann ich meine Daten sehen. Ich denke aber, dass die Seite mit dem laden nicht wartet, bis die Daten da sind und es mir deswegen mein Default-Wert angezeigt wird.
Meine Frage wäre, wie kann ich meinem template die Daten geben, nach dem sie geladen sind? Das ganze muss abhängig von einem Button-Klick sein. Das ähnliche Problem hatten wir/ich hier schon mal, aber da sind wir das mit `onMounted` "umgangen" bzw. das war da die richtige Vorgehensweise.


Vielen Dank und Grüße
Dennis

[Sirius3]

Programmieren funktionier nicht durch "raten".
In start_calculation hast Du die lokale Variable calculated_data, die ein Response-Objekt ist, also mit Berechneten Daten nichts zu tun hat. Warum Du dann im Response-Objekt ein weiteres Attribut `value` hinzufügst, dann unsinnig, weil damit machst Du ja nichts mehr. Den korrekten Code hatte ich ja schon am 13. Mai gepostet, das muß ich hier nicht wiederholen.
Bei der URL `index` würde ich nicht erwarten, dass hier Daten zurückgeliefert werden.

[Dennis89]

Danke für den Hinweis.
Eigentlich war dieser Post von dir auch meine Vorlage für mein "raten". Ich hatte das mit dem Response-Objekt nicht so ganz verstanden und daher hatte die Namenswahl Sinn gemacht. Ich habe jetzt eine lokale Variable `response` und das Ergebnis von `await response.json()` binde ich an mein `calculate_data` das ich nicht lokal noch mal erstellt habe. Jetzt funktioniert es, vielen Dank

"index" ist leider immer noch mein Platzhalter, weil mir da noch nichts wirkliches einfällt. Auch `calculated_data` ist nicht ganz richtig, denn da sind ja auch die Eingabedaten drin. Und dann ist im eigentlichen Programm `start_calculation` auch noch falsch. Das müsste `process_calculation` oder so heißen. Wenn ich das umbenenne und darin dann eine Funktion aufrufe, die die Eingabe Daten sendet und danach eine die die Ergebnisse empfängt, dann löst sich auch das "index"-Problem. Das teste ich so mal aus. Das entwickelt sich hier sehr langsam, weil ich mit JavaScript nicht vertraut bin, aber Stück für Stück wird es.

Grüße
Dennis

[Dennis89]

Hallo,

ich komme zum nächsten Schritt, die PDF mit den Eingaben und Ergebnissen.
Ein passendes Thema gibt es ja gerade hier im Forum Reportlab Rechnungs-/Dokumentenerstellung
Das und folgendes Zitat wie auch die anderen Hinweise zu `weasyprint` in diesem Thema bringen mich zu dem Entschluss, dass mein jetziger Aufbau nicht passend ist.

Das wäre auch von Vorteil wenn man am Ende so etwas wie `weasyprint` verwendet, und da vielleicht der Unterschied wirklich nur noch ist ob man das HTML ausliefert, oder es in ein PDF umwandeln lässt und das ausliefert.

Wenn ich es richtig verstehe, dann schreibe ich den HTML + CSS - Teil, der die Ergebnisseite beschreibt extra und liefere ihn mit `weasyprint` aus?

Bis jetzt habe ich eine *.html - Datei und die ist nach der Vorlage aus diesem Thema aufgebaut. Mein Ziel war erst mal die Ergebnisse und die Eingabewerte nach einem Button-Klick darzustellen, dieser Teil sieht gekürzt so aus :

Code: Alles auswählen

<template v-else-if="show_result_mode">
  
  <h2>Ergebnisse</h2>
    <table>
      <template v-for="(result, index) in calculated_data.results">
        <tr><th>Ergebnisse der Stufe {{index + 1}}</th></tr>
        <tr><th>Kondensatausfall</th><td>{{result.condensate_outage}} kg/h</td></tr>
        <br/>
      </template>
    </table>

  <div>
  <button @click="show_result_mode = false">Zurück</button>
  </div>
</template>

Da gibts noch Tabellen für die Eingaben, aber der Aufbau ist gleich. Mir war schon bewusst, dass ich das vermutlich wieder wegwerfen muss, aber ich habe erst mal die Daten da wo ich sie wollte.
Wenn ich jetzt eine den Teil schön mit HTML und CSS mache, wie kommt der dann da "rein"? Bis jetzt ist es ja so, das ich eine URL habe. Kann ich dabei bleiben? So wie ich das sehe und auch die Beispiele die ich gesehen habe, glaube ich das nicht.

Irgendwie fehlt mir so der Startpunkt. Ich hätte mich jetzt blind auf das Beispiel von Sirius3 aus dem anderen Thema gestürzt, aber brauche ich auch `Jinja2` und muss/kann ich Vue wieder einbinden?
Da habe ich plötzlich viele neue Unbekannte. Ich verstehe schon nicht ganz was `Jinja2` macht. Es ist eine Engine die hilfreich ist um dynamische Webseiten sicher zu erstellen, wäre zusammen gefasst, was ich darüber rausgefunden habe.
Muss ich dann jetzt `weasyprint`, `HTML`, `CSS`, `Vue` und `jinja2` verstehen und anwenden um eine schöne PDF zu erstellen?

Sorry ich weis, das sind viele Fragen und auch vermutlich etwas chaotisch, so chaotisch sind aber gerade die Gedanken in meinem Kopf.


Vielen Dank und Grüße
Dennis

[Sirius3]

Vue ist Javascript, um HTML-Seiten dynamisch zu erzeugen, insbesondere direkt im Browser. Daher auch mein Vorschlag, einfach den Browser ein PDF drucken zu lassen.

Jinja2 ist eine Templatesprache in Python, um also auf Server-Seite HTML zu erzeugen, das wird auch gerne mit flask benutzt. Oder eben das HTML für weasyprint.

Deine URL muß dann aber das PDF ausliefern und nicht die Daten an sich.

Für schöne Webseiten brauchst Du eh HTML und CSS. weasyprint hat also den Vorteil, dass Du für schönes PDF nichts neues brauchst.