Added export view

package.json

@@ -5,7 +5,7 @@
     "url": "https://itzik.co"
   },
   "description": "Track your office hours.",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

src/assets/main.scss

@@ -324,7 +324,9 @@ ol {
   height: 210px;
   overflow-y: scroll;
 }
-
+.settings-view {
+  height: 250px;
+}
 .single {
   .today-box {
     padding: 18px 22px !important;

src/background.js

@@ -81,6 +81,7 @@ const isDevelopment = process.env.NODE_ENV !== 'production';
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win;
+let secWin;
 let tray;
 
 const createTray = () => {
@@ -173,7 +174,34 @@ function createWindow() {
 
     win.on('closed', () => {
         win = null
-    })
+    });
+
+    win.webContents.on('new-window', (event, url) => {
+        event.preventDefault();
+        secWin = new BrowserWindow({
+            width: 600,
+            height: 600,
+            show: true,
+            frame: true,
+            alwaysOnTop: false,
+            transparent: false,
+            fullscreenable: true,
+            skipTaskbar: false,
+            icon: path.join(__static, 'icon.png'),
+            webPreferences: {
+                nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+            }
+        });
+        if (process.env.WEBPACK_DEV_SERVER_URL) {
+            // Load the url of the dev server if in development mode
+            secWin.loadURL(process.env.WEBPACK_DEV_SERVER_URL + "#/export");
+            // if (!process.env.IS_TEST) win.webContents.openDevTools()
+        } else {
+            createProtocol('app');
+            // Load the index.html when not in development
+            secWin.loadURL('app://./index.html/#/export');
+        }
+    });
 }
 
 // Quit when all windows are closed.
@@ -205,6 +233,7 @@ app.on('ready', async () => {
         log_out();
     });
 
+
     if (isDevelopment && !process.env.IS_TEST) {
         // Install Vue Devtools
         // Devtools extensions are broken in Electron 6.0.0 and greater
@@ -222,6 +251,8 @@ app.on('ready', async () => {
     log_in();
     createTray();
     createWindow();
+
+
 });
 
 // Exit cleanly on request from parent process in development mode.

src/components/Editor.vue

@@ -17,7 +17,7 @@ export default {
     },
     theme: {
       type: String,
-      default: ""
+      default: "solarized_dark"
     },
     fontSize: {
       type: Number,
@@ -68,7 +68,9 @@ export default {
   },
   methods: {
     init() {
+
       this.editor = ace.edit(this.$refs.editor);
+
       this.editor.$blockScrolling = Infinity;
       this.session = this.editor.getSession();
       this.$emit("init", this.editor);
@@ -84,14 +86,26 @@ export default {
       this.editor.on("paste", this.onPaste);
       this.editor.on("change", this.onChange);
       this.editor.on("input", this.onInput);
+      this.prettify();
     },
     setMode() {
       require(`brace/mode/${this.lang}`);
       this.session.setMode(`ace/mode/${this.lang}`);
       return this.editor;
     },
+    prettify() {
+      require(`brace/ext/beautify`);
+      // let beautify = ace.acequire("ace/ext/beautify");
+      // b.beautify(this.editor);
+      ace.acequire("ace/ext/beautify");
+      // this.editor.beautify(this.session);
+      // console.log(b);?
+      this.session.beautify();
+      return this.editor;
+    },
     setTheme() {
       require(`brace/theme/${this.theme}`);
+      // this.editor.setTheme(`ace/theme/${this.theme}`);
       this.editor.setTheme(`ace/theme/${this.theme}`);
       return this.editor;
     },

src/main.js

@@ -5,6 +5,7 @@ import store from './store'
 import Home from "@/views/Home";
 import Settings from "@/views/Settings";
 import Single from "@/views/Single";
+import Edit from "@/views/Edit";
 
 require('@/assets/main.scss');
 require('animate.css');
@@ -16,6 +17,7 @@ Vue.use(VueRouter);
 const routes = [
     {path: '/', component: Home},
     {path: '/settings', component: Settings},
+    {path: '/export', component: Edit},
     {path: '/show/:date', component: Single}
 ];
 

src/store/index.js

@@ -51,11 +51,6 @@ export default new Vuex.Store({
         [types.FETCH_ALL_DAYS]({commit}) {
             db.find({}, (err, result) => {
                 commit(types.SET_DAYS, result);
-                const today = moment(new Date(), "YYYY-MM-DD").format("YYYY-MM-DD");
-                let todayObj = result.filter(obj => {
-                    return obj.date == today;
-                });
-                commit(types.SET_CURRENT, todayObj[0].clockIn[0]);
             });
         },
         [types.FETCH_DAYS]({commit}, month) {

src/views/Edit.vue

@@ -1,32 +1,36 @@
 <template>
-    <h1>{{content}}</h1>
-    <div v-html="content"></div>
+    <div>
     <Editor
-            height="300px"
+            height="600px"
             ref="editor"
-            :content="firstContent"
+            :content="JSON.stringify(days,null, '\t')"
             :options="{
         enableBasicAutocompletion: true,
         enableSnippets: true,
         enableLiveAutocompletion: true,
         tabSize:2
     }"
             :fontSize='14'
-            :lang="'javascript'"
-            :theme="'dark'"
-            @onChange="editorChange"
-            @init="editorInit">
-
+            lang="json"
+            @onChange="editorChange">
     </Editor>
+    </div>
 </template>
 
 <script>
     import Editor from "@/components/Editor";
+    import {mapActions, mapState} from "vuex";
+    import types from "@/store/types";
     export default {
         name: "Edit",
         components: {
           Editor
         },
+        computed: {
+            ...mapState([
+                'days',
+            ]),
+        },
         data() {
             return {
                 firstContent: "Hello",
@@ -50,8 +54,14 @@
             },
             editorPaste(editor) {
                 console.log("pase", editor);
-            }
-        }
+            },
+            ...mapActions([
+                types.FETCH_ALL_DAYS,
+            ]),
+        },
+        created() {
+            this.FETCH_ALL_DAYS();
+        },
     }
 </script>
 

src/views/Settings.vue

@@ -4,9 +4,12 @@
             <h1 class="date-title">Settings</h1>
         </div>
         <router-link to="/" class="go-back">Back</router-link>
-        <div class="list-wrapper detail-view">
-            <label for="countDown"> Hours to count: </label>
+        <div class="list-wrapper settings-view">
+            <div class="settings-form">
+                <label for="countDown"> Hours to count: </label>
                 <input type="number" max="12" min="1" :value="settings.countDown" name="countDown" @change="updateSettings">
+                <div @click="openExport">Export data</div>
+            </div>
         </div>
 
     </div>
@@ -30,6 +33,9 @@
             updateSettings(e) {
                 this.SET_SETTINGS([e.target.name , e.target.value]);
             },
+            openExport() {
+              window.open('app://./index.html/export');
+            },
             ...mapActions([
                 types.FETCH_DAYS,
                 types.GET_SETTINGS,

vue.config.js

@@ -6,6 +6,7 @@ module.exports = {
       externals: ['nedb'],
       nodeIntegration: true,
       enableRemoteModule: true,
+      nativeWindowOpen: true,
       publish: ['github']
     }
   }