From 02205e304dfcddf7222678191efcc14c2398f8f1 Mon Sep 17 00:00:00 2001
From: Will Dower <wdower@mitre.org>
Date: Fri, 23 Jul 2021 18:06:43 -0400
Subject: [PATCH] exploration of printing button on the pages to strip the css
 and print text on pages

Signed-off-by: Will Dower <wdower@mitre.org>
---
 package-lock.json                   |  5 +++++
 package.json                        |  1 +
 src/components/FAQ/faqInfo.vue      | 12 ++++++++++++
 src/components/core/PrintButton.vue | 22 ++++++++++++++++++++++
 src/components/core/Toolbar.vue     |  3 +++
 src/components/home/homeScreen.vue  |  2 +-
 src/main.js                         | 12 +++++++++++-
 src/views/Faq.vue                   |  2 +-
 src/views/GettingStarted.vue        |  2 +-
 src/views/Home.vue                  |  4 ++--
 src/views/Implementation.vue        |  2 +-
 src/views/News.vue                  |  2 +-
 src/views/Normalize.vue             |  2 +-
 src/views/Training.vue              |  2 +-
 src/views/Validation.vue            |  2 +-
 15 files changed, 64 insertions(+), 11 deletions(-)
 create mode 100644 src/components/core/PrintButton.vue

diff --git a/package-lock.json b/package-lock.json
index 8f73b9e6..d495a52e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13004,6 +13004,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-html-to-paper": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/vue-html-to-paper/-/vue-html-to-paper-1.4.3.tgz",
+      "integrity": "sha512-h5SjbFnqEXv7F0Cq1k9IPljDaARR/z9PqirqmnebDNh0wrM2nbVAuOeEMdhnPCRHTy8XJbflAdG3J21o7y8X/g=="
+    },
     "vue-loader": {
       "version": "15.9.7",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.7.tgz",
diff --git a/package.json b/package.json
index 98d3a712..313f20ef 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.12",
     "vue-cheetah-grid": "^0.22.3",
+    "vue-html-to-paper": "^1.4.3",
     "vue-prism-component": "^1.2.0",
     "vue-router": "^3.1.6",
     "vuetify": "^2.2.21",
diff --git a/src/components/FAQ/faqInfo.vue b/src/components/FAQ/faqInfo.vue
index 4cb9a336..6b4753f1 100644
--- a/src/components/FAQ/faqInfo.vue
+++ b/src/components/FAQ/faqInfo.vue
@@ -1,5 +1,6 @@
 <template>
   <v-container fluid>
+  <v-btn @click="expandAll">Expand All</v-btn>
     <v-expansion-panels focusable hover tile multiple v-model="panel">
       <v-expansion-panel v-for="(faq, index) in faqs" :key="index">
         <v-expansion-panel-header class="" style="font-weight: 300; font-size:120% ">
@@ -77,6 +78,12 @@ export default {
       }
     }
   },
+  mounted() {
+    Event.$on('printPrep', () => {
+      this.panel = [1,2,3]
+      console.log(this.panel)
+    })
+  },
   methods : {
     lookupOrder(name) {
       var i;
@@ -86,6 +93,11 @@ export default {
           return i;
         }
       }
+    },
+    expandAll() {
+      console.log(this.faqs.length)
+      this.panel = [1,2,3,4,5,6]//Array(this.faqs.length)
+      console.log(this.panel)
     }
   }
 };
diff --git a/src/components/core/PrintButton.vue b/src/components/core/PrintButton.vue
new file mode 100644
index 00000000..d73482c6
--- /dev/null
+++ b/src/components/core/PrintButton.vue
@@ -0,0 +1,22 @@
+<template>
+    <v-btn outlined @click="print"><slot></slot></v-btn>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      output: null
+    }
+  },
+  props: {
+      printId: String,
+  },
+  methods: {
+    async print () {
+      Event.$emit('printPrep')
+      await this.$htmlToPaper(this.printId);
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/core/Toolbar.vue b/src/components/core/Toolbar.vue
index aa893bfc..be355b44 100644
--- a/src/components/core/Toolbar.vue
+++ b/src/components/core/Toolbar.vue
@@ -39,6 +39,7 @@
       @click="onClick($event, link)"
     >{{ link.text }}</v-btn>
     <!--<PushNotification />-->
+    <PrintButton :printId="this.$route.name">Print Page</PrintButton>
     <v-btn icon v-on:click="darkMode" class="ml-2">
       <v-icon v-if="this.$vuetify.theme.dark">mdi-brightness-7</v-icon>
       <v-icon v-else>mdi-brightness-4</v-icon>
@@ -49,6 +50,7 @@
 <script>
 import communityData from "@/assets/data/communityData.json";
 import feedbackModal from "@/components/core/FeedbackModal.vue";
+import PrintButton from "@/components/core/PrintButton.vue"
 // import PushNotification from "@/components/core/PushNotifications";
 import { mapMutations, mapGetters } from "vuex";
 export default {
@@ -59,6 +61,7 @@ export default {
   },
   components: {
     feedbackModal: feedbackModal,
+    PrintButton: PrintButton
   },
   computed: {
     metalinks() {
diff --git a/src/components/home/homeScreen.vue b/src/components/home/homeScreen.vue
index 5ac666b2..e8a6eae5 100644
--- a/src/components/home/homeScreen.vue
+++ b/src/components/home/homeScreen.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="py-0">
+  <v-container fluid class="py-0" id="homepage-template">
     <v-row align="center">
       <!-- <v-col md="3" sm="5">
         <v-img
diff --git a/src/main.js b/src/main.js
index 51607cb7..ae52523b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,21 +10,31 @@ import "./style.css";
 // import firebase from "@/firebase";
 import cssVars from "css-vars-ponyfill";
 import Prism from 'prismjs';
+import VueHtmlToPaper from 'vue-html-to-paper';
 Prism.highlightAll();
 
 cssVars({
   watch: true,
 });
 
+// const printOptions = {
+//   "styles": [
+//     // "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
+//     // "https://unpkg.com/kidlat-css/css/kidlat.css",
+//     "src/style.css"
+//   ]
+// }
+
 IntersectionObserver.prototype.POLL_INTERVAL = 100; // time in ms
 
 Vue.config.productionTip = false;
 
 // firebase.auth.onAuthStateChanged(() => {
-  new Vue({
+  window.Event = new Vue({
     router,
     store,
     vuetify,
     render: h => h(App)
   }).$mount("#app");
+  Vue.use(VueHtmlToPaper);
 // });
diff --git a/src/views/Faq.vue b/src/views/Faq.vue
index 6c720764..6dd9b67d 100644
--- a/src/views/Faq.vue
+++ b/src/views/Faq.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0">
         <Header>
diff --git a/src/views/GettingStarted.vue b/src/views/GettingStarted.vue
index dd9f23ea..0cf10251 100644
--- a/src/views/GettingStarted.vue
+++ b/src/views/GettingStarted.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0">
         <Header>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 725e219b..bda6e3d8 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10">
         <homeStartScreen class="mb-4" />
@@ -118,7 +118,7 @@
     components: {
       homeStartScreen,
       whatwedo,
-      wwdBasicCard,
+      wwdBasicCard
       //aboutCommunity,
       //events,
       //featureEvents,
diff --git a/src/views/Implementation.vue b/src/views/Implementation.vue
index 95df6aa6..b4048cd3 100644
--- a/src/views/Implementation.vue
+++ b/src/views/Implementation.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0 ma-0">
         <Header>
diff --git a/src/views/News.vue b/src/views/News.vue
index 109907c3..2f48f678 100644
--- a/src/views/News.vue
+++ b/src/views/News.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0">
         <Header>
diff --git a/src/views/Normalize.vue b/src/views/Normalize.vue
index b798823a..a8abe505 100644
--- a/src/views/Normalize.vue
+++ b/src/views/Normalize.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0 ma-0">
         <Header>
diff --git a/src/views/Training.vue b/src/views/Training.vue
index 4b3772bb..8c8b3f58 100644
--- a/src/views/Training.vue
+++ b/src/views/Training.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0">
         <Header>
diff --git a/src/views/Validation.vue b/src/views/Validation.vue
index aab8bd14..75806289 100644
--- a/src/views/Validation.vue
+++ b/src/views/Validation.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid class="pa-0 ma-0">
+  <v-container fluid class="pa-0 ma-0" :id="this.$route.name">
     <v-row justify="center" align="center" class="mx-0">
       <v-col cols="12" lg="10" class="pa-0 ma-0">
         <Header>