wip

Asz.html

@@ -9,7 +9,7 @@
       <div class="main">
         <div class="main-grid">
           <div class="main-left">
-            <b>Frau Maja Maruko,</b><br />geboren am 12. Mai 2002 in Halle/Westf.,<br />war vom 01.08.79 bis zur Aushändigung des Zeugnisses Studierende des Bildungsgangs<br /><b>Fachschule des Sozialwesens in der Fachrichtung Sozialpädagogik</b>
+            <b>Frau Mata Maruko,</b><br />geboren am 12. Mai 2002 in Halle/Westf.,<br />war vom 01.08.79 bis zur Aushändigung des Zeugnisses Studierende des Bildungsgangs<br /><b>Fachschule des Sozialwesens in der Fachrichtung Sozialpädagogik</b>
             <div class="voffset-halb"></div>
             Der allgemeine Prüfungsausschuss stellte in seiner Abschlusskonferenz am 27.6.2019 fest:
             <div class="voffset-halb"></div>

editor.html

@@ -1,5 +1,4 @@
 <section class="container">
-  <div class="left-half noprint">
     <div class="editor">
       <ul class="toolbar">
         <li><button type="button" data-command="bold">Fett</button></li>
@@ -14,7 +13,7 @@
       </ul>
       <textarea bind:value=text type=text>{text}</textarea>
     </div>
-  </div>
+    <div id="jsonformatter">Unter <code>»s«</code> erreichbare Daten:</div>
   <div class="right-half">
   {#if schueler}
     {#each schueler as s (s.ID)}
@@ -28,9 +27,13 @@
 import svelte from 'svelte'
 import TextareaEditor from 'textarea-editor'
 import marked from 'marked'
+import JSONFormatter from 'json-formatter-js'
 
 export default {
   oncreate () {
+    const {schueler} = this.get()
+    const formatter = new JSONFormatter(schueler[0])
+    document.querySelector('#jsonformatter').appendChild(formatter.render())
     const textarea = document.querySelector('textarea')
     const toolbar = document.querySelector('.toolbar')
     const editor = new TextareaEditor(textarea)
@@ -67,7 +70,7 @@ export default {
   computed: {
     Component: ({text}) => svelte.create(marked(text, { sanitize: false }))
   },
-  components: {Brief: './partials/brief.html'}
+  components: {Brief: './_brief.html'}
 }
 </script>
 
@@ -76,25 +79,40 @@ export default {
 /* Pattern styles */
 .container {
   display: grid;
-  grid-gap: 10px;
   grid-template-columns: 1fr 2fr;
+  grid-template-rows: 2fr 1fr;
+  grid-gap: 10px;
+  height: 90vh;
   margin-top: 10px;
 }
 
-.left-half {
-  grid-column: 1;
-}
-
 .right-half {
   grid-column: 2;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+Brief {
+  overflow: auto;
 }
 
 .editor {
-  position: sticky;
+  grid-column: 1;
+  grid-row: 1;
+  /* position: sticky; */
   height: 90%;
   margin-left: 10px;
 }
 
+#jsonformatter {
+  grid-column: 1;
+  grid-row-start: 2;
+  grid-row-end: 3;
+  font-size: 10pt;
+  margin-left: 10px;
+  overflow: auto;
+}
+
 textarea {
   width: 100%;
   height: 100%;

package-lock.json

@@ -770,6 +770,11 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "json-formatter-js": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/json-formatter-js/-/json-formatter-js-2.2.0.tgz",
+      "integrity": "sha1-HtmHIj7y8dlFMEWX+q54tYCoISs="
+    },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",

package.json

@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "json-formatter-js": "^2.2.0",
     "knex": "^0.14.6",
     "lodash": "^4.17.10",
     "marked": "^0.4.0",

partials/brief.html

@@ -1,448 +0,0 @@
-    <div class="page grid" orientation="portrait" size="A4">
-      <span class="falzmarke-oben">––</span>
-      <span class="falzmarke-unten">––</span>
-      <div class="seitenlogo">
-        <img src="daten/traeger_logo.svg" height="160px" alt="traeger_logo" />
-      </div>
-      <div class="header">
-        <img class="logo" src="daten/bk_logo.svg" alt="Briefkopf" />
-        <hr class="hr-rot hr" />
-      </div>
-      <div class="main">
-        <div class="sidebar">
-          <div class="sidebar-oben">
-            Am Zionswald 12<br />33617 Bielefeld
-            <div class="voffset-1"></div>
-            Telefon 0521 144-2467<br />Telefax 0521 144-2470<br />berufskolleg@fvbschulen.de<br />www.berufskolleg-bethel.de
-            <div class="voffset-1"></div>
-            Bürozeiten:<br />Mo. und Do.<br />07:15 – 12:30 Uhr<br />13:30 – 15:30 Uhr<br />Di., Mi. und Fr.<br />07:15 – 13:30 Uhr
-            <div class="voffset-1"></div>
-            {(new Date().toLocaleDateString('de', {day: '2-digit', month: '2-digit', year: 'numeric'}))}<br />
-            <slot name="kuerzel"></slot>
-          </div>
-          <div class="sidebar-unten">
-            Unsere Bildungsgänge:
-            <div class="voffset-1"></div>
-            <b>Berufliches Gymnasium</b><br />Erziehung und Soziales<br />(Erzieher_in / AHR)
-            <div class="voffset-1"></div>
-            <b>Fachschulen</b><br />Sozialpädagogik<br />Heilerziehungspflege<br />Heilpädagogik<br />Heilpädagogische Förderung<br />mit dem Pferd
-            <div class="voffset-1"></div>
-            <b>Fachoberschule</b><br />Gesundheit und Soziales
-            <div class="voffset-1"></div>
-            <b>Berufsfachschulen</b><br />Sozialassistenz/<br />Heilerziehung
-            <div class="voffset-1"></div>
-            <b>Weitere Informationen:</b><br />www.berufskolleg-bethel.de
-          </div>
-        </div>
-        <div class="links">
-          <div class="absender">
-            v.Bodelschwinghsche Stiftungen Bethel<br /><b>Berufskolleg Bethel </b>· Postfach 130 160 · 33544 Bielefeld
-          </div>
-          <div class="anschrift">
-            <slot name="anschrift"></slot>
-          </div>
-          <div class="anschreiben">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    </div>
-
-<style>
-.page {
-  font-size: 1.2em;
-  line-height: 1.5;
-  font-weight: normal;
-  font-family: "Tex Gyre Heros";
-  color: #333;
-  position: relative;
-  padding: 0;
-  display: block;
-}
-.grid {
-  display: grid;
-  align-content: stretch;
-  grid-template-rows: 35mm auto;
-  grid-template-areas:
-    "header"
-    "main";
-}
-
-.header {
-  display: grid;
-  grid-area: header;
-  align-self: start;
-  margin-left: 24.1mm;
-  margin-right: 8.1mm;
-  grid-template-columns: auto;
-  grid-template-rows: auto;
-  grid-template-areas:
-    "logo"
-    "hr";
-}
-
-.logo {
-  justify-content: end;
-  margin-top: 10mm;
-  grid-area: logo;
-  margin-left: auto;
-}
-
-.hr {
-  grid-area: hr;
-  align-self: end;
-}
-
-.main {
-  grid-area: main;
-  align-content: stretch;
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  height: 100%;
-  grid-template-areas:
-    "links sidebar";
-}
-
-.links {
-  display: grid;
-  grid-area: links;
-  grid-template-rows: 10mm 40mm auto;
-  margin-bottom: 10mm;
-  grid-template-areas:
-    "absender"
-    "anschrift"
-    "anschreiben";
-}
-
-.absender {
-  grid-area: absender;
-  font-size: 7.5pt;
-  margin-left: 20mm;
-}
-
-.anschrift {
-  grid-area: anschrift;
-  font-size: 11pt;
-  margin-left: 25mm;
-}
-
-.anschreiben {
-  grid-area: anschreiben;
-  font-size: 11pt;
-  margin-left: 25mm;
-  width: 115mm;
-}
-
-.sidebar {
-  display: grid;
-  margin-right: 8.1mm;
-  justify-self: end;
-  grid-area: sidebar;
-  margin-bottom: 10mm;
-  grid-template-rows: auto;
-  grid-template-areas:
-    "sidebar-oben"
-    "sidebar-unten";
-}
-
-.sidebar-oben {
-  grid-area: sidebar-oben;
-  align-self: start;
-}
-
-.sidebar-unten {
-  grid-area: sidebar-unten;
-  align-self: end;
-}
-
-.flex-grid {
-  display: flex;
-}
-
-.col {
-  flex: 1;
-}
-
-.col-2 {
-  flex: 2;
-}
-
-@import url(normalize.css);
-@font-face {
-  font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-regular-webfont.woff") format("woff");
-  font-style: normal;
-}
-@font-face {
-  font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-bold-webfont.woff") format("woff");
-  font-style: normal;
-  font-weight: bold;
-}
-@font-face {
-  font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-italic-webfont.woff") format("woff");
-  font-style: italic;
-}
-@font-face {
-  font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-bolditalic-webfont.woff") format("woff");
-  font-style: italic;
-  font-weight: bold;
-}
-
-@media print {
-  * {
-    -webkit-print-color-adjust: exact;
-  }
-
-  .page {
-    page-break-after: always;
-    page-break-inside: avoid;
-    margin: 0;
-  }
-}
-
-/*
-Da *named pages*, also z.B. @page a3landscape noch nicht von Chrome
-unterstützt werden, gilt vorerst die Standard-Einstellung von A4 Portrait.
-Um andere Formate zu erzeugen, muss die Größe in den svelte-Koponenten
-als setup-Einstellung hinterlegt werden. Oder man verwendet ein besonderes CSS
-mit der anderen Einstellung.
-Dazu bitte ein @import 'nicht_a4_portrait.css' verwenden. Svelte ignoriert sonst
-die in den <style> tags hinterlegten @... Anweisungen.
-Link: https://www.w3.org/TR/css3-page/#using-named-pages
-*/
-
-.page[size="A4"][orientation="portrait"] {
-  page: a4portrait;
-  width: 210mm;
-  height: 296.8mm;
-}
-@page a4portrait {
-  margin: 0;
-  size: A4 portrait;
-}
-
-.page[size="A4"][orientation="landscape"] {
-  page: a4landscape;
-  width: 296.8mm;
-  height: 210mm;
-}
-@page a4landscape {
-  margin: 0;
-  size: A4 landscape;
-}
-
-.page[size="A3"][orientation="portrait"] {
-  page: a3portrait;
-  width: 296.8mm;
-  height: 420mm;
-}
-@page a3portrait {
-  margin: 0;
-  size: A3 portrait;
-}
-
-.page[size="A3"][orientation="landscape"] {
-  page: a3landscape;
-  width: 420mm;
-  height: 296.8mm;
-}
-@page a3landscape {
-  margin: 0;
-  size: A3 landscape;
-}
-
-.page[size="A5"][orientation="portrait"] {
-  page: a5portrait;
-  width: 148mm;
-  height: 210mm;
-}
-@page a5portrait {
-  margin: 0;
-  size: A5 portrait;
-}
-
-.page[size="A5"][orientation="landscape"] {
-  page: a5landscape;
-  width: 210mm;
-  height: 148mm;
-}
-@page a5landscape {
-  margin: 0;
-  size: A5 landscape;
-}
-
-@media screen {
-  .page {
-    border: 1px solid black;
-    box-shadow: 5px 5px 4px 0 silver;
-  }
-}
-
-svelte {
-  font-size: 62.5%;
-}
-
-
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 400;
-}
-
-h1 {
-  font-size: 4.0em;
-  line-height: 1.2;
-  letter-spacing: -.1em;
-}
-
-h2 {
-  font-size: 3.6em;
-  line-height: 1.25;
-  letter-spacing: -.1em;
-}
-
-h3 {
-  font-size: 3.0em;
-  line-height: 1.3;
-  letter-spacing: -.1em;
-}
-
-h4 {
-  font-size: 2.4em;
-  line-height: 1.35;
-  letter-spacing: -.08em;
-}
-
-h5 {
-  font-size: 1.8em;
-  line-height: 1.5;
-  letter-spacing: -.05em;
-}
-
-h6 {
-  font-size: 1.5em;
-  line-height: 1.6;
-  letter-spacing: 0;
-}
-
-p {
-  margin-top: 0;
-}
-.voffset-halb {
-  margin-top: 0.5em;
-}
-
-.voffset-1 {
-  margin-top: 1em;
-}
-
-.voffset-2 {
-  margin-top: 2em;
-}
-
-.voffset-3 {
-  margin-top: 3em;
-}
-
-.voffset-4 {
-  margin-top: 4em;
-}
-
-.voffset-5 {
-  margin-top: 5em;
-}
-
-.voffset-6 {
-  margin-top: 6em;
-}
-
-.voffset-7 {
-  margin-top: 7em;
-}
-
-.voffset-8 {
-  margin-top: 8em;
-}
-
-.voffset-9 {
-  margin-top: 9em;
-}
-
-.voffset-10 {
-  margin-top: 10em;
-}
-
-.voffset-11 {
-  margin-top: 11em;
-}
-
-.voffset-12 {
-  margin-top: 12em;
-}
-
-.voffset-13 {
-  margin-top: 13em;
-}
-
-.voffset-14 {
-  margin-top: 14em;
-}
-
-.voffset-15 {
-  margin-top: 15em;
-}
-
-.voffset-16 {
-  margin-top: 16em;
-}
-
-.voffset-17 {
-  margin-top: 17em;
-}
-
-.voffset-18 {
-  margin-top: 18em;
-}
-
-.voffset-19 {
-  margin-top: 19em;
-}
-
-.voffset-20 {
-  margin-top: 20em;
-}
-
-.text-center {
-  text-align: center !important;
-}
-
-hr {
-  border: 0;
-  border-top: 1px solid #eee;
-  border-color: #000;
-  height: 1px;
-  margin: 3px 0;
-}
-.hr-rot {
-  border-color: #ff2700;
-  margin: 8px 0;
-}
-.hr-grau {
-  border-color: #646464 !important;
-}
-
-.falzmarke-oben {
-  position: absolute;
-  top: 105mm;
-  left: 10mm;
-}
-.falzmarke-unten {
-  position: absolute;
-  top: 210mm;
-  left: 10mm;
-}
-</style>

partials/testbrief.html

@@ -1,449 +0,0 @@
-    <div class="page grid" orientation="portrait" size="A4">
-      <span class="falzmarke-oben">––</span>
-      <span class="falzmarke-unten">––</span>
-      <div class="seitenlogo">
-        <img src="daten/logo_seite_dummy.svg" height="160px" alt="traeger_logo" />
-      </div>
-      <div class="header">
-        <img class="logo" src="daten/top_dummy.svg" alt="Briefkopf" />
-        <hr class="hr-rot hr" />
-      </div>
-      <div class="main">
-        <div class="sidebar">
-          <div class="sidebar-oben">
-            Somewhere 12<br />12345 Nowhere
-            <div class="voffset-1"></div>
-            Telefon 0123 1412617<br />Telefax 0122 14214270<br />us@thisaddress.de<br />www.thisaddress.de
-            <div class="voffset-1"></div>
-            Bürozeiten:<br />Mo. und Do.<br />07:15 – 12:30 Uhr<br />13:30 – 15:30 Uhr<br />Di., Mi. und Fr.<br />07:15 – 13:30 Uhr
-            <div class="voffset-1"></div>
-            {(new Date().toLocaleDateString('de', {day: '2-digit', month: '2-digit', year: 'numeric'}))}<br />
-            <slot name="kuerzel"></slot>
-          </div>
-          <div class="sidebar-unten">
-            Important stuff:
-            <div class="voffset-1"></div>
-            <b>This here</b><br />Foo<br />Bar
-            <div class="voffset-1"></div>
-            <b>That</b><br />Hoo<br />Haaaaaaaaa<br />jOOOOOOOO<br />weeeeeee waaaa<br />wuuu
-            <div class="voffset-1"></div>
-            <b>gggggggg</b><br />wedwedwae wedw wdweewe
-            <div class="voffset-1"></div>
-            <b>wedwedwedwed</b><br />dwedwefffff/<br />Hewq)wedwef
-            <div class="voffset-1"></div>
-            <b>Weitere Informationen:</b><br />www.thisaddress.de
-          </div>
-        </div>
-        <div class="links">
-          <div class="absender">
-            Me somewhere<br /><b>at this place</b>· Postfach 123 456 · 12345 Nowhere
-          </div>
-          <div class="anschrift">
-            <slot name="anschrift"></slot>
-          </div>
-          <div class="anschreiben">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    </div>
-
-<style>
-.page {
-  font-size: 1.2em;
-  line-height: 1.5;
-  font-weight: normal;
-  font-family: "Tex Gyre Heros";
-  color: #333;
-  position: relative;
-  padding: 0;
-  display: block;
-}
-.grid {
-  display: grid;
-  align-content: stretch;
-  grid-template-rows: 35mm auto;
-  grid-template-areas:
-    "header"
-    "main";
-}
-
-.header {
-  display: grid;
-  grid-area: header;
-  align-self: start;
-  margin-left: 24.1mm;
-  margin-right: 8.1mm;
-  grid-template-columns: auto;
-  grid-template-rows: auto;
-  grid-template-areas:
-    "logo"
-    "hr";
-}
-
-.logo {
-  justify-content: end;
-  margin-top: 10mm;
-  grid-area: logo;
-  margin-left: auto;
-  height: 20mm;
-}
-
-.hr {
-  grid-area: hr;
-  align-self: end;
-}
-
-.main {
-  grid-area: main;
-  align-content: stretch;
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  height: 100%;
-  grid-template-areas:
-    "links sidebar";
-}
-
-.links {
-  display: grid;
-  grid-area: links;
-  grid-template-rows: 10mm 40mm auto;
-  margin-bottom: 10mm;
-  grid-template-areas:
-    "absender"
-    "anschrift"
-    "anschreiben";
-}
-
-.absender {
-  grid-area: absender;
-  font-size: 7.5pt;
-  margin-left: 20mm;
-}
-
-.anschrift {
-  grid-area: anschrift;
-  font-size: 11pt;
-  margin-left: 25mm;
-}
-
-.anschreiben {
-  grid-area: anschreiben;
-  font-size: 11pt;
-  margin-left: 25mm;
-  width: 115mm;
-}
-
-.sidebar {
-  display: grid;
-  margin-right: 8.1mm;
-  justify-self: end;
-  grid-area: sidebar;
-  margin-bottom: 10mm;
-  grid-template-rows: auto;
-  grid-template-areas:
-    "sidebar-oben"
-    "sidebar-unten";
-}
-
-.sidebar-oben {
-  grid-area: sidebar-oben;
-  align-self: start;
-}
-
-.sidebar-unten {
-  grid-area: sidebar-unten;
-  align-self: end;
-}
-
-.flex-grid {
-  display: flex;
-}
-
-.col {
-  flex: 1;
-}
-
-.col-2 {
-  flex: 2;
-}
-
-@import url(normalize.css);
-@font-face {
-  font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-regular-webfont.woff") format("woff");
-  font-style: normal;
-}
-@font-face {
-  font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-bold-webfont.woff") format("woff");
-  font-style: normal;
-  font-weight: bold;
-}
-@font-face {
-  font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-italic-webfont.woff") format("woff");
-  font-style: italic;
-}
-@font-face {
-  font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-bolditalic-webfont.woff") format("woff");
-  font-style: italic;
-  font-weight: bold;
-}
-
-@media print {
-  * {
-    -webkit-print-color-adjust: exact;
-  }
-
-  .page {
-    page-break-after: always;
-    page-break-inside: avoid;
-    margin: 0;
-  }
-}
-
-/*
-Da *named pages*, also z.B. @page a3landscape noch nicht von Chrome
-unterstützt werden, gilt vorerst die Standard-Einstellung von A4 Portrait.
-Um andere Formate zu erzeugen, muss die Größe in den svelte-Koponenten
-als setup-Einstellung hinterlegt werden. Oder man verwendet ein besonderes CSS
-mit der anderen Einstellung.
-Dazu bitte ein @import 'nicht_a4_portrait.css' verwenden. Svelte ignoriert sonst
-die in den <style> tags hinterlegten @... Anweisungen.
-Link: https://www.w3.org/TR/css3-page/#using-named-pages
-*/
-
-.page[size="A4"][orientation="portrait"] {
-  page: a4portrait;
-  width: 210mm;
-  height: 296.8mm;
-}
-@page a4portrait {
-  margin: 0;
-  size: A4 portrait;
-}
-
-.page[size="A4"][orientation="landscape"] {
-  page: a4landscape;
-  width: 296.8mm;
-  height: 210mm;
-}
-@page a4landscape {
-  margin: 0;
-  size: A4 landscape;
-}
-
-.page[size="A3"][orientation="portrait"] {
-  page: a3portrait;
-  width: 296.8mm;
-  height: 420mm;
-}
-@page a3portrait {
-  margin: 0;
-  size: A3 portrait;
-}
-
-.page[size="A3"][orientation="landscape"] {
-  page: a3landscape;
-  width: 420mm;
-  height: 296.8mm;
-}
-@page a3landscape {
-  margin: 0;
-  size: A3 landscape;
-}
-
-.page[size="A5"][orientation="portrait"] {
-  page: a5portrait;
-  width: 148mm;
-  height: 210mm;
-}
-@page a5portrait {
-  margin: 0;
-  size: A5 portrait;
-}
-
-.page[size="A5"][orientation="landscape"] {
-  page: a5landscape;
-  width: 210mm;
-  height: 148mm;
-}
-@page a5landscape {
-  margin: 0;
-  size: A5 landscape;
-}
-
-@media screen {
-  .page {
-    border: 1px solid black;
-    box-shadow: 5px 5px 4px 0 silver;
-  }
-}
-
-svelte {
-  font-size: 62.5%;
-}
-
-
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 400;
-}
-
-h1 {
-  font-size: 4.0em;
-  line-height: 1.2;
-  letter-spacing: -.1em;
-}
-
-h2 {
-  font-size: 3.6em;
-  line-height: 1.25;
-  letter-spacing: -.1em;
-}
-
-h3 {
-  font-size: 3.0em;
-  line-height: 1.3;
-  letter-spacing: -.1em;
-}
-
-h4 {
-  font-size: 2.4em;
-  line-height: 1.35;
-  letter-spacing: -.08em;
-}
-
-h5 {
-  font-size: 1.8em;
-  line-height: 1.5;
-  letter-spacing: -.05em;
-}
-
-h6 {
-  font-size: 1.5em;
-  line-height: 1.6;
-  letter-spacing: 0;
-}
-
-p {
-  margin-top: 0;
-}
-.voffset-halb {
-  margin-top: 0.5em;
-}
-
-.voffset-1 {
-  margin-top: 1em;
-}
-
-.voffset-2 {
-  margin-top: 2em;
-}
-
-.voffset-3 {
-  margin-top: 3em;
-}
-
-.voffset-4 {
-  margin-top: 4em;
-}
-
-.voffset-5 {
-  margin-top: 5em;
-}
-
-.voffset-6 {
-  margin-top: 6em;
-}
-
-.voffset-7 {
-  margin-top: 7em;
-}
-
-.voffset-8 {
-  margin-top: 8em;
-}
-
-.voffset-9 {
-  margin-top: 9em;
-}
-
-.voffset-10 {
-  margin-top: 10em;
-}
-
-.voffset-11 {
-  margin-top: 11em;
-}
-
-.voffset-12 {
-  margin-top: 12em;
-}
-
-.voffset-13 {
-  margin-top: 13em;
-}
-
-.voffset-14 {
-  margin-top: 14em;
-}
-
-.voffset-15 {
-  margin-top: 15em;
-}
-
-.voffset-16 {
-  margin-top: 16em;
-}
-
-.voffset-17 {
-  margin-top: 17em;
-}
-
-.voffset-18 {
-  margin-top: 18em;
-}
-
-.voffset-19 {
-  margin-top: 19em;
-}
-
-.voffset-20 {
-  margin-top: 20em;
-}
-
-.text-center {
-  text-align: center !important;
-}
-
-hr {
-  border: 0;
-  border-top: 1px solid #eee;
-  border-color: #000;
-  height: 1px;
-  margin: 3px 0;
-}
-.hr-rot {
-  border-color: #ff2700;
-  margin: 8px 0;
-}
-.hr-grau {
-  border-color: #646464 !important;
-}
-
-.falzmarke-oben {
-  position: absolute;
-  top: 105mm;
-  left: 10mm;
-}
-.falzmarke-unten {
-  position: absolute;
-  top: 210mm;
-  left: 10mm;
-}
-</style>

stats.html

@@ -1,30 +1,35 @@
 <h1>Statistik sortiert nach Klassen</h1>
 <h3>Durchschnittsnoten FHR, d.h. nur Absolventen werden berücksichtigt</h3>
-Legende: Schulnummer, Anzahl der Schule von abgehender Schule, Schnitt, davon gültige Einträge
+Legende: Schulnummer, Anzahl der Schüler von abgehender Schule, Schnitt, davon gültige Einträge
 <br>
-<button on:click="getSchueler('A')">A-Klassen</button>
-<button on:click="getSchueler('B')">B-Klassen</button>
-<button on:click="getSchueler('C')">C-Klassen</button>
-<button on:click="getSchueler('D')">D-Klassen</button>
-<button on:click="getSchueler('E')">E-Klassen</button>
-<button on:click="getSchueler('F')">F-Klassen</button>
-<button on:click="getSchueler('G')">G-Klassen</button>
-<button on:click="getSchueler('H')">H-Klassen</button>
+<button on:click="getKlasse('A')">A-Klassen</button>
+<button on:click="getKlasse('B')">B-Klassen</button>
+<button on:click="getKlasse('C')">C-Klassen</button>
+<button on:click="getKlasse('D')">D-Klassen</button>
+<button on:click="getKlasse('E')">E-Klassen</button>
+<button on:click="getKlasse('F')">F-Klassen</button>
+<button on:click="getKlasse('G')">G-Klassen</button>
+<button on:click="getKlasse('H')">H-Klassen</button>
 {#each Object.entries(schulen) as [schule, values]}
   <br>{schule}: {values.length} -> Durchschnittsnote: {dsn(values).join(': ')}
 {/each}
 
-<script>
-const {Schueler} = require('schild/models/Models')
-const { Model } = require('objection')
-const Knex = require('knex')
-const _ = require('lodash')
+<h3>DSN nach Alter bzw. Geburtsjahr</h3>
+{#each Object.entries(dsnNachAlter) as [baujahr, values]}
+  <br>{baujahr}: {values.length} -> Durchschnittsnote: {dsn(values)[0]}
+{/each}
+
+<h3>FOS11 nach Alter und D,M,E</h3>
+{#each Object.entries(dmeNachAlter) as [baujahr, values]}
+  <br>{baujahr}: {values.length} -> Durchschnittsnote: {dme(values)}
+{/each}
 
+<script>
 export default {
   setup(Component) {Component.bez = 'Statistik'},
   oncreate () {
     const { knex } = this.get()
-    Model.knex(Knex({
+    R.objection.Model.knex(R.knex({
       client: 'mysql',
       useNullAsDefault: true,
       connection: {
@@ -37,6 +42,18 @@ export default {
     }))
   },
   helpers: {
+    dme (a) {
+      const arr = R.lodash.filter(a, a => a.abschnitte && a.abschnitte[1] && a.abschnitte[1].noten[0] && a.abschnitte[1].noten[0].NotenKrz)
+      let ln = arr.length
+      // console.log(arr)
+      const r = arr.reduce((total, value) => {
+        const noten = R.lodash.filter(value.abschnitte[1].noten, n => ['DEKO', 'EN', 'MA'].includes(n.fach.FachKrz))
+        const summe = noten.reduce((t, v) => t + parseFloat(v.NotenKrz), 0)/3
+        return total + summe
+      }, 0)
+      // console.log(r)
+      return `${(r / ln)} (${ln}/${a.length})`
+    },
     dsn (arr) {
       let ln = arr.length
       const r = arr.reduce((total, value) => {
@@ -49,19 +66,33 @@ export default {
     },
   },
   methods: {
-    async getSchueler (pattern) {
-      const schueler = await Schueler.query()
+    async getKlasse (pattern) {
+      const schueler = await R.models.Schueler.query()
         .where('Klasse', 'like', pattern + '%')
-        .havingNotNull('DurchschnittsnoteFHR')
-      
-      this.set({schulen: _.groupBy(schueler, 'LSSchulNr')})
-      // console.log(schueler)
+        .eager('abschnitte.[noten.fach]')
+      this.set({gruppe: schueler})
+    }
+  },
+  computed: {
+    schulen: ({gruppe}) => {
+      const dsn = R.lodash.filter(gruppe, 'DurchschnittsnoteFHR')
+      return R.lodash.groupBy(dsn, 'LSSchulNr')
+    },
+    dsnNachAlter: ({gruppe}) => {
+      const dsn = R.lodash.filter(gruppe, 'DurchschnittsnoteFHR')
+      return R.lodash.groupBy(dsn, (s) => { return new Date(s.Geburtsdatum).getFullYear()})
+      // console.log(R.lodash([1,2,3,4])) //, (s) => { return new Date(s.Geburtsdatum).getFullYear()}))
+    },
+    dmeNachAlter: ({gruppe}) => {
+      const fos11 = R.lodash.filter(gruppe, s => s['PruefOrdnung'] === 'APO-BK-11/C-FOS' && s.status === "8")
+      return R.lodash.groupBy(fos11, (s) => { return new Date(s.Geburtsdatum).getFullYear()})
+
     }
+    // }
   },
   data () {
     return {
-      schuelerx: [],
-      schulen: {}
+      gruppe: null
     }
   }
 }