pipeline and improvements

public/src/App.vue

@@ -4,6 +4,7 @@ import HelloWorld from './components/HelloWorld.vue'
 import LoginPanel from "@/components/LoginPanel.vue";
 import {onMounted, ref} from "vue";
 import {Auth} from "@/services/auth";
+import DialogHost from "@/components/dialog/DialogHost.vue";
 
 let showPopup = ref(false)
 let loggedIn = ref(false)
@@ -16,6 +17,10 @@ function logout(){
     Auth.logout()
 }
 
+function print(){
+    window.print()
+}
+
 onMounted(() => {
     Auth.checkForToken()
 })
@@ -23,11 +28,12 @@ onMounted(() => {
 </script>
 
 <template>
-    <nav>
+    <nav class="no-print">
         <div class="left">
-            Miniplan
+            Miniplan App
         </div>
         <div class="right">
+            <button class="flat" @click="print"><i>print</i>Drucken</button>
             <button v-if="!loggedIn" class="flat" @click="showPopup = true"><i>login</i> Einloggen</button>
             <button v-if="loggedIn" class="flat" @click="logout"><i>logout</i> Abmelden</button>
         </div>
@@ -37,6 +43,8 @@ onMounted(() => {
     <div class="popup-container" :class="{show: showPopup}" @click.self="showPopup = false">
         <LoginPanel :active="showPopup" @success="showPopup = false"/>
     </div>
+
+    <DialogHost/>
 </template>
 
 <style scoped lang="less">
@@ -54,6 +62,9 @@ nav {
     .right {
         flex-shrink: 0;
     }
+    @media print{
+        display: none;
+    }
 }
 
 .popup-container {
@@ -75,13 +86,16 @@ nav {
         pointer-events: none;
     }
 
-    &.show{
+    &.show {
         pointer-events: auto;
+
         * {
             pointer-events: auto;
         }
+
         opacity: 1;
     }
 }
 
+
 </style>