From c13f9e651f8dd663d4add1de108555dc52095191 Mon Sep 17 00:00:00 2001 From: julia221501 Date: Mon, 10 Jun 2024 20:41:46 +0200 Subject: [PATCH 1/4] Druckansicht gestartet --- src/components/PrintView.vue | 59 ++++++++++++++++++++++++++++++++++++ src/components/TimeGraph.vue | 13 +++++++- src/main.ts | 4 ++- src/router/index.ts | 6 ++++ 4 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 src/components/PrintView.vue diff --git a/src/components/PrintView.vue b/src/components/PrintView.vue new file mode 100644 index 0000000..72bf3d3 --- /dev/null +++ b/src/components/PrintView.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/src/components/TimeGraph.vue b/src/components/TimeGraph.vue index 845de4b..6b7f9cf 100644 --- a/src/components/TimeGraph.vue +++ b/src/components/TimeGraph.vue @@ -162,6 +162,13 @@ Kontrast + + + + + + Drucken +
@@ -270,8 +277,8 @@ import EventDisplay from "@/components/EventDisplay.vue"; // import TimeTable from "@/components/TimeTable.vue"; import TimePane from "@/components/TimePane.vue"; import { initEvent, type ZBEvent } from "@/data/ZBEvent"; -import router from "@/router"; import HelpDialogue from "@/components/HelpDialogue.vue"; +import router from '@/router'; export default { name: "TimeGraph", @@ -362,6 +369,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); diff --git a/src/main.ts b/src/main.ts index ed1149c..440e8d0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -61,6 +61,7 @@ import { faQuestion, faPaintRoller, faTimes, + faPrint, } from "@fortawesome/free-solid-svg-icons"; library.add( @@ -109,7 +110,8 @@ library.add( faMagnifyingGlassPlus, faQuestion, faPaintRoller, - faTimes + faTimes, + faPrint ); app.component("font-awesome-icon", FontAwesomeIcon); diff --git a/src/router/index.ts b/src/router/index.ts index b9b20f7..60bfa1e 100644 --- a/src/router/index.ts +++ b/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, + }, ], }); From 7275067da50c6061ee584ddd7e5bb9291ab12690 Mon Sep 17 00:00:00 2001 From: julia221501 Date: Thu, 20 Jun 2024 13:26:24 +0200 Subject: [PATCH 2/4] =?UTF-8?q?Weiterf=C3=BChrung=20der=20Druckansicht?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimeGraph.vue | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/TimeGraph.vue b/src/components/TimeGraph.vue index bf5440b..518e563 100644 --- a/src/components/TimeGraph.vue +++ b/src/components/TimeGraph.vue @@ -68,6 +68,7 @@ @@ -162,6 +163,13 @@ Kontrast + + + + + Drucken + +
@@ -306,8 +314,8 @@ export default { }, computed: { greyBarWidth(): any { - const zoomStartDate = store.state.data.zoom.birthDate; - const zoomEndDate = store.state.data.zoom.endDate; + const zoomStartDate = store.state.data.zoom ? store.state.data.zoom.birthDate : ''; + const zoomEndDate = store.state.data.zoom ? store.state.data.zoom.endDate : ''; const personStartDate = store.state.data.person.birthDate; const personEndDate = store.state.data.person.endDate; //@ts-ignore @@ -317,7 +325,7 @@ export default { return (zoomDuration / totalPersonDuration) * 100 + '%'; }, greyBarLeft(): any { - const zoomStartDate = store.state.data.zoom.birthDate; + const zoomStartDate = store.state.data.zoom ? store.state.data.zoom.birthDate : ''; const personStartDate = store.state.data.person.birthDate; const personEndDate = store.state.data.person.endDate; @@ -329,8 +337,8 @@ export default { }, zoomedYears() { - const zoomStartDate = new Date(store.state.data.zoom.birthDate); - const zoomEndDate = new Date(store.state.data.zoom.endDate); + const zoomStartDate = new Date(store.state.data.zoom ? store.state.data.zoom.birthDate : ''); + const zoomEndDate = new Date(store.state.data.zoom ? store.state.data.zoom.endDate : ''); return zoomEndDate.getFullYear() - zoomStartDate.getFullYear() + 1; }, totalYears() { @@ -359,6 +367,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); From e2695fc49baab1560537928ed0b63a7ab414aebf Mon Sep 17 00:00:00 2001 From: Eliasboss2006 Date: Wed, 28 Aug 2024 11:34:52 +0200 Subject: [PATCH 3/4] ADD information and event --- src/components/PersonInfo.vue | 2 +- src/components/PrintView.vue | 192 ++++++++++++++++++++++++++++++---- src/main.ts | 6 +- 3 files changed, 180 insertions(+), 20 deletions(-) diff --git a/src/components/PersonInfo.vue b/src/components/PersonInfo.vue index 178e7c8..28d2cab 100644 --- a/src/components/PersonInfo.vue +++ b/src/components/PersonInfo.vue @@ -50,7 +50,7 @@ export default { diff --git a/src/main.ts b/src/main.ts index 5dd59da..d05c3c1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -63,6 +63,8 @@ import { faPaintRoller, faTimes, faPrint, + faFilePdf, + faArrowLeft, } from "@fortawesome/free-solid-svg-icons"; library.add( @@ -113,7 +115,9 @@ library.add( faQuestion, faPaintRoller, faTimes, - faPrint + faPrint, + faFilePdf, + faArrowLeft, ); app.component("font-awesome-icon", FontAwesomeIcon); From 4893395a219e3086dfcfaf3cf475a65d9b0fafb6 Mon Sep 17 00:00:00 2001 From: julia221501 Date: Fri, 20 Sep 2024 16:32:39 +0200 Subject: [PATCH 4/4] Pdf ohne Zeitbalken --- package-lock.json | 4 +- src/components/PrintView.vue | 111 ++++++++++++++++++++++++----------- 2 files changed, 79 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index f5a5e87..65a2589 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "easybiograph", - "version": "2.0.5-beta", + "version": "2.1.1-beta", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "easybiograph", - "version": "2.0.5-beta", + "version": "2.1.1-beta", "license": "MIT", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.2.0", diff --git a/src/components/PrintView.vue b/src/components/PrintView.vue index ed394ce..7da721d 100644 --- a/src/components/PrintView.vue +++ b/src/components/PrintView.vue @@ -18,37 +18,48 @@ -
-
-
easyBiograph
-
-
-

{{ "Name: " + person.name}}

-

{{ "Geburtsdatum: " + formatDate(person.birthDate) }}

-

{{ "Zeitbalken bis: " + formatDate(person.endDate) }}

-

{{ "Erstellt am: " + formatDate(person.creationDate) }}

-

{{ "Geburtort: " + person.birthplace }}

-

{{ "Ersteller*in: " + person.interviewers }}

-

{{ "Notizen: " + person.notes }}

-
-
-
-

{{ dimension.title }}

-
-

{{ event.description }}

-
-

{{ formatDate(event.startDate) }}

-

{{ "bis " + formatDate(event.endDate) }}

-

{{ "bis offenes Ende" }}

+
+
+
easyBiograph
+
+
+

{{ "Name: " + person.name}}

+

{{ "Geburtsdatum: " + formatDate(person.birthDate) }}

+

{{ "Zeitbalken bis: " + formatDate(person.endDate) }}

+

{{ "Erstellt am: " + formatDate(person.creationDate) }}

+

{{ "Geburtort: " + person.birthplace }}

+

{{ "Ersteller*in: " + person.interviewers }}

+

{{ "Notizen: " + person.notes }}

+
+ + +
+
+

{{ dimension.title }}

+
+

{{ event.description }}

+
+

{{ formatDate(event.startDate) }}

+

{{ "bis " + formatDate(event.endDate) }}

+

{{ "bis offenes Ende" }}

+
+

{{ event.notes }}

-

{{ event.notes }}

-
+
+
+ + +
-
- -
-
@@ -71,11 +82,11 @@ export default { const createPdf = () => { const today = new Date(); (document.title = - store.state.data.person.name + - " " + - today.toLocaleDateString("en-CA") + - ".pdf"), - window.print(); + store.state.data.person.name + + " " + + today.toLocaleDateString("en-CA") + + ".pdf"), + window.print(); }; onMounted(() => { @@ -157,7 +168,7 @@ export default { border: 1px solid black } .date-row { - display: flex; + display: flex; gap: 5px; } #brand { @@ -211,5 +222,37 @@ export default { #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; + } } +