Print onlytext

src/components/PersonInfo.vue

@@ -50,7 +50,7 @@ export default {
 
 <style scoped>
 .personInfo {
-  position: fixed;
+
   padding-left: 1vw;
   padding-top: 0.5vh;
   font-weight: normal;

src/components/PrintView.vue

@@ -0,0 +1,258 @@
+<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 & zu easyBiograph zurückkehren</span>
+        </button>
+      </div>
+    </div>
+
+    <div id="print">
+      <div id="titlebar">
+        <div id="brand"><i>easy</i>Biograph</div>
+      </div>
+      <div id="egobar">
+        <p class="name">{{ "Name: "  + person.name}} </p>
+        <p>{{ "Geburtsdatum: " + formatDate(person.birthDate) }}</p>
+        <p>{{ "Zeitbalken bis: " + formatDate(person.endDate) }}</p>
+        <p>{{ "Erstellt am: " + formatDate(person.creationDate) }}</p>
+        <p v-if="person.birthplace.length > 0">{{ "Geburtort: " + person.birthplace }}</p>
+        <p v-if="person.interviewers.length > 0">{{ "Ersteller*in: " + person.interviewers }}</p>
+        <p v-if="person.notes.length > 0">{{ "Notizen: " + person.notes }}</p>
+      </div>
+
+      <!-- Hochformat -->
+      <div class="rows">
+        <div class="row" v-for="dimension in sortedDimensions">
+          <p class="panel-heading">{{ dimension.title }}</p>
+          <div class="panel-block" v-for="event in filteredEvents(dimension)" :key="event.id" >
+            <p class="name"> {{ event.description }}</p>
+            <div class="date-row">
+              <p>{{ formatDate(event.startDate) }} </p>
+              <p v-if="!event.isOpenEnd && event.startDate != event.endDate">{{ "bis " + formatDate(event.endDate) }}</p>
+              <p v-if="event.isOpenEnd">{{ "bis offenes Ende" }}</p>
+            </div>
+            <p>{{ event.notes }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Querformat auf 4 Seiten
+      <div class="timegraph-container">
+        <div class="timegraph-page">
+          <TimePane :is-black-mode="true" :page="1" />
+        </div>
+        <div class="timegraph-page">
+          <TimePane :is-black-mode="true" :page="2" />
+        </div>
+      </div>
+      -->
+
+    </div>
+  </div>
+</template>
+
+<script>
+import TimePane from "./TimePane.vue";
+import { store, useStore } from "@/store";
+import { computed, onMounted } from "vue";
+
+export default {
+  name: 'PrintView',
+  components: {
+    TimePane
+  },
+  setup: function () {
+    const store = useStore();
+    const person = computed(() => store.state.data.person);
+    const dimensions = computed(() => store.state.data.dimensions);
+    const events = computed(() => store.state.data.events);
+
+    const createPdf = () => {
+      const today = new Date();
+      (document.title =
+          store.state.data.person.name +
+          " " +
+          today.toLocaleDateString("en-CA") +
+          ".pdf"),
+          window.print();
+    };
+
+    onMounted(() => {
+      createPdf();
+    });
+    return {
+      person,
+      dimensions,
+      createPdf,
+      events
+    }
+  },
+  data() {
+    return {
+      timeRanges: []
+    };
+  },
+  methods: {
+    calculateTimeRanges() {
+      const birthYear = new Date(store.state.data.person.birthDate).getFullYear();
+      const endYear = new Date(store.state.data.person.endDate).getFullYear();
+      const timeRanges = [];
+
+      for (let year = birthYear; year <= endYear; year += 25) {
+        timeRanges.push({
+          startYear: year,
+          endYear: Math.min(year + 24, endYear)
+        });
+      }
+
+      this.timeRanges = timeRanges;
+    },
+
+    filteredEvents(dimension) {
+      return this.events.filter(event => event.dimensionId === dimension.id);
+    },
+    formatDate(date) {
+      if (date.length > 7) {
+        return new Date(date).toLocaleDateString("de-DE", {
+          day: 'numeric',
+          month: 'short',
+          year: 'numeric'
+        });
+      } else {
+        return new Date(date).toLocaleDateString("de-DE", {
+          month: 'short',
+          year: 'numeric'
+        });
+      }
+    },
+
+  },
+  created() {
+    this.calculateTimeRanges();
+  },
+  computed: {
+    sortedDimensions() {
+      return [...this.$store.state.data.dimensions].sort((a, b) => a.id - b.id);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/assets/main.scss";
+
+.name {
+  font-weight: bold;
+}
+.panel-heading {
+  margin-top: 2em;
+  border: 1px solid black;
+}
+.panel-block {
+  display: flex;
+  background: none;
+  flex-direction: column;
+  align-items: baseline;
+  border: 1px solid black
+}
+.date-row {
+  display: flex;
+  gap: 5px;
+}
+#brand {
+  margin: 0 0;
+  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: $text;
+  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-left: 4em;
+  padding: 2em 0em 0em;
+}
+.rows {
+  margin-right: 4em;
+}
+
+@media screen and (min-width: 133vh) {
+  .page {
+    display: flex;
+    flex-direction: column;
+    height: 100vmin;
+  }
+  #print {
+    flex-grow: 1;
+    overflow-y: auto;
+    overflow-x: none;
+    max-height: 100vh;
+  }
+}
+
+@media print {
+  #printinfo {
+    display: none;
+  }
+
+  @page {
+    size: A4 portrait;
+    margin: 0;
+  }
+
+  .timegraph-container {
+    page-break-before: always;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .timegraph-page {
+    page-break-after: always;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @page timegraph {
+    size: A4 landscape;
+  }
+
+  .timegraph-page {
+    page: timegraph;
+    margin: 0;
+    transform: none;
+  }
+}
+
+</style>

src/components/TimeGraph.vue

@@ -157,7 +157,17 @@
           </span>
               <span>{{ t("edittimebar") }}</span>
             </a>
+
+            <a class="button navbar-item out-nav" @click="openPrintView">
+              <span class="icon">
+                <font-awesome-icon icon="print" />
+              </span>
+              <span>Drucken</span>
+            </a>
+            <br>
+
 
+
             <a class="button navbar-item out-nav" @click="openHelpPopUp()">
           <span class="icon">
             <font-awesome-icon icon="question" />
@@ -427,6 +437,10 @@ export default {
     },
   },
   methods: {
+    openPrintView() {
+      const printViewUrl = `${window.location.origin}/print-view`;
+      window.open(printViewUrl, '_blank');
+    },
     moveZoomLeft() {
       const zoomStartDate = new Date(store.state.data.zoom.birthDate);
       const zoomEndDate = new Date(store.state.data.zoom.endDate);

src/main.ts

@@ -62,6 +62,9 @@ import {
   faQuestion,
   faPaintRoller,
   faTimes,
+  faPrint,
+  faFilePdf,
+  faArrowLeft,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -111,7 +114,10 @@ library.add(
   faMagnifyingGlassPlus,
   faQuestion,
   faPaintRoller,
-  faTimes
+  faTimes,
+  faPrint,
+  faFilePdf,
+  faArrowLeft,
 );
 
 app.component("font-awesome-icon", FontAwesomeIcon);

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import PersonDialogue from "@/components/PersonDialogue.vue";
 import TimeGraph from "@/components/TimeGraph.vue";
+import PrintView from "@/components/PrintView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -19,6 +20,11 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: PersonDialogue,
     },
+    {
+      path: "/print-view",
+      name: "PrintView",
+      component: PrintView,
+    },
   ],
 });