Tidy up aside bar

glorat · Feb 1, 2020 · d88b42d · d88b42d
1 parent b494acc
commit d88b42d
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 49 deletions.
diff --git a/client/src/components/LoginForm.vue b/client/src/components/LoginForm.vue
@@ -1,8 +1,9 @@
 <template>
     <div>
         <div v-if="!$auth.loading">
-            <button v-if="!$auth.isAuthenticated" @click="auth0login">Log in</button>
+            <button v-if="!$auth.isAuthenticated" @click="auth0login">Sign Up/Log in</button>
         </div>
+        <hr>
         <form @submit.prevent="login()" v-if="!authentication.username">
             <input type="text" name="username" placeholder="Username" v-model="username" pattern="\w*" title="Only lowercase">
             <input type="password" name="password" v-model="password">

diff --git a/client/src/pages/MyAside.vue b/client/src/pages/MyAside.vue
@@ -17,19 +17,6 @@
                 </li>
             </template>
         </ul>
-        <el-upload
-                class=""
-                drag
-                action="/api/postssss/"
-                :before-upload="beforeUpload"
-                >
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">Drop Gainstrack here or<br><em>click to upload</em></div>
-        </el-upload>
-        <ul class="navigation">
-            <li><a href="/api/export/gainstrack">Export Gainstrack...</a></li>
-            <li><a href="/api/export/beancount">Export Beancount...</a></li>
-        </ul>
         <div>
             <login-form></login-form>
         </div>
@@ -68,6 +55,7 @@
                 'balance_sheet': ['Balance Sheet', 'g b'],
                 'prices': ['Prices', 'g c'],
                 'editor': ['Editor', 'g e'],
+                'port': ['Import/Export', ''],
                 'errors': ['Errors', ''],
                 'events': ['Events', 'g E'],
                 'help': ['Help', 'g H'],
@@ -80,7 +68,6 @@
                 'query': ['Query', 'g q'],
                 'statistics': ['Statistics', 'g x'],
                 'trial_balance': ['Trial Balance', 'g t'],
-
                 'irr':              ['IRR',    ''],
                 'aa': ['Asset Allocation', ''],
                 'pnlexplain': ['P&L Explain', ''],
@@ -92,44 +79,11 @@
                 ['balance_sheet', 'income_statement', 'journal'],
                 ['irr', 'aa', 'pnlexplain'],
                 ['prices'],
-                ['editor'],
+                ['port', 'editor'],
                 ['help', 'faq']
             ]
         };
 
-        private beforeUpload(file: File) {
-            const notify = this.$notify;
-            const store = this.$store;
-
-            if (file.name.match(/\.gainstrack$/)) {
-                // console.log(`Trying to upload a ${file.type} of size ${file.size}`);
-                const reader = new FileReader();
-                reader.onload = () => {
-                    const text = reader.result;
-                    axios.put('/api/source/', {source: text, filePath: '', entryHash: '', sha256sum: ''})
-                        .then(response => {
-                            this.$store.dispatch('parseState', response.data);
-                            if (response.data.errors.length > 0) {
-                                notify.warning('There are errors...');
-                                this.$router.push({name: 'errors'});
-                            } else {
-                                notify.success('Saved');
-                                this.$store.dispatch('reload');
-                                this.$store.dispatch('gainstrackText'); // Clear editor
-                                // A bit of a hack to force a refresh of local state in current view
-                                this.$router.go(0);
-                            }
-                        })
-                };
-                reader.onerror = () => {
-                    notify.error(reader.result as string)
-                };
-                reader.readAsText(file);
-            } else {
-                notify.warning('Can only upload .gainstrack files');
-            }
-            return false;
-        }
     }
 </script>
 

diff --git a/client/src/pages/Port.vue b/client/src/pages/Port.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+        Your data can be exported and saved to your local computer in Gainstrack format - a simple text based format
+        <ul>
+            <li><a href="/api/export/gainstrack">Export Gainstrack...</a></li>
+        </ul>
+        Your data can also be exported to Beancount format - a popular open source text based accounting software package
+        <ul>
+            <li><a href="/api/export/beancount">Export Beancount...</a></li>
+        </ul>
+
+        If you have exported your Gainstrack file, you can re-upload and apply it here
+        <el-upload
+                class=""
+                drag
+                action="/api/postssss/"
+                :before-upload="beforeUpload"
+        >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">Drop Gainstrack here or<br><em>click to upload</em></div>
+        </el-upload>
+    </div>
+</template>
+
+<script lang="ts">
+    import Vue from 'vue';
+    import {Upload} from 'element-ui';
+    import axios from 'axios';
+
+    export default Vue.extend({
+        name: 'Port',
+        components: {'el-upload': Upload},
+        methods: {
+            beforeUpload(file: File) {
+                const notify = this.$notify;
+                const store = this.$store;
+
+                if (file.name.match(/\.gainstrack$/)) {
+                    // console.log(`Trying to upload a ${file.type} of size ${file.size}`);
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        const text = reader.result;
+                        axios.put('/api/source/', {source: text, filePath: '', entryHash: '', sha256sum: ''})
+                            .then(response => {
+                                store.dispatch('parseState', response.data);
+                                if (response.data.errors.length > 0) {
+                                    notify.warning('There are errors...');
+                                    this.$router.push({name: 'errors'});
+                                } else {
+                                    notify.success('Saved');
+                                    store.dispatch('reload');
+                                    store.dispatch('gainstrackText'); // Clear editor
+                                    // A bit of a hack to force a refresh of local state in current view
+                                    this.$router.go(0);
+                                }
+                            });
+                    };
+                    reader.onerror = () => {
+                        notify.error(reader.result as string);
+                    };
+                    reader.readAsText(file);
+                } else {
+                    notify.warning('Can only upload .gainstrack files');
+                }
+                return false;
+            }
+        }
+    });
+</script>
+
+<style scoped>
+
+</style>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
@@ -27,6 +27,11 @@ const routes: RouteConfig[] = [
         component: () => import('../components/SourceErrors.vue'),
         meta: {title: 'Editor'}
     },
+    {
+        path: '/port',
+        component: () => import('../pages/Port.vue'),
+        meta: {title: 'Import/Export'},
+    },
     {path: '/irr', component: () => import('../pages/IrrSummary.vue'), meta: {title: 'IRR'}},
     {path: '/irr/:accountId', component: IrrDetail, name: 'irr_detail', props: true},
     {