Merge pull request #88 from Hoogkamer/dev1

update
Hoogkamer · Jul 7, 2023 · 1c11304 · 1c11304
2 parents 673f229 + 82a8e01
commit 1c11304
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 26 deletions.
diff --git a/components/FileMenu.vue b/components/FileMenu.vue
@@ -1,20 +1,21 @@
 <template lang='pug'>
-    .file(v-on:click='editMenuOpen = !editMenuOpen')
-      i.material-icons.screenshot(v-on:click="" title='Load/Save/Config') save
-      .file_menu(v-if='editMenuOpen')
-          ul
-            li
-              label.file_select(v-on:click="editMenuOpen=!editMenuOpen") Import excel
-                input(type="file" v-on:change="importData")
-            li(v-on:click="doExportXls") Export excel
-            li(v-on:click="generateInputFile") Generate inputfile
-            li(v-on:click="editConfig") Configure options
+.file(v-on:click='editMenuOpen = !editMenuOpen')
+  i.material-icons.screenshot(v-on:click="" title='Load/Save/Config') save
+  .file_menu(v-if='editMenuOpen')
+      ul
+        li
+          label.file_select(v-on:click="editMenuOpen=!editMenuOpen" @click="uploadfile") Import excel
+           // input(ref='fileinput1' type="file" @change="importData1")
+        li(v-on:click="doExportXls") Export excel
+        li(v-on:click="generateInputFile") Generate inputfile
+        li(v-on:click="editConfig") Configure options
 
 </template>
 
 <script>
 import XLSX from 'xlsx'
 import FileSaver from 'file-saver'
+import { fileOpen, directoryOpen, fileSave } from 'browser-fs-access'
 
 import { mapState, mapMutations, mapActions } from 'vuex'
 export default {
@@ -45,6 +46,17 @@ export default {
   },
   methods: {
     ...mapMutations(['setHideParents']),
+    uploadfile: function() {
+      fileOpen({
+        mimeTypes: [
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+          'application/vnd.ms-excel'
+        ]
+      }).then(blob => {
+        window.openBlob = blob
+        this.importData1(blob)
+      })
+    },
 
     editConfig: function() {
       this.$emit('editconfig', true)
@@ -109,8 +121,8 @@ export default {
         'File generated. \n Overwrite the data.js file (in the root folder) with this file.'
       )
     },
-    importData: function(infile) {
-      var f = infile.target.files[0]
+    importData1: function(f) {
+      console.log('** import data')
       var reader = new FileReader()
       var that = this
       reader.onload = function(e) {

diff --git a/components/OrgChart.vue b/components/OrgChart.vue
@@ -1,9 +1,9 @@
 <template lang='pug'>
-    #chart
-      .chart_container
-        show-dept(v-if="chart" :parent="chart" :level="1")
-        draw-lines(v-if="chart")
-        view-menu(v-if="showViewMenu")
+#chart
+  .chart_container
+    show-dept(v-if="chart" :parent="chart" :level="1")
+    draw-lines(v-if="chart")
+    view-menu(v-if="showViewMenu")
 </template>
 
 <script>

diff --git a/docs/200.html b/docs/200.html
@@ -1,9 +1,9 @@
 <!doctype html>
 <html>
   <head>
-    <meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Free Organization Chart generator and viewer"><meta data-n-head="1" data-hid="keywords" name="keywords" content="vuejs, nuxt, javascript, orgchart, organization, open-source"><meta data-n-head="1" name="google-site-verification" content="faMBWsCcw7RZQp1wVNh-Hgy7aQ8D2KMMNpwg0LKtsu4"><title>Organization chart</title><link data-n-head="1" rel="icon" type="image/x-icon" href="./favicon.ico"><script data-n-head="1" src="data.js"></script><script data-n-head="1" src="config.js"></script><script data-n-head="1" src="translate.js"></script><link rel="preload" href="./1f6a25f.js" as="script"><link rel="preload" href="./a865292.js" as="script"><link rel="preload" href="./a4a8b1b.js" as="script"><link rel="preload" href="./1b3c704.js" as="script">
+    <meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Free Organization Chart generator and viewer"><meta data-n-head="1" data-hid="keywords" name="keywords" content="vuejs, nuxt, javascript, orgchart, organization, open-source"><meta data-n-head="1" name="google-site-verification" content="faMBWsCcw7RZQp1wVNh-Hgy7aQ8D2KMMNpwg0LKtsu4"><title>Organization chart</title><link data-n-head="1" rel="icon" type="image/x-icon" href="./favicon.ico"><script data-n-head="1" src="data.js"></script><script data-n-head="1" src="config.js"></script><script data-n-head="1" src="translate.js"></script><link rel="preload" href="./e8cd43a.js" as="script"><link rel="preload" href="./a865292.js" as="script"><link rel="preload" href="./8e0b1c0.js" as="script"><link rel="preload" href="./1b3c704.js" as="script">
   </head>
   <body>
     <div id="__nuxt"><style>#__nuxt,body,html{background:#fff;width:100%;height:100%;display:flex;justify-content:center;align-items:center;margin:0;padding:0}.sk-circle{width:40px;height:40px;position:relative}.sk-circle .sk-child{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle .sk-child:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#05668d;border-radius:100%;-webkit-animation:sk-circleBounceDelay 1.2s infinite ease-in-out both;animation:sk-circleBounceDelay 1.2s infinite ease-in-out both}.sk-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleBounceDelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-circleBounceDelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}</style> <div class="sk-circle"> <div class="sk-circle1 sk-child"></div> <div class="sk-circle2 sk-child"></div> <div class="sk-circle3 sk-child"></div> <div class="sk-circle4 sk-child"></div> <div class="sk-circle5 sk-child"></div> <div class="sk-circle6 sk-child"></div> <div class="sk-circle7 sk-child"></div> <div class="sk-circle8 sk-child"></div> <div class="sk-circle9 sk-child"></div> <div class="sk-circle10 sk-child"></div> <div class="sk-circle11 sk-child"></div> <div class="sk-circle12 sk-child"></div> </div> </div><script>window.__NUXT__={config:{_app:{basePath:"/",assetsPath:"./",cdnURL:null}}}</script>
-  <script src="/1f6a25f.js"></script><script src="/a865292.js"></script><script src="/a4a8b1b.js"></script><script src="/1b3c704.js"></script></body>
+  <script src="/e8cd43a.js"></script><script src="/a865292.js"></script><script src="/8e0b1c0.js"></script><script src="/1b3c704.js"></script></body>
 </html>
diff --git a/docs/6330a92.js → docs/3b77a50.js b/docs/6330a92.js → docs/3b77a50.js
diff --git a/docs/8c011f5.js b/docs/8c011f5.js
diff --git a/docs/a4a8b1b.js → docs/8e0b1c0.js b/docs/a4a8b1b.js → docs/8e0b1c0.js
diff --git a/docs/9dfe856.js b/docs/9dfe856.js
diff --git a/docs/1f6a25f.js → docs/e8cd43a.js b/docs/1f6a25f.js → docs/e8cd43a.js
diff --git a/docs/index.html b/docs/index.html
@@ -1,9 +1,9 @@
 <!doctype html>
 <html>
   <head>
-    <meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Free Organization Chart generator and viewer"><meta data-n-head="1" data-hid="keywords" name="keywords" content="vuejs, nuxt, javascript, orgchart, organization, open-source"><meta data-n-head="1" name="google-site-verification" content="faMBWsCcw7RZQp1wVNh-Hgy7aQ8D2KMMNpwg0LKtsu4"><title>Organization chart</title><link data-n-head="1" rel="icon" type="image/x-icon" href="./favicon.ico"><script data-n-head="1" src="data.js"></script><script data-n-head="1" src="config.js"></script><script data-n-head="1" src="translate.js"></script><link rel="preload" href="./1f6a25f.js" as="script"><link rel="preload" href="./a865292.js" as="script"><link rel="preload" href="./a4a8b1b.js" as="script"><link rel="preload" href="./1b3c704.js" as="script">
+    <meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Free Organization Chart generator and viewer"><meta data-n-head="1" data-hid="keywords" name="keywords" content="vuejs, nuxt, javascript, orgchart, organization, open-source"><meta data-n-head="1" name="google-site-verification" content="faMBWsCcw7RZQp1wVNh-Hgy7aQ8D2KMMNpwg0LKtsu4"><title>Organization chart</title><link data-n-head="1" rel="icon" type="image/x-icon" href="./favicon.ico"><script data-n-head="1" src="data.js"></script><script data-n-head="1" src="config.js"></script><script data-n-head="1" src="translate.js"></script><link rel="preload" href="./e8cd43a.js" as="script"><link rel="preload" href="./a865292.js" as="script"><link rel="preload" href="./8e0b1c0.js" as="script"><link rel="preload" href="./1b3c704.js" as="script">
   </head>
   <body>
     <div id="__nuxt"><style>#__nuxt,body,html{background:#fff;width:100%;height:100%;display:flex;justify-content:center;align-items:center;margin:0;padding:0}.sk-circle{width:40px;height:40px;position:relative}.sk-circle .sk-child{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle .sk-child:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#05668d;border-radius:100%;-webkit-animation:sk-circleBounceDelay 1.2s infinite ease-in-out both;animation:sk-circleBounceDelay 1.2s infinite ease-in-out both}.sk-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleBounceDelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-circleBounceDelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}</style> <div class="sk-circle"> <div class="sk-circle1 sk-child"></div> <div class="sk-circle2 sk-child"></div> <div class="sk-circle3 sk-child"></div> <div class="sk-circle4 sk-child"></div> <div class="sk-circle5 sk-child"></div> <div class="sk-circle6 sk-child"></div> <div class="sk-circle7 sk-child"></div> <div class="sk-circle8 sk-child"></div> <div class="sk-circle9 sk-child"></div> <div class="sk-circle10 sk-child"></div> <div class="sk-circle11 sk-child"></div> <div class="sk-circle12 sk-child"></div> </div> </div><script>window.__NUXT__={config:{_app:{basePath:"/",assetsPath:"./",cdnURL:null}}}</script>
-  <script src="./1f6a25f.js"></script><script src="./a865292.js"></script><script src="./a4a8b1b.js"></script><script src="./1b3c704.js"></script></body>
+  <script src="./e8cd43a.js"></script><script src="./a865292.js"></script><script src="./8e0b1c0.js"></script><script src="./1b3c704.js"></script></body>
 </html>
diff --git a/orgchart.zip b/orgchart.zip
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,5 +1,5 @@
 <template lang='pug'>
-  .p-container(v-on:mousemove.selve="onMouseMove")
+.p-container(v-on:mousemove.selve="onMouseMove")
     page-header
     .container1(id='xparent')
       org-chart(v-if="chart")