Initial

src/index.ejs

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>flightgear-airports</title>
+    <% if (htmlWebpackPlugin.options.nodeModules) { %>
+      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
+      <script>
+        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
+      </script>
+    <% } %>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- Set `__static` path to static files in production -->
+    <% if (!process.browser) { %>
+      <script>
+        if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
+      </script>
+    <% } %>
+
+    <!-- webpack builds are automatically injected -->
+  </body>
+</html>

src/main/index.dev.js

@@ -0,0 +1,24 @@
+/**
+ * This file is used specifically and only for development. It installs
+ * `electron-debug` & `vue-devtools`. There shouldn't be any need to
+ *  modify this file, but it can be used to extend your development
+ *  environment.
+ */
+
+/* eslint-disable */
+
+// Install `electron-debug` with `devtron`
+require('electron-debug')({ showDevTools: true })
+
+// Install `vue-devtools`
+require('electron').app.on('ready', () => {
+  let installExtension = require('electron-devtools-installer')
+  installExtension.default(installExtension.VUEJS_DEVTOOLS)
+    .then(() => {})
+    .catch(err => {
+      console.log('Unable to install `vue-devtools`: \n', err)
+    })
+})
+
+// Require `main` process to boot app
+require('./index')

src/main/index.js

@@ -0,0 +1,67 @@
+'use strict'
+
+import { app, BrowserWindow } from 'electron'
+
+/**
+ * Set `__static` path to static files in production
+ * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
+ */
+if (process.env.NODE_ENV !== 'development') {
+  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
+}
+
+let mainWindow
+const winURL = process.env.NODE_ENV === 'development'
+  ? `http://localhost:9080`
+  : `file://${__dirname}/index.html`
+
+function createWindow () {
+  /**
+   * Initial window options
+   */
+  mainWindow = new BrowserWindow({
+    height: 563,
+    useContentSize: true,
+    width: 1000
+  })
+
+  mainWindow.loadURL(winURL)
+
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+}
+
+app.on('ready', createWindow)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+/**
+ * Auto Updater
+ *
+ * Uncomment the following code below and install `electron-updater` to
+ * support auto updating. Code Signing with a valid certificate is required.
+ * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating
+ */
+
+/*
+import { autoUpdater } from 'electron-updater'
+
+autoUpdater.on('update-downloaded', () => {
+  autoUpdater.quitAndInstall()
+})
+
+app.on('ready', () => {
+  if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates()
+})
+ */

src/renderer/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <div id="app" >
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'flightgear-airports'
+  }
+</script>
+
+<style>
+html, body {
+    height:100%; /*both html and body*/
+}
+body {
+    margin: 0; /*reset default margin*/
+}
+#app {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/renderer/components/FlightgearMap.vue

@@ -0,0 +1,57 @@
+<template>
+    <l-map :zoom="zoom" :center="center">
+      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
+      <l-marker :lat-lng="marker"></l-marker>
+      <LeafletSidebar></LeafletSidebar>
+    </l-map>
+</template>
+
+<script lang="js">
+  import 'leaflet/dist/leaflet.css'
+  import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'
+  import LeafletSidebar from './LeafletSidebar'
+  import L from 'leaflet'
+
+  // https://github.com/KoRiGaN/Vue2Leaflet/issues/103
+  delete L.Icon.Default.prototype._getIconUrl
+
+  L.Icon.Default.mergeOptions({
+    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+  })
+  export default {
+    name: 'flightgear-map',
+    components: { LMap, LTileLayer, LMarker, LeafletSidebar },
+    props: [],
+    mounted () {
+
+    },
+    data () {
+      return {
+        zoom: 13,
+        center: L.latLng(47.413220, -1.219482),
+        url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+        marker: L.latLng(47.413220, -1.219482)
+      }
+    },
+    methods: {
+    },
+    computed: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+  .vue2leaflet-map {
+    height: 100%;
+  }
+  .l-map{
+    height: 100%;
+  }
+  .flightgear-map {
+     color: aqua
+  }
+</style>

src/renderer/components/LandingPage.vue

@@ -0,0 +1,128 @@
+<template>
+  <div id="wrapper">
+    <img id="logo" src="~@/assets/logo.png" alt="electron-vue">
+    <main>
+      <div class="left-side">
+        <span class="title">
+          Welcome to your new project!
+        </span>
+        <system-information></system-information>
+      </div>
+
+      <div class="right-side">
+        <div class="doc">
+          <div class="title">Getting Started</div>
+          <p>
+            electron-vue comes packed with detailed documentation that covers everything from
+            internal configurations, using the project structure, building your application,
+            and so much more.
+          </p>
+          <button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs</button><br><br>
+        </div>
+        <div class="doc">
+          <div class="title alt">Other Documentation</div>
+          <button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>
+          <button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+  import SystemInformation from './LandingPage/SystemInformation'
+
+  export default {
+    name: 'landing-page',
+    components: { SystemInformation },
+    methods: {
+      open (link) {
+        this.$electron.shell.openExternal(link)
+      }
+    }
+  }
+</script>
+
+<style>
+  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
+
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  body { font-family: 'Source Sans Pro', sans-serif; }
+
+  #wrapper {
+    background:
+      radial-gradient(
+        ellipse at top left,
+        rgba(255, 255, 255, 1) 40%,
+        rgba(229, 229, 229, .9) 100%
+      );
+    height: 100vh;
+    padding: 60px 80px;
+    width: 100vw;
+  }
+
+  #logo {
+    height: auto;
+    margin-bottom: 20px;
+    width: 420px;
+  }
+
+  main {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  main > div { flex-basis: 50%; }
+
+  .left-side {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .welcome {
+    color: #555;
+    font-size: 23px;
+    margin-bottom: 10px;
+  }
+
+  .title {
+    color: #2c3e50;
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 6px;
+  }
+
+  .title.alt {
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+
+  .doc p {
+    color: black;
+    margin-bottom: 10px;
+  }
+
+  .doc button {
+    font-size: .8em;
+    cursor: pointer;
+    outline: none;
+    padding: 0.75em 2em;
+    border-radius: 2em;
+    display: inline-block;
+    color: #fff;
+    background-color: #4fc08d;
+    transition: all 0.15s ease;
+    box-sizing: border-box;
+    border: 1px solid #4fc08d;
+  }
+
+  .doc button.alt {
+    color: #42b983;
+    background-color: transparent;
+  }
+</style>

src/renderer/components/LandingPage/SystemInformation.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div class="title">Information</div>
+    <div class="items">
+      <div class="item">
+        <div class="name">Path:</div>
+        <div class="value">{{ path }}</div>
+      </div>
+      <div class="item">
+        <div class="name">Route Name:</div>
+        <div class="value">{{ name }}</div>
+      </div>
+      <div class="item">
+        <div class="name">Vue.js:</div>
+        <div class="value">{{ vue }}</div>
+      </div>
+      <div class="item">
+        <div class="name">Electron:</div>
+        <div class="value">{{ electron }}</div>
+      </div>
+      <div class="item">
+        <div class="name">Node:</div>
+        <div class="value">{{ node }}</div>
+      </div>
+      <div class="item">
+        <div class="name">Platform:</div>
+        <div class="value">{{ platform }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        electron: process.versions.electron,
+        name: this.$route.name,
+        node: process.versions.node,
+        path: this.$route.path,
+        platform: require('os').platform(),
+        vue: require('vue/package.json').version
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .title {
+    color: #888;
+    font-size: 18px;
+    font-weight: initial;
+    letter-spacing: .25px;
+    margin-top: 10px;
+  }
+
+  .items { margin-top: 8px; }
+
+  .item {
+    display: flex;
+    margin-bottom: 6px;
+  }
+
+  .item .name {
+    color: #6a6a6a;
+    margin-right: 6px;
+  }
+
+  .item .value {
+    color: #35495e;
+    font-weight: bold;
+  }
+</style>

src/renderer/components/LeafletSidebar.vue

@@ -0,0 +1,120 @@
+<template>
+<div id="sidebar" class="leaflet-sidebar collapsed">
+    <!-- Nav tabs -->
+    <div class="leaflet-sidebar-tabs">
+        <ul role="tablist"> <!-- top aligned tabs -->
+            <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
+            <li><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
+            <li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
+        </ul>
+
+        <ul role="tablist"> <!-- bottom aligned tabs -->
+            <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
+        </ul>
+    </div>
+
+    <!-- Tab panes -->
+    <div class="leaflet-sidebar-content">
+        <div class="leaflet-sidebar-pane" id="home">
+            <h1 class="leaflet-sidebar-header">
+                sidebar-v2
+                <div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div>
+            </h1>
+            <p>A responsive sidebar for mapping libraries</p>
+        </div>
+
+        <div class="leaflet-sidebar-pane" id="messages">
+            <h1 class="leaflet-sidebar-header">Messages<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
+            <el-select v-model="value" placeholder="Select"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">  </el-option>    </el-select>
+        </div>
+
+        <div class="leaflet-sidebar-pane" id="profile">
+            <h1 class="leaflet-sidebar-header">Profile<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
+        </div>
+    </div>
+</div>  
+</template>
+
+<script lang="js">
+  import 'leaflet-sidebar-v2/css/leaflet-sidebar.css'
+  import 'font-awesome/css/font-awesome.css'
+  import {} from 'leaflet-sidebar-v2'
+  import L from 'leaflet'
+  import SettingsPanel from './SettingsPanel'
+
+  export default {
+    name: 'leaflet-sidebar',
+    components: { SettingsPanel },
+    props: [],
+    mounted () {
+      this.add()
+    },
+    beforeDestroy () {
+      this.remove()
+    },
+    data () {
+      return {
+        message: 'BLBL',
+        checkbox: true,
+        options: [{
+          value: 'Option1',
+          label: 'Option1'
+        }, {
+          value: 'Option2',
+          label: 'Option2'
+        }, {
+          value: 'Option3',
+          label: 'Option3'
+        }, {
+          value: 'Option4',
+          label: 'Option4'
+        }, {
+          value: 'Option5',
+          label: 'Option5'
+        }],
+        value: ''
+      }
+    },
+    methods: {
+      deferredMountedTo (parent) {
+        this.sidebar = L.control.sidebar({
+          autopan: false, // whether to maintain the centered map point when opening the sidebar
+          closeButton: true, // whether t add a close button to the panes
+          container: 'sidebar', // the DOM container or #ID of a predefined sidebar container that should be used
+          position: 'left' // left or right
+        })
+        parent.addControl(this.sidebar)
+
+        this.sidebar.addPanel({
+          id: 'properties',
+          tab: '<i class="fa fa-road vertical-center"/>',
+          title: 'Properties',
+          pane: '<div id="properties-tab"></div>'
+        })
+
+        this.sidebar.addPanel({
+          id: 'settings',
+          tab: '<i class="fa fa-gear vertical-center"/>',
+          title: 'Settings',
+          pane: '<div id="settings-div"></div>'
+        })
+      },
+      remove () {
+        if (this.sidebar) {
+          this.$parent.removeLayer(this.sidebar)
+        }
+      },
+      add () {
+        if (this.$parent._isMounted) {
+          this.deferredMountedTo(this.$parent.mapObject)
+        }
+      }
+    },
+    computed: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/renderer/components/SettingsPanel.vue

@@ -0,0 +1,34 @@
+<template>
+</template>
+
+<script lang="js">
+  export default {
+    name: 'settings-panel',
+    props: [],
+    mounted () {
+      if (this.$parent._isMounted) {
+        this.$parent.sidebar.addPanel({
+          id: 'settings',
+          tab: '<i class="fa fa-gear vertical-center"/>',
+          title: 'Settings',
+          pane: '<div id="settings-div"></div>'
+        })
+      }
+    },
+
+    data () {
+      return {
+        selected: 'Undefined'
+      }
+    },
+    methods: {
+
+    },
+    computed: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/renderer/main.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import axios from 'axios'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+import App from './App'
+import router from './router'
+import store from './store'
+
+if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
+Vue.http = Vue.prototype.$http = axios
+Vue.config.productionTip = false
+
+Vue.use(ElementUI)
+
+/* eslint-disable no-new */
+new Vue({
+  components: { App },
+  router,
+  store,
+  template: '<App/>'
+}).$mount('#app')

src/renderer/plugins/vuetify.js

@@ -0,0 +1,11 @@
+// src/plugins/vuetify.js
+
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+import 'vuetify/dist/vuetify.min.css'
+
+Vue.use(Vuetify)
+
+const opts = {}
+
+export default new Vuetify(opts)

src/renderer/router/index.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'landing-page',
+      component: require('@/components/FlightgearMap').default
+    },
+    {
+      path: '*',
+      redirect: '/'
+    }
+  ]
+})

src/renderer/store/index.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import L from 'leaflet'
+
+import { createPersistedState, createSharedMutations } from 'vuex-electron'
+
+import modules from './modules'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules,
+  plugins: [
+    createPersistedState(),
+    createSharedMutations()
+  ],
+  strict: process.env.NODE_ENV !== 'production',
+  state: { zoom: 13,
+    center: L.latLng(47.413220, -1.219482),
+    url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
+    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+    marker: L.latLng(47.413220, -1.219482)}
+})

src/renderer/store/modules/Counter.js

@@ -0,0 +1,25 @@
+const state = {
+  main: 0
+}
+
+const mutations = {
+  DECREMENT_MAIN_COUNTER (state) {
+    state.main--
+  },
+  INCREMENT_MAIN_COUNTER (state) {
+    state.main++
+  }
+}
+
+const actions = {
+  someAsyncTask ({ commit }) {
+    // do something async
+    commit('INCREMENT_MAIN_COUNTER')
+  }
+}
+
+export default {
+  state,
+  mutations,
+  actions
+}

src/renderer/store/modules/index.js

@@ -0,0 +1,14 @@
+/**
+ * The file enables `@/store/index.js` to import all vuex modules
+ * in a one-shot manner. There should not be any reason to edit this file.
+ */
+
+const files = require.context('.', false, /\.js$/)
+const modules = {}
+
+files.keys().forEach(key => {
+  if (key === './index.js') return
+  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
+
+export default modules