Feature pdf export

package.json

@@ -13,7 +13,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^3.0.0-4",
-    "bulma": "^0.9.3",
+    "bulma": "^0.9.4",
     "core-js": "^3.6.5",
     "d3": "^7.0.0",
     "vue": "^3.0.0",

src/components/SideMenu.vue

@@ -74,6 +74,14 @@
           <span>Kennzahlen exportieren</span>
         </button>
 
+        <a href="/#/Pdf" target="_blank" class="button">
+          <!-- Button richtig stylen-->
+          <span class="icon">
+            <font-awesome-icon icon="file-pdf" />
+          </span>
+          <span>PDF erstellen</span>
+        </a>
+
         <p><br /></p>
 
         <button class="button" @click="showStatistics">
@@ -84,12 +92,14 @@
         </button>
       </div>
 
-      <a href="http://www.easynwk.com/" target="_blank">Über die easyNWK</a>
-      <a href="https://github.com/fhstp/easynwk-web" target="_blank"
-        >Source Code (Version {{ appVersion }})</a
-      >
-      <a href="http://www.easynwk.com/impressum/">Impressum</a>
-      <img src="fhstp_sw_pos.png" width="80" height="80" />
+      <div class="links">
+        <a href="http://www.easynwk.com/" target="_blank">Über die easyNWK</a>
+        <a href="https://github.com/fhstp/easynwk-web" target="_blank"
+          >Source Code (Version {{ appVersion }})</a
+        >
+        <a href="http://www.easynwk.com/impressum/">Impressum</a>
+        <img src="fhstp_sw_pos.png" width="80" height="80" />
+      </div>
     </div>
   </div>
 </template>
@@ -248,8 +258,8 @@ export default defineComponent({
   background-color: white;
 }
 
-#sidepanel a,
-#sidepanel img {
+#sidepanel .links a,
+#sidepanel .links img {
   padding: 8px 8px 8px 32px;
   text-decoration: none;
   color: #c1c1c1;
@@ -258,7 +268,7 @@ export default defineComponent({
 }
 
 /* When you mouse over the navigation links, change their color */
-#sidepanel a:hover {
+#sidepanel .links a:hover {
   color: #f1f1f1;
 }
 

src/main.ts

@@ -39,6 +39,8 @@ import {
   faTrashAlt,
   faInfoCircle,
   faCheck,
+  faFilePdf,
+  faArrowLeft,
   faInfo,
 } from "@fortawesome/free-solid-svg-icons";
 
@@ -71,6 +73,8 @@ library.add(
   faTrashAlt,
   faInfoCircle,
   faCheck,
+  faFilePdf,
+  faArrowLeft,
   faInfo
 );
 

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 import Home from "../views/Home.vue";
+import Pdf from "../views/Pdf.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -16,6 +17,11 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "about" */ "../views/About.vue"),
   },
+  {
+    path: "/pdf",
+    name: "Pdf",
+    component: Pdf,
+  },
 ];
 
 const router = createRouter({

src/views/Home.vue

@@ -126,7 +126,7 @@ export default defineComponent({
 
 #titlebar {
   font-size: 180%;
-  background: $fhstpblue; /* hsl(32, 100%, 50%); /* $light; */
+  background: $fhstpblue; /* #005096; /* $light; */
   color: white;
   padding: 1vmin 1vmin 0.3rem 1vmin;
   margin: 0.5rem 1px 0 1px;

src/views/Pdf.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="page">
+    <div id="printinfo">
+      <div class="buttons">
+        <button class="button" @click="createPdf">
+          <span class="icon">
+            <font-awesome-icon icon="file-pdf" />
+          </span>
+          <span>Drucken bzw. als PDF drucken</span>
+        </button>
+
+        <button class="button" onclick="window.close()">
+          <span class="icon">
+            <font-awesome-icon icon="arrow-left" />
+          </span>
+          <span>Schließen & zur easyNWK zurückkehren</span>
+        </button>
+      </div>
+      <p>
+        Wenn Sie eine PDF Datei dieser Ansicht erzeugen, indem Sie im
+        Druckdialog "Als PDF speichern" auswählen.
+      </p>
+      <p>
+        Sie können die Daten der Kontakte auch markieren, kopieren und in einem
+        Textverarbeitungsprogramm einfügen.
+      </p>
+    </div>
+
+    <div id="print">
+      <div id="titlebar">
+        <div id="brand"><i>easy</i>NWK</div>
+      </div>
+      <div id="egobar">
+        <p class="name">{{ "Ankerperson: " + ego.name }}</p>
+        <p>{{ ego.currentGender ? "Geschlecht: " + ego.currentGender : "" }}</p>
+        <p>{{ ego.age.length >= 1 ? "Alter: " + ego.age : "" }}</p>
+        <p>{{ ego.note.length >= 1 ? "Notiz: " + ego.note : "" }}</p>
+      </div>
+      <div class="columns">
+        <div class="column">
+          <p class="panel-heading">Kontakte</p>
+          <div
+            v-for="(alter, index) in alteri"
+            v-bind:key="index"
+            class="panel-block"
+          >
+            <p class="name">{{ alter.name }}</p>
+            <p>{{ alter.role }}</p>
+            <p>{{ alter.age.length >= 1 ? "Alter: " + alter.age : "" }}</p>
+            <p>{{ alter.human ? "" : "Mensch: Nein" }}</p>
+            <p>
+              {{
+                alter.human
+                  ? "Geschlecht: " + alter.currentGender
+                  : "Kategorie: " + alter.currentGender
+              }}
+            </p>
+            <p>{{ alter.deceased ? "Verstorben: Ja" : "" }}</p>
+            <p>
+              Beziehung:
+              {{
+                alter.edgeType == 1
+                  ? "besteht"
+                  : alter.edgeType == 2
+                  ? "multiplex"
+                  : "keine aktuelle Beziehung"
+              }}
+            </p>
+            <p>{{ alter.note.length >= 1 ? "Notiz: " + alter.note : "" }}</p>
+          </div>
+        </div>
+      </div>
+      <NetworkMap />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import NetworkMap from "@/components/NetworkMap.vue";
+import { useStore } from "@/store";
+import { defineComponent, computed, onMounted } from "vue";
+
+export default defineComponent({
+  name: "Pdf",
+  components: { NetworkMap },
+  setup() {
+    const store = useStore();
+    // knows list of Alter from vuex
+    const alteri = computed(() => store.state.nwk.alteri);
+    const ego = computed(() => store.state.nwk.ego);
+
+    const createPdf = () => {
+      window.print();
+    };
+
+    onMounted(() => {
+      // the print dialog will open immediately
+      createPdf();
+    });
+
+    return {
+      alteri,
+      ego,
+      createPdf,
+    };
+  },
+});
+</script>
+
+<style scoped>
+* {
+  filter: grayscale(1) !important;
+}
+.name {
+  font-weight: bold;
+}
+.panel-block {
+  display: flex;
+  background: none;
+  flex-direction: column;
+  align-items: baseline;
+}
+#brand {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+#egobar {
+  font-size: 1rem;
+  padding: 0.5rem 1vmin 1vmin 1vmin;
+  margin: 0 1px 1rem 1px;
+  border-radius: 0 0 6px 6px;
+  background: none;
+}
+
+#titlebar {
+  font-size: 180%;
+  color: gray;
+  padding: 1vmin 1vmin 0.3rem 1vmin;
+  margin: 0.5rem 1px 0 1px;
+  border-radius: 6px 6px 0 0;
+  flex-shrink: 0;
+
+  flex-direction: row;
+  flex-wrap: nowrap;
+  display: flex;
+  background: none;
+}
+.page {
+  margin: 2em 4em 2em;
+}
+@media print {
+  #printinfo {
+    display: none;
+  }
+}
+</style>