updates

asz_fs_pkb.html → ASZ Fachschule.html

@@ -1,27 +1,22 @@
 {#each schueler as s}
   {#each s.abschnitte.filter(aktHalbjahr) as hj}
-    <div class="page grid" orientation="landscape" size="A3" style="font-size: 1.25em">
-      <div class="seitenlogo">
-        <img src="daten/traeger_logo.svg" height="160px" alt="traeger_logo" />
-      </div>
-      <div class="header">
-        <img src="daten/asz_logo_ohne_linie_breiter_text_breit.svg" width="100%" alt="zeugnis_logo" />
-        <hr class="hr-rot" />
-      </div>
+    <div class="page grid" orientation="landscape" size="A3">
+      <Seitenlogo/>
+      <Pageheader logo="daten/asz_logo_ohne_linie_breiter_text_breit.svg"/>
       <div class="main">
         <div class="main-grid">
-          <div class="voffset-1"></div>
+          <Voffset v="1"/>
           <div class="main-left">
             <b>{s.anrede} {s.Vorname} {_.toString(s.Zusatz)} {s.Name},</b>
             <br />geboren am {datum(s.Geburtsdatum)} in {s.Geburtsort},
             <br />war vom {datum(s.Aufnahmedatum)} bis zur Aushändigung des Zeugnisses Studierende des Bildungsgangs
             <br /><b>{fkl[s.fachklasse.Kennung].Zeugniskopf}</b>
-            <div class="voffset-halb"></div>
+            <Voffset v=".5"/>
             Der allgemeine Prüfungsausschuss stellte in seiner Abschlusskonferenz am {datum(hj.Konferenzdatum)} fest:
-            <div class="voffset-halb"></div>
+            <Voffset v=".5"/>
             <b>Leistungen</b>
             <div style="font-size: 90%">
-              <Noten bind:data="hj.noten"></Noten>
+              <Noten noten={hj.noten}></Noten>
             </div>
             <hr />
             <b>Bemerkungen</b><br />{bemerkungen(hj)}
@@ -32,10 +27,10 @@
               Fachschulexamen
             </h4>
             am Fehlt bestanden.
-            <div class="voffset-1"></div>
+            <Voffset v="1"/>
             <table class="table-noten">
             </table>
-            <div class="voffset-2"></div>
+            <Voffset v="2"/>
             <table class="table-noten">
               <tr>
                 <td>
@@ -62,18 +57,18 @@
                 </td>
               </tr>
             </table>
-            <div class="voffset-4"></div>
+            <Voffset v="4"/>
             Frau Elena Bentlage ist berechtigt, die Berufsbezeichnung
             <h4 class="text-center">
               Staatlich anerkannte Erzieherin
             </h4>
             zu führen.
-            <div class="voffset-1">
-              Der Abschluss ist im Deutschen und Europäischen Qualifikationsrahmen dem Niveau 6 zugeordnet.
-            </div>
-            <div class="voffset-6"></div>
+            <Voffset v="1"/>
+            Der Abschluss ist im Deutschen und Europäischen Qualifikationsrahmen dem Niveau 6 zugeordnet.
+            <Voffset v="6"/>
             Bielefeld, den 01.01.1899
-            <div class="flex-grid voffset-6">
+            <div class="flex-grid">
+              <Voffset v="6"/>
               <div class="col">
                 <hr />
                 <div class="text-center klein">
@@ -126,14 +121,17 @@
 
 <script>
   import { datum, volljaehrigBei, bemerkungen }  from './helfer'
+  import fkl from './daten/fachklassen.json'
   const _ = R.lodash
-  import fkl from './fachklassen.json'
 
-	export default {
-    setup(Component) {Component.bez = 'ASZ FS SP/HEP PKB'},
-    components: {Noten: './partials/NotenE.html'},
-    data () { return {fkl: fkl} },
-    helpers: { datum, versetzungsvermerk, volljaehrigBei, bemerkungen, _ },
+  export default {
+    components: {
+      Seitenlogo: './partials/Seitenlogo.html',
+      Pageheader: './partials/Pageheader.html',
+      Noten: './partials/Noten.html',
+      Voffset: './partials/Voffset.html'
+    },
+    helpers: { fkl, datum, volljaehrigBei, bemerkungen, _ },
     computed: {
       aktHalbjahr: ({jahr, abschnitt}) => { return a => a.Jahr === jahr && a.Abschnitt === abschnitt }
     }
@@ -141,5 +139,6 @@
 </script>
 
 <style>
-  @import 'daten/main.css';
+  @import 'css/main.css';
+  @import 'css/a3-landscape.css';
 </style>

Beilage SOA.html

@@ -1,109 +1,75 @@
 {#each schueler as s}
   <div class="page grid" orientation="portrait" size="A4">
-    <div class="seitenlogo">
-      <img src="daten/traeger_logo.svg" height="160px" alt="traeger_logo" />
-    </div>
-    <div class="header">
-      <img src="daten/zeugnis_logo.svg" width="100%" alt="zeugnis_logo" />
-      <hr class="hr-rot" />
-    </div>
+    <Seitenlogo/>
+    <Pageheader logo="daten/zeugnis_logo.svg"/>
     <div class="main">
-      Seite 2/2 des Abschlusseugnisses für {s.anrede} {s.Vorname} {_.toString(s.Zusatz)} {s.Name}
-      <div class="voffset-2">
-      </div>
+      Seite 2/2 des Abschlusseugnisses für {s.anrede} {s.Vorname} {s.Zusatz || ''} {s.Name}
+      <Voffset v="2"/>
       <table class="table table-bordered" style="width: 100%">
         <tr>
-          <th width="35%">
-            Bereichsspezifische Fächer
-          </th>
-          <th>
-            Zugeordnete Lernfelder
-          </th>
+          <th width="35%">Bereichsspezifische Fächer</th>
+          <th>Zugeordnete Lernfelder</th>
         </tr>
         <tr>
-          <td>
-            Erziehung und Soziales
-          </td>
+          <td>Erziehung und Soziales</td>
           <td>
             <ul class="dashes">
-              <li>
-                Bedürfnisse und Potentiale wahrnehmen, beobachten und analysieren
-              </li>
-              <li>
-                Mit Konzepten in sozialpädagogischen Einrichtungen arbeiten
-              </li>
-              <li>
-                Beziehungen in der sozialpädagogischen und pflegerischen Arbeit gestalten
-              </li>
-              <li>
-                Gestaltungsprinzipien und Gestaltungsmittel in Räumen sozialpflegerischer Einrichtungen
-              </li>
+              <li>Bedürfnisse und Potentiale wahrnehmen, beobachten und analysieren</li>
+              <li>Mit Konzepten in sozialpädagogischen Einrichtungen arbeiten</li>
+              <li>Beziehungen in der sozialpädagogischen und pflegerischen Arbeit gestalten</li>
+              <li>Gestaltungsprinzipien und Gestaltungsmittel in Räumen sozialpflegerischer Einrichtungen</li>
             </ul>
           </td>
         </tr>
         <tr>
-          <td>
-            Gesundheitsförderung und Pflege
-          </td>
+          <td>Gesundheitsförderung und Pflege</td>
           <td>
             <ul class="dashes">
-              <li>
-                Sozialpflegerische Handlungsprozesse systematisch planen, umsetzen, dokumentieren und evaluieren
-              </li>
-              <li>
-                Pflegekonzepte als Grundlage der pflegerischen Tätigkeiten anwenden
-              </li>
-              <li>
-                Kompetenzen, Ressourcen und Potentiale erkennen und fördern
-              </li>
-              <li>
-                Gesunde Lebensführung fördern
-              </li>
+              <li>Sozialpflegerische Handlungsprozesse systematisch planen, umsetzen, dokumentieren und evaluieren</li>
+              <li>Pflegekonzepte als Grundlage der pflegerischen Tätigkeiten anwenden</li>
+              <li>Kompetenzen, Ressourcen und Potentiale erkennen und fördern</li>
+              <li>Gesunde Lebensführung fördern</li>
             </ul>
           </td>
         </tr>
         <tr>
-          <td>
-            Arbeitsorganisation und Recht
-          </td>
+          <td>Arbeitsorganisation und Recht</td>
           <td>
             <ul class="dashes">
-              <li>
-                Sich im Berufsfeld orientieren, auf Anforderungen einlassen und die eigene Person darstellen
-              </li>
-              <li>
-                Rechte und Pflichten des Sozialassistenten kennen und wahrnehmen
-              </li>
-              <li>
-                Außendarstellung der sozialpädagogischen bzw. -pflegerischen Einrichtungen unterstützen
-              </li>
-              <li>
-                Wirtschaftlich mit Materialien umgehen
-              </li>
+              <li>Sich im Berufsfeld orientieren, auf Anforderungen einlassen und die eigene Person darstellen</li>
+              <li>Rechte und Pflichten des Sozialassistenten kennen und wahrnehmen</li>
+              <li>Außendarstellung der sozialpädagogischen bzw. -pflegerischen Einrichtungen unterstützen</li>
+              <li>Wirtschaftlich mit Materialien umgehen</li>
             </ul>
           </td>
         </tr>
       </table>
     </div>
-    <div class="footer">
-      <div class="klein grau">
-        <div class="schulnummer">
-          Schulnummer: {schule.SchulNr}
-        </div>
-      </div>
+    <div class="footer klein schulnummer">
+      Schulnummer: {schule.SchulNr}
     </div>
   </div>
 {/each}
 
 <script>
-  const _ = R.lodash
-  
-	export default {
-    setup(Component) {Component.bez = 'Beilage ASZ SOA'},
-    helpers: { _ }
+  export default {
+    components: {
+      Seitenlogo: './partials/Seitenlogo.html',
+      Pageheader: './partials/Pageheader.html',
+      Voffset: './partials/Voffset.html'
+    },
   }
 </script>
 
 <style>
-  @import 'daten/main.css';
+  @import 'css/main.css';
+  .table-bordered {
+    border-collapse: collapse;
+  }
+  .table-bordered tr {
+    border-bottom: thin solid #333;
+  }
+  .schulnummer {
+    text-align: right;
+  }
 </style>

Fotoliste.html

@@ -0,0 +1,57 @@
+{#await fotos}
+{:then fotosFertig}
+  {#each R.lodash.chunk(schueler, 25) as slice}
+    <div class="page grid" orientation="portrait" size="A4">
+      <div class="main">
+        <h5>{slice[0].Klasse}</h5>
+        Stand: {datum}
+        <div class="grid">
+          {#each slice as s}
+            <div>
+              <img src="data:image/jpg;base64,{fotosFertig[s.ID]}" alt="Foto" style="width: 120px">
+              <br>
+              {s.Name}, {s.Vorname}
+            </div>
+          {/each}
+        </div>
+      </div>
+    </div>
+  {/each}
+{/await}
+
+<style>
+  @import 'css/main.css';
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-gap: 10px;
+  }
+</style>
+
+<script>
+  export default {
+    computed: {
+      fotos: async ({schueler, knex}) => {
+        R.objection.Model.knex(R.knex({
+          client: 'mysql',
+          useNullAsDefault: true,
+          connection: {
+            host: knex.host,
+            database: knex.name,
+            user: knex.user,
+            password: knex.password,
+            charset: 'utf8'
+          }
+        }))
+        let f = {}
+        const schuelerfotos = await R.models.Schuelerfoto.query().whereIn('Schueler_ID', schueler.map(s => s.ID))
+        schuelerfotos.forEach(element => {
+          f[element.Schueler_ID] = Buffer.from(element.Foto, 'binary').toString('base64')
+        })
+        return f
+      }
+    },
+    data () { return { datum: new Date().toLocaleDateString('de', {day: '2-digit', month: '2-digit', year: 'numeric'}) } },
+    helpers: { R },
+  }
+</script>

Halbjahreszeugnis LF.html

@@ -0,0 +1,72 @@
+{#each schueler as s (s.ID)}
+  {#each s.abschnitte.filter(aktHalbjahr) as hj (hj.ID)}
+    <div class="page grid" orientation="portrait" size="A4">
+      <Seitenlogo/>
+      <Pageheader logo="daten/zeugnis_logo.svg"/>
+      <div class="main">
+        <div style="font-size: 15pt; line-height: 1.5em">
+          {(fkl[s.fachklasse.Kennung] || fkl.default).Schulform}
+        </div>
+        <div style="font-size: 12pt; line-height: 1.2em">
+          {(fkl[s.fachklasse.Kennung] || fkl.default).Bereich}
+        </div>
+        <Voffset v="1"/>
+        <b>{s.anrede} {s.Vorname} {_.toString(s.Zusatz)} {s.Name},</b>
+        <br />geboren am {datum(s.Geburtsdatum)} in {s.Geburtsort},<br />
+        besuchte im Schuljahr {hj.schuljahr} die Klasse {hj.Klasse}
+        <Voffset v="2"/>
+        Leistungen laut Konferenzbeschluss vom {datum(hj.Konferenzdatum)}:
+        <Noten noten={hj.noten}></Noten>
+        <hr />
+        Fehlstunden: {_.toNumber(hj.SumFehlStd)}
+        {#if hj.SumFehlStdU > 0}
+          , davon unentschuldigt: {hj.SumFehlStdU}
+          <Voffset v="1"/>
+        {/if}
+        <Voffset v="1"/>
+        <b>Bemerkungen</b><br />{bemerkungen(hj)}
+      </div>
+      <div class="footer">
+        <div class="flex-grid">
+          <div class="col-2">
+            {schule.Ort}, den {datum(hj.ZeugnisDatum)}
+          </div>
+          <div class="col text-center klein">
+            <Voffset v="3"/>
+            <hr />
+            {hj.v_name_klassenlehrer}<br />{hj.klassenlehrer_in}
+          </div>
+          <div class="col text-center klein">
+            <Voffset v="3"/>
+            Siegel
+          </div>
+        </div>
+        <Fussnote schulNr={schule.SchulNr}></Fussnote>
+      </div>
+    </div>
+  {/each}
+{/each}
+
+<script>
+  import { datum, versetzungsvermerk, volljaehrigBei, bemerkungen }  from './helfer'
+  const _ = R.lodash
+  import fkl from './daten/fachklassen.json'
+
+	export default {
+    components: {
+      Seitenlogo: './partials/Seitenlogo.html',
+      Pageheader: './partials/Pageheader.html',
+      Noten: './partials/Noten.html',
+      Fussnote: './partials/Fussnoten.html',
+      Voffset: './partials/Voffset.html'
+    },
+    helpers: { fkl, datum, versetzungsvermerk, volljaehrigBei, bemerkungen, _ },
+    computed: {
+      aktHalbjahr: ({jahr, abschnitt}) => { return a => a.Jahr === jahr && a.Abschnitt === abschnitt }
+    }
+  }
+</script>
+
+<style>
+  @import 'css/main.css';
+</style>

Halbjahreszeugnis.html

@@ -0,0 +1,90 @@
+{#each schueler as s (s.ID)}
+  {#each s.abschnitte.filter(aktHalbjahr) as hj (hj.ID)}
+    <div class="page grid" orientation="portrait" size="A4">
+      <Seitenlogo/>
+      <Pageheader logo="daten/zeugnis_logo.svg"/>
+      <div class="main">
+        <div style="font-size: 15pt; line-height: 1.5em">
+          {(fkl[s.fachklasse.Kennung] || fkl.default).Schulform}
+        </div>
+        <div style="font-size: 12pt; line-height: 1.2em">
+          {(fkl[s.fachklasse.Kennung] || fkl.default).Bereich}
+          {#if s.ASDSchulform.startsWith('B')}
+            <br />
+            Abschluss {s.Geschlecht === '3' ? fkl[s.fachklasse.Kennung || fkl.default].Berufsbezeichnung_m : fkl[s.fachklasse.Kennung].Berufsbezeichnung_w}
+          {/if}
+        </div>
+        <Voffset v="1"/>
+        <b>{s.anrede} {s.Vorname} {_.toString(s.Zusatz)} {s.Name},</b>
+        <br />geboren am {datum(s.Geburtsdatum)} in {s.Geburtsort},<br />
+        besuchte im {hj.Abschnitt}. Halbjahr des Schuljahres {hj.schuljahr} die Klasse {hj.Klasse}
+        <Voffset v="2"/>
+        Leistungen laut Konferenzbeschluss vom {datum(hj.Konferenzdatum)}:
+        <Noten noten={hj.noten}></Noten>
+        <hr />
+        Fehlstunden: {_.toNumber(hj.SumFehlStd)}
+        {#if hj.SumFehlStdU > 0}
+          , davon unentschuldigt: {hj.SumFehlStdU}
+          <Voffset v="1"/>
+        {/if}
+        <Voffset v="1"/>
+        <b>Bemerkungen</b><br />{bemerkungen(hj)}
+      </div>
+      <div class="footer">
+        <div class="flex-grid">
+          <div class="col-2">
+            {schule.Ort}, den {datum(hj.ZeugnisDatum)}
+          </div>
+          <div class="col text-center klein">
+            <Voffset v="3"/>
+            <hr />
+            {hj.v_name_klassenlehrer}<br />{hj.klassenlehrer_in}
+          </div>
+          <div class="col text-center klein">
+            <Voffset v="3"/>
+            Siegel
+          </div>
+        </div>
+        <div class="flex-grid">
+          <div class="col-2"></div>
+          <div class="col-2">
+            <Voffset v="1"/>
+            Die Kenntnisnahme wird bestätigt:
+          </div>
+          <div class="col">
+            <Voffset v="3"/>
+            <hr />
+            <div class="klein text-center">
+              {volljaehrigBei(s, hj.ZeugnisDatum) ? s.schueler_in : 'Erziehungsberechtigte'}
+            </div>
+          </div>
+        </div>
+        <Fussnote schulNr={schule.SchulNr}></Fussnote>
+      </div>
+    </div>
+  {/each}
+{/each}
+
+<script>
+  import { datum, versetzungsvermerk, volljaehrigBei, bemerkungen }  from './helfer'
+  const _ = R.lodash
+  import fkl from './daten/fachklassen.json'
+
+	export default {
+    components: {
+      Seitenlogo: './partials/Seitenlogo.html',
+      Pageheader: './partials/Pageheader.html',
+      Noten: './partials/Noten.html',
+      Fussnote: './partials/Fussnoten.html',
+      Voffset: './partials/Voffset.html'
+    },
+    helpers: { fkl, datum, versetzungsvermerk, volljaehrigBei, bemerkungen, _ },
+    computed: {
+      aktHalbjahr: ({jahr, abschnitt}) => { return a => a.Jahr === jahr && a.Abschnitt === abschnitt }
+    }
+  }
+</script>
+
+<style>
+  @import 'css/main.css';
+</style>

Jahreszeugnis.html

@@ -1,13 +1,8 @@
 {#each schueler as s (s.ID)}
   {#each s.abschnitte.filter(aktHalbjahr) as hj (hj.ID)}
     <div class="page grid" orientation="portrait" size="A4">
-      <div class="seitenlogo">
-        <img src="daten/traeger_logo.svg" height="160px" alt="traeger_logo" />
-      </div>
-      <div class="header">
-        <img src="daten/zeugnis_logo.svg" width="100%" alt="zeugnis_logo" />
-        <hr class="hr-rot" />
-      </div>
+      <Seitenlogo/>
+      <Pageheader logo="daten/zeugnis_logo.svg"/>
       <div class="main">
         <div style="font-size: 15pt; line-height: 1.5em">
           {(fkl[s.fachklasse.Kennung] || fkl.default).Schulform}
@@ -15,28 +10,28 @@
         <div style="font-size: 12pt; line-height: 1.2em">
           {(fkl[s.fachklasse.Kennung] || fkl.default).Bereich}<br />{s.Geschlecht === '3' ? s.fachklasse.Bezeichnung : s.fachklasse.Beschreibung_W}
         </div>
-        <div class="voffset-1"></div>
-        <b>{s.anrede} {s.Vorname} {_.toString(s.Zusatz)} {s.Name},</b>
+        <Voffset v="1"/>
+        <b>{s.anrede} {s.Vorname} {s.Zusatz || ''} {s.Name},</b>
         <br />geboren am {datum(s.Geburtsdatum)} in {s.Geburtsort},<br />
         {#if s.ASDSchulform.startsWith('E')}
           besuchte das Schuljahr {hj.schuljahr} in der Klasse {hj.Klasse}
         {:else}
           besuchte im {hj.Abschnitt}. Halbjahr des Schuljahres {hj.schuljahr} die Klasse {hj.Klasse}
         {/if}
-        <div class="voffset-2"></div>
+        <Voffset v="2"/>
         Leistungen laut Konferenzbeschluss vom {datum(hj.Konferenzdatum)}:
         <Noten noten={hj.noten}></Noten>
         <hr />
         {#if !s.ASDSchulform.startsWith('E')}
-          Fehlstunden: {_.toNumber(hj.SumFehlStd)}
-          {#if hj.SumFehlStdU > 0}
+          Fehlstunden: {Number(hj.SumFehlStd) || 0}
+          {#if Number(hj.SumFehlStdU) > 0}
             , davon unentschuldigt: {hj.SumFehlStdU}
-            <div class="voffset-1"></div>
+            <Voffset v="1"/>
           {/if}
         {/if}
-        <div class="voffset-1"></div>
+        <Voffset v="1"/>
         <b>{versetzungsvermerk(s,hj)}</b>
-        <div class="voffset-1"></div>
+        <Voffset v="1"/>
         <b>Bemerkungen</b><br />{bemerkungen(hj)}
       </div>
       <div class="footer">
@@ -44,14 +39,17 @@
           <div class="col-2">
             {schule.Ort}, den {datum(hj.ZeugnisDatum)}
           </div>
-          <div class="col text-center klein voffset-3">
+          <div class="col text-center klein">
+          <Voffset v="3"/>
             <hr />
             {schule.SchulleiterVorname} {schule.SchulleiterName} <br />{schule.schulleiter_in}
           </div>
-          <div class="col text-center klein voffset-3">
+          <div class="col text-center klein">
+          <Voffset v="3"/>
             Siegel
           </div>
-          <div class="col text-center klein voffset-3">
+          <div class="col text-center klein">
+          <Voffset v="3"/>
             <hr />
             {hj.v_name_klassenlehrer}<br />{hj.klassenlehrer_in}
           </div>
@@ -59,10 +57,12 @@
         <div class="flex-grid">
           {#if !s.ASDSchulform.startsWith('E')}
             <div class="col-2"></div>
-            <div class="col-2 voffset-1">
+            <div class="col-2">
+              <Voffset v="1"/>
               Die Kenntnisnahme wird bestätigt:
             </div>
-            <div class="col voffset-3">
+            <div class="col">
+              <Voffset v="3"/>
               <hr />
               <div class="klein text-center">
                 {volljaehrigBei(s, hj.ZeugnisDatum) ? s.schueler_in : 'Erziehungsberechtigte'}
@@ -70,19 +70,7 @@
             </div>
           {/if}
         </div>
-        <div class="klein grau voffset-2">
-          <div class="schulnummer">
-            Schulnummer: {schule.SchulNr}
-          </div>
-          <hr class="hr-grau" />
-          <div class="grau" style="font-size: 1em">
-            Notenstufen gemäß § 48 SchulG: 1 = sehr gut, 2 = gut, 3 = befriedigend, 4 = ausreichend, 5 = mangelhaft, 6 = ungenügend
-            <div class="voffset-halb"></div>
-            Dem Zeugnis liegen zugrunde: Die Verordnung über die Ausbildung und Prüfung in den Bildungsgängen des Berufskollegs (Ausbildungs- und Prüfungsordnung Berufskolleg, APO-BK) vom 26. Mai 1999 (SGV. NRW. 223/BASS 13 – 33 Nr. 1.1).
-            <div class="voffset-halb"></div>
-            Rechtsbehelfsbelehrung: Gegen dieses Zeugnis kann innerhalb eines Monats nach Bekanntgabe des Zeugnisses Widerspruch eingelegt werden. Der Widerspruch ist beim Berufskolleg Bethel, Am Zionswald 12, 33617, Bielefeld, schriftlich oder zur Niederschrift zu erheben. <br>Falls die Frist durch das Verschulden einer/eines Bevollmächtigten versäumt wird, wird dies Verschulden der Widerspruchsführerin/dem Widerspruchsführer zugerechnet.
-          </div>
-        </div>
+        <Fussnote schulNr={schule.SchulNr}></Fussnote>
       </div>
     </div>
   {/each}
@@ -90,14 +78,17 @@
 
 <script>
   import { datum, versetzungsvermerk, volljaehrigBei, bemerkungen }  from './helfer'
-  const _ = R.lodash
-  import fkl from './fachklassen.json'
+  import fkl from './daten/fachklassen.json'
 
-	export default {
-    setup(Component) {Component.bez = 'Jahreszeugnis einseitig'},
-    components: {Noten: './partials/NotenE.html'},
-    data () { return {fkl: fkl} },
-    helpers: { datum, versetzungsvermerk, volljaehrigBei, bemerkungen, _ },
+  export default {
+    components: {
+      Seitenlogo: './partials/Seitenlogo.html',
+      Pageheader: './partials/Pageheader.html',
+      Noten: './partials/Noten.html',
+      Fussnote: './partials/Fussnoten.html',
+      Voffset: './partials/Voffset.html'
+    },
+    helpers: { fkl, datum, versetzungsvermerk, volljaehrigBei, bemerkungen, _ },
     computed: {
       aktHalbjahr: ({jahr, abschnitt}) => { return a => a.Jahr === jahr && a.Abschnitt === abschnitt }
     }
@@ -105,5 +96,5 @@
 </script>
 
 <style>
-  @import 'daten/main.css';
+  @import 'css/main.css';
 </style>

css/a3-landscape.css

@@ -0,0 +1,3 @@
+@page {
+  size: A3 landscape;
+}

css/a3-portrait.css

@@ -0,0 +1,3 @@
+@page {
+  size: A3 portrait;
+}

css/a4-landscape.css

@@ -0,0 +1,3 @@
+@page {
+  size: A4 landscape;
+}

css/a4-portrait.css

@@ -0,0 +1,3 @@
+@page {
+  size: A4 portrait;
+}

daten/main.css → css/main.css

@@ -2,27 +2,34 @@
 @import url(normalize.css);
 @font-face {
   font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-regular-webfont.woff") format("woff");
+  src: url("../daten/texgyreheros-regular-webfont.woff") format("woff");
   font-style: normal;
 }
 @font-face {
   font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-bold-webfont.woff") format("woff");
+  src: url("../daten/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");
+  src: url("../daten/texgyreheros-italic-webfont.woff") format("woff");
   font-style: italic;
 }
 @font-face {
   font-family: 'TeX Gyre Heros';
-  src: url("texgyreheros-bolditalic-webfont.woff") format("woff");
+  src: url("../daten/texgyreheros-bolditalic-webfont.woff") format("woff");
   font-style: italic;
   font-weight: bold;
 }
 
+@media screen {
+  .page {
+    border: 1px solid black;
+    box-shadow: 5px 5px 4px 0 silver;
+  }
+}
+
 @media print {
   * {
     -webkit-print-color-adjust: exact;
@@ -35,6 +42,25 @@
   }
 }
 
+@page {
+  margin: 0;
+  size: auto;
+}
+
+html {
+  font-size: 10pt;
+}
+
+.page {
+  line-height: 1.5;
+  font-weight: normal;
+  font-family: "Tex Gyre Heros";
+  color: #333;
+  position: relative;
+  padding: 10mm 25mm 10mm 25mm;
+  display: block;
+}
+
 /*
 Da *named pages*, also z.B. @page a3landscape noch nicht von Chrome
 unterstützt werden, gilt vorerst die Standard-Einstellung von A4 Portrait.
@@ -47,130 +73,99 @@ Link: https://www.w3.org/TR/css3-page/#using-named-pages
 */
 
 .page[size="A4"][orientation="portrait"] {
-  page: a4portrait;
+  /* page: a4portrait; */
   width: 210mm;
   height: 296.8mm;
 }
-@page a4portrait {
+/* @page a4portrait {
   margin: 0;
   size: A4 portrait;
-}
+} */
 
 .page[size="A4"][orientation="landscape"] {
-  page: a4landscape;
+  /* page: a4landscape; */
   width: 296.8mm;
   height: 210mm;
 }
-@page a4landscape {
+/* @page a4landscape {
   margin: 0;
   size: A4 landscape;
-}
+} */
 
 .page[size="A3"][orientation="portrait"] {
-  page: a3portrait;
+  /* page: a3portrait; */
   width: 296.8mm;
   height: 420mm;
 }
-@page a3portrait {
+/* @page a3portrait {
   margin: 0;
   size: A3 portrait;
-}
+} */
 
 .page[size="A3"][orientation="landscape"] {
-  page: a3landscape;
+  /* page: a3landscape; */
   width: 420mm;
   height: 296.8mm;
 }
-@page a3landscape {
+/* @page a3landscape {
   margin: 0;
   size: A3 landscape;
-}
+} */
 
 .page[size="A5"][orientation="portrait"] {
-  page: a5portrait;
+  /* page: a5portrait; */
   width: 148mm;
   height: 210mm;
 }
-@page a5portrait {
+/* @page a5portrait {
   margin: 0;
   size: A5 portrait;
-}
+} */
 
 .page[size="A5"][orientation="landscape"] {
-  page: a5landscape;
+  /* page: a5landscape; */
   width: 210mm;
   height: 148mm;
 }
-@page a5landscape {
+/* @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%;
-}
-
-.page {
-  font-size: 1.2em;
-  line-height: 1.5;
-  font-weight: normal;
-  font-family: "Tex Gyre Heros";
-  color: #333;
-  position: relative;
-  padding: 10mm 25mm 10mm 25mm;
-  display: block;
-}
+} */
 
 /* Typography */
 h1, h2, h3, h4, h5, h6 {
+  font-weight: 300;
+  letter-spacing: -.1rem;
+  margin-bottom: 2.0rem;
   margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 400;
 }
-
 h1 {
-  font-size: 4.0em;
+  font-size: 4.6rem;
   line-height: 1.2;
-  letter-spacing: -.1em;
 }
-
 h2 {
-  font-size: 3.6em;
+  font-size: 3.6rem;
   line-height: 1.25;
-  letter-spacing: -.1em;
 }
-
 h3 {
-  font-size: 3.0em;
+  font-size: 2.8rem;
   line-height: 1.3;
-  letter-spacing: -.1em;
 }
-
 h4 {
-  font-size: 2.4em;
+  font-size: 2.2rem;
+  letter-spacing: -.08rem;
   line-height: 1.35;
-  letter-spacing: -.08em;
 }
-
 h5 {
-  font-size: 1.8em;
+  font-size: 1.8rem;
+  letter-spacing: -.05rem;
   line-height: 1.5;
-  letter-spacing: -.05em;
 }
-
 h6 {
-  font-size: 1.5em;
-  line-height: 1.6;
+  font-size: 1.6rem;
   letter-spacing: 0;
+  line-height: 1.4;
 }
-
 p {
   margin-top: 0;
 }
@@ -246,90 +241,6 @@ p {
   flex: 2;
 }
 
-.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;
 }
@@ -341,85 +252,20 @@ hr {
   height: 1px;
   margin: 3px 0;
 }
-.hr-rot {
-  border-color: #ff2700;
-  margin: 8px 0;
-}
 .hr-grau {
   border-color: #646464 !important;
 }
 
-.table-eng {
-  margin-bottom: 0 !important;
-}
-
-.table-noten {
-  width: 100%;
-  border: none;
-  border-collapse: collapse;
-  margin-bottom: 1em;
-}
-
-.table-bordered {
-  border-collapse: collapse;
-}
-.table-bordered tr {
-  border-bottom: thin solid #333;
-}
-
-.fach-bezeichnung {
-  padding-left: 10mm;
-}
-.fach-bezeichnung.padding-5 {
-  padding-left: 2em;
-}
-
-.td-fach-note {
-  padding-bottom: .2em;
-  padding-top: .2em;
-  width: 12em;
-}
-.td-fach-note span {
-  background-color: #dcdcdc !important;
-  text-align: center;
-  width: 10em;
-  display: block;
-  vertical-align: middle;
-  margin: 0 auto;
-}
-.td-fach-note span.e-note {
-  background-color: white !important;
-  width: 17em;
-  margin: 0;
-}
-
-.td-padding-extra {
-  padding: 2mm 0 2mm 0;
-}
-
-.fachgruppe-margin {
-  padding-top: 0.3em;
-}
-
 .fett {
   font-weight: bolder;
 }
 
-.lernfeld-lernbereich {
-  padding-left: 2em;
-  padding-bottom: 0;
-}
-
-.lernbereich {
-  padding-left: 20mm;
-}
-
 .klein {
-  font-size: smaller;
+  font-size: 0.7rem;
 }
 
 .eng {
-  line-height: 1.3em;
+ line-height: 0.9rem;
 }
 
 .grau * {
@@ -429,16 +275,16 @@ hr {
 ul.dashes {
   margin: 0;
   list-style-type: none;
-  padding-left: 1em;
+  padding-left: 1rem;
 }
 ul.dashes li:before {
   content: "-";
   position: absolute;
-  margin-left: -1em;
+  margin-left: -1rem;
 }
 
 .schulnummer {
-  text-align: right;
+  text-align: left;
 }
 
 .wasserzeichen {
@@ -447,21 +293,4 @@ ul.dashes li:before {
   z-index: 99;
   color: red;
   font-size: 96pt;
-}
-
-.seitenlogo {
-  position: absolute;
-  bottom: 10mm;
-  left: 10mm;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-table.fixed {
-  table-layout: fixed;
-}
-table.fixed table th, table.fixed table td {
-  overflow: hidden;
-}
+}

partials/Fussnoten.html

@@ -0,0 +1,20 @@
+<div class="klein eng">
+  <Voffset v="2"/>
+  <div class="schulnummer">
+    Schulnummer: {schulNr}
+  </div>
+  <hr class="hr-grau" />
+  <div class="grau">
+    Notenstufen gemäß § 48 SchulG: 1 = sehr gut, 2 = gut, 3 = befriedigend, 4 = ausreichend, 5 = mangelhaft, 6 = ungenügend
+    <Voffset v=".5"/>
+    Dem Zeugnis liegen zugrunde: Die Verordnung über die Ausbildung und Prüfung in den Bildungsgängen des Berufskollegs (Ausbildungs- und Prüfungsordnung Berufskolleg, APO-BK) vom 26. Mai 1999 (SGV. NRW. 223/BASS 13 – 33 Nr. 1.1).
+    <Voffset v=".5"/>
+    Rechtsbehelfsbelehrung: Gegen dieses Zeugnis kann innerhalb eines Monats nach Bekanntgabe des Zeugnisses Widerspruch eingelegt werden. Der Widerspruch ist beim Berufskolleg Bethel, Am Zionswald 12, 33617, Bielefeld, schriftlich oder zur Niederschrift zu erheben. <br>Falls die Frist durch das Verschulden einer/eines Bevollmächtigten versäumt wird, wird dies Verschulden der Widerspruchsführerin/dem Widerspruchsführer zugerechnet.
+  </div>
+</div>
+
+<script>
+  export default {
+    components: { Voffset: './Voffset.html' }
+  }
+</script>

partials/Noten.html

@@ -0,0 +1,90 @@
+<table class="table-noten">
+  {#each faechergruppen as [gruppen_id, gruppenFaecher]}
+    <tr>
+      <td class="fachgruppe-margin">
+        <b>{gruppenbezeichnung(gruppen_id)}</b>
+      </td>
+    </tr>
+    {#each lernbereicheUndFaecher(gruppenFaecher) as [lernbereich, faecher]}
+      {#if lernbereich != faecher[0].fach.Zeugnisbez}
+        <tr><td colspan="2" class="fach-bezeichnung">{lernbereich}</td></tr>
+      {/if}
+      {#each faecher as f (f.ID)}
+        <tr>
+          <td class="fach-bezeichnung {lernbereich != faecher[0].fach.Zeugnisbez ? 'lernfeld-lernbereich' : ''}">
+            {#if f.fach.Zeugnisbez.includes("Projekt")}
+              {f.Lernentw}
+            {:else}
+              {f.fach.Zeugnisbez}
+            {/if}
+          </td>
+          <td class="td-fach-note"><span>{f.NotenKrz || '–––––'}</span></td>
+        </tr>
+      {/each}
+    {/each}
+    <tr>
+    </tr>
+  {/each}
+</table>
+
+<script>
+  import { gruppenIds } from './gruppenIDs'
+  const _ = R.lodash
+
+  export default {
+    helpers: {
+      _,
+      gruppenbezeichnung: gruppe => gruppenIds[gruppe],
+      lernbereicheUndFaecher: gruppenFaecher => Object.entries(_.groupBy(gruppenFaecher, f => f.fach.Bezeichnung))
+    },
+    computed: {
+      faechergruppen: ({ noten }) => Object.entries(_.groupBy(_.sortBy(noten, f => f.fach.SortierungS2), f => f.fach.Fachgruppe_ID)),
+      // Berufsbezogen kommt neuerdings zuerst, dann berufsübergreifend
+      // wenn aber nur eine Note vermerkt ist, dann normal zurück
+      faechergruppenUmsortiert: ({ faechergruppen }) => faechergruppen.length > 1
+        ? [faechergruppen[0], faechergruppen[1]] = [faechergruppen[1], faechergruppen[0]]
+        : faechergruppen
+    }
+  }
+</script>
+<style>
+.table-noten {
+  width: 100%;
+  border: none;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+}
+.fach-bezeichnung {
+  padding-left: 10mm;
+}
+.td-fach-note {
+  padding-bottom: .2rem;
+  padding-top: .2rem;
+  width: 12rem;
+}
+.td-fach-note span {
+  background-color: #dcdcdc !important;
+  text-align: center;
+  width: 10rem;
+  display: block;
+  margin: 0 auto;
+}
+/*.td-fach-note span.e-note {
+  background-color: white !important;
+  width: 17rem;
+  margin: 0;
+}*/
+
+.fachgruppe-margin {
+  padding-top: 0.3rem;
+}
+
+.lernfeld-lernbereich {
+  padding-left: 20mm;
+  padding-bottom: 0;
+}
+
+.lernbereich {
+  padding-left: 20mm;
+}
+</style>

partials/NotenE.html

@@ -1,115 +0,0 @@
-<table class="table-noten">
-	{#each faechergruppen as [gruppen_id, gruppenFaecher]}
-    <tr>
-      <td class="fachgruppe-margin">
-				<b>{gruppenbezeichnung(gruppen_id)}</b>
-			</td>
-		</tr>
-		{#each lernbereicheUndFaecher(gruppenFaecher) as [lernbereich, faecher]}
-			{#if lernbereich != faecher[0].fach.Zeugnisbez}
-				<tr><td colspan="2">{lernbereich}</td></tr>
-			{/if}
-			{#each faecher as f (f.ID)}
-				<tr>
-					<td class="fach-bezeichnung {lernbereich != faecher[0].fach.Zeugnisbez ? 'lernfeld-lernbereich' : ''}">
-						{#if f.fach.Zeugnisbez.includes("Projekt")}
-							{f.Lernentw}
-						{:else}
-							{f.fach.Zeugnisbez}
-						{/if}
-					</td>
-					<td class="td-fach-note"><span>{f.NotenKrz || '---'}</span></td>
-				</tr>
-			{/each}
-		{/each}
-    <tr>
-		</tr>
-	{/each}
-</table>
-
-<script>
-  const _ = R.lodash
-
-  export default {
-		helpers: {
-      _,
-			gruppenbezeichnung: gruppe => gruppenIds[gruppe],
-			lernbereicheUndFaecher: gruppenFaecher => Object.entries(_.groupBy(gruppenFaecher, f => f.fach.Bezeichnung))
-		},
-    computed: {
-			faechergruppen: ({ noten }) => Object.entries(_.groupBy(_.sortBy(noten, f => f.fach.SortierungS2), f => f.fach.Fachgruppe_ID))
-		}
-  }
-let gruppenIds = {
-10:'Berufsübergreifender Bereich',
-11:'Aufgabenbereich I',
-20:'Berufsbezogener Bereich',
-21:'Aufgabenbereich II',
-25:'Berufsbezogener Bereich (Schwerpunkt)',
-30:'Differenzierungsbereich',
-31:'Aufgabenbereich III.1',
-32:'Aufgabenbereich III.2',
-33:'Aufgabenbereich III.3',
-40:'Berufspraktikum',
-60:'besondere Lernleistung',
-100:'Fremdsprachen',
-110:'Deutsch',
-200:'Naturwissenschaften',
-300:'Gesellschaftslehre',
-400:'Arbeitslehre',
-500:'Kunst und Musik',
-600:'Sport',
-700:'Mathematik',
-800:'Wahlpflichtbereich',
-900:'Religion',
-1000:'Zusätzliche Unterrichtsveranstaltungen',
-1100:'Angleichungskurse',
-1200:'Sprache',
-1300:'Sachunterricht',
-1400:'Förderunterricht',
-1500:'Vertiefungskurs',
-1600:'Projektkurs',
-1700:'Abschlussarbeit',
-1800:'Projektarbeit'
-	}
-</script>
-<style>
-.table-noten {
-  width: 100%;
-  border: none;
-  border-collapse: collapse;
-  margin-bottom: 1rem;
-}
-
-.td-fach-note {
-  padding-bottom: .2rem;
-  padding-top: .2rem;
-  width: 12rem;
-}
-.td-fach-note span {
-  background-color: #dcdcdc !important;
-  text-align: center;
-  width: 10rem;
-  display: block;
-  vertical-align: middle;
-  margin: 0 auto;
-}
-/*.td-fach-note span.e-note {
-  background-color: white !important;
-  width: 17rem;
-  margin: 0;
-}*/
-
-.fachgruppe-margin {
-  padding-top: 0.3rem;
-}
-
-.lernfeld-lernbereich {
-  padding-left: 2rem;
-  padding-bottom: 0;
-}
-
-.lernbereich {
-  padding-left: 20mm;
-}
-</style>

partials/NotenLF.html

@@ -0,0 +1,90 @@
+<table class="table-noten">
+  {#each faechergruppen as [gruppen_id, gruppenFaecher]}
+    <tr>
+      <td class="fachgruppe-margin">
+        <b>{gruppenbezeichnung(gruppen_id)}</b>
+      </td>
+    </tr>
+    {#each lernbereicheUndFaecher(gruppenFaecher) as [lernbereich, faecher]}
+      {#if lernbereich != faecher[0].fach.Zeugnisbez}
+        <tr><td colspan="2">{lernbereich}</td></tr>
+      {/if}
+      {#each faecher as f (f.ID)}
+        <tr>
+          <td class="{lernbereich != faecher[0].fach.Zeugnisbez ? 'lernfeld-lernbereich' : ''}">
+            {#if f.fach.Zeugnisbez.includes("Projekt")}
+              {f.Lernentw}
+            {:else}
+              {f.fach.Zeugnisbez}
+            {/if}
+          </td>
+          <td class="td-fach-note"><span>{f.NotenKrz || '–––––'}</span></td>
+        </tr>
+      {/each}
+    {/each}
+    <tr>
+    </tr>
+  {/each}
+</table>
+
+<script>
+  import { gruppenIds } from './gruppenIDs'
+  const _ = R.lodash
+
+  export default {
+    helpers: {
+      _,
+      gruppenbezeichnung: gruppe => gruppenIds[gruppe],
+      lernbereicheUndFaecher: gruppenFaecher => Object.entries(_.groupBy(gruppenFaecher, f => f.fach.Bezeichnung))
+    },
+    computed: {
+      faechergruppen: ({ noten }) => Object.entries(_.groupBy(_.sortBy(noten, f => f.fach.SortierungS2), f => f.fach.Fachgruppe_ID)),
+      // Berufsbezogen kommt neuerdings zuerst, dann berufsübergreifend
+      // wenn aber nur eine Note vermerkt ist, dann normal zurück
+      faechergruppenUmsortiert: ({ faechergruppen }) => faechergruppen.length > 1
+        ? [faechergruppen[0], faechergruppen[1]] = [faechergruppen[1], faechergruppen[0]]
+        : faechergruppen
+    }
+  }
+</script>
+<style>
+.table-noten {
+  width: 100%;
+  border: none;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+}
+.fach-bezeichnung {
+  padding-left: 10mm;
+}
+.td-fach-note {
+  padding-bottom: .2rem;
+  padding-top: .2rem;
+  width: 9rem;
+}
+.td-fach-note span {
+  background-color: #dcdcdc !important;
+  text-align: center;
+  width: 9rem;
+  display: block;
+  margin: 0 auto;
+}
+/*.td-fach-note span.e-note {
+  background-color: white !important;
+  width: 17rem;
+  margin: 0;
+}*/
+
+.fachgruppe-margin {
+  padding-top: 0.3rem;
+}
+
+.lernfeld-lernbereich {
+  padding-left: 2rem;
+  padding-bottom: 0;
+}
+
+.lernbereich {
+  padding-left: 20mm;
+}
+</style>

partials/Page.html

@@ -0,0 +1,5 @@
+<div class="page grid" orientation="portrait" size="A4"></div>
+<style>
+  @import 'daten/a4.css';
+  @import 'daten/portrait.css';
+</style>

partials/Pageheader.html

@@ -0,0 +1,11 @@
+<div class="header">
+  <img src="{logo}" style="width: -webkit-fill-available" alt="zeugnis_logo"/>
+  <hr class="hr-rot"/>
+</div>
+
+<style>
+  .hr-rot {
+    border-color: #ff2700;
+    margin: 8px 0;
+  }
+</style>

partials/Seitenlogo.html

@@ -0,0 +1,11 @@
+<div class="seitenlogo">
+  <img src="daten/traeger_logo.svg" height="160px" alt="traeger_logo"/>
+</div>
+
+<style>
+  .seitenlogo {
+    position: absolute;
+    bottom: 10mm;
+    left: 10mm;
+  }
+</style>

partials/Voffset.html

@@ -0,0 +1 @@
+<div style="margin-top: {v}em"></div>

partials/gruppenIDs.js

@@ -0,0 +1,32 @@
+export const gruppenIds = {
+    10:'Berufsübergreifender Bereich',
+    11:'Aufgabenbereich I',
+    20:'Berufsbezogener Bereich',
+    21:'Aufgabenbereich II',
+    25:'Berufsbezogener Bereich (Schwerpunkt)',
+    30:'Differenzierungsbereich',
+    31:'Aufgabenbereich III.1',
+    32:'Aufgabenbereich III.2',
+    33:'Aufgabenbereich III.3',
+    40:'Berufspraktikum',
+    60:'besondere Lernleistung',
+    100:'Fremdsprachen',
+    110:'Deutsch',
+    200:'Naturwissenschaften',
+    300:'Gesellschaftslehre',
+    400:'Arbeitslehre',
+    500:'Kunst und Musik',
+    600:'Sport',
+    700:'Mathematik',
+    800:'Wahlpflichtbereich',
+    900:'Religion',
+    1000:'Zusätzliche Unterrichtsveranstaltungen',
+    1100:'Angleichungskurse',
+    1200:'Sprache',
+    1300:'Sachunterricht',
+    1400:'Förderunterricht',
+    1500:'Vertiefungskurs',
+    1600:'Projektkurs',
+    1700:'Abschlussarbeit',
+    1800:'Projektarbeit'
+}