adding sort basic, notification for spawn, add date_started

.gitignore

@@ -122,3 +122,4 @@ dist
 /bin
 /dist
 /build
+/out

index.js

@@ -37,7 +37,7 @@ function handleReady() {
 	appWindow.on('closed', handleClose)
 
     // @TODO only for
-    // appWindow.webContents.openDevTools()
+    appWindow.webContents.openDevTools()
 }
 
 /**

package.json

@@ -1,10 +1,35 @@
 {
     "name": "potato-launcher",
     "version": "0.1.0",
+    "author": "Björn Hase <me@herr-hase.wtf>",
+    "main": "index.js",
+    "description": "Launcher for Apps on Desktop",
+    "config": {
+        "forge": {
+            "packagerConfig": {
+                "out": "./build",
+                "dir": "./"
+            },
+            "makers": [
+                {
+                    "name": "@electron-forge/maker-deb",
+                    "platforms": [
+                        "linux"
+                    ]
+                },
+                {
+                    "name": "@electron-forge/maker-wix",
+                    "platforms": [
+                        "win32"
+                    ]
+                }
+            ]
+        }
+    },
     "scripts": {
         "development": "npx mix && electron .",
-        "build-linux": "npx mix --production && npx electron-packager ./ potato-launcher --target=linux --arch=x64 --out=build/ --overwrite --asar",
+        "build-linux": "npx mix --production && npx electron-forge make --target=linux --arch=x64",
-        "build-win": "npx mix --production && npx electron-packager ./ potato-launcher --target=win32 --arch=x64 --out=build/ --overwrite --asar"
+        "build-win": "npx mix --production && npx electron-forge make --target=win32 --arch=x64"
     },
     "dependencies": {
         "@riotjs/observable": "^4.1.1",
@@ -12,14 +37,18 @@
         "@tiny-components/plain-ui": "^0.6.0",
         "@tiny-components/sidebar-form": "^0.1.0",
         "@tiny-components/validator": "^0.2.0",
+        "dayjs": "^1.11.5",
         "pouchdb": "^7.3.0",
         "pouchdb-find": "^7.3.0",
         "riot": "^7.0.3"
     },
     "devDependencies": {
+        "@electron-forge/cli": "^6.0.0-beta.66",
+        "@electron-forge/maker-deb": "^6.0.0-beta.66",
+        "@electron-forge/maker-wix": "^6.0.0-beta.66",
         "@riotjs/webpack-loader": "^6.0.0",
-        "electron": "^20.1.4",
+        "electron": "^19.1.0",
-        "electron-packager": "^16.0.0",
+        "electron-wix-msi": "^4.0.0",
         "laravel-mix": "^6.0.49",
         "sass": "^1.54.5",
         "sass-loader": "^12.6.0",

src/js/components/filter.riot

@@ -0,0 +1,34 @@
+<potato-filter>
+    <div class="filter">
+        <button class="button button--icon button--hover-icon-contrast m-bottom-0">
+            <svg class="icon icon--big">
+                <use xlink:href="symbol-defs.svg#icon-filter" />
+            </svg>
+        </button>
+        <div class="">
+            <div class="">
+
+            </div>
+            <div class="">
+
+            </div>
+        </div>
+    </div>
+
+    <script>
+
+        /**
+         *  close app
+         *
+         *  @author Björn Hase
+         *  @license hhttps://www.gnu.org/licenses/gpl-3.0.en.html GPL-3
+         *  @link https://gitea.node001.net/HerrHase/potato-launcher.git
+         *
+         */
+
+        export default {
+
+        }
+
+    </script>
+</potato-filter>

src/js/components/sorting.riot

@@ -0,0 +1,45 @@
+<potato-sorting>
+    <div class="filter">
+        <button class="button button--icon button--hover-icon-contrast m-bottom-0" if={ state.orderBy === 'name' } onclick={ (event) => { handleToggle(event) }}>
+            <svg class="icon icon--big">
+                <use xlink:href="symbol-defs.svg#icon-text" />
+            </svg>
+        </button>
+        <button class="button button--icon button--hover-icon-contrast m-bottom-0" if={ state.orderBy === 'date_started' } onclick={ (event) => { handleToggle(event) }}>
+            <svg class="icon icon--big">
+                <use xlink:href="symbol-defs.svg#icon-clock" />
+            </svg>
+        </button>
+    </div>
+
+    <script>
+
+        /**
+         *  sorting of apps
+         *
+         *  @author Björn Hase <me@herr-hase.wtf>
+         *  @license hhttps://www.gnu.org/licenses/gpl-3.0.en.html GPL-3
+         *  @link https://gitea.node001.net/HerrHase/potato-launcher.git
+         *
+         */
+
+        export default {
+            state: {
+                orderBy: 'name'
+            },
+
+            handleToggle(event) {
+                event.preventDefault()
+
+                if (this.state.orderBy === 'name') {
+                    this.state.orderBy = 'date_started'
+                } else if (this.state.orderBy = 'date_started') {
+                    this.state.orderBy = 'name'
+                }
+
+                this.update()
+            }
+        }
+
+    </script>
+</potato-sorting>

src/js/database/apps.js

@@ -91,22 +91,24 @@ class AppsDatabase extends DatabaseHandler {
      *  @return {mixed}
      *
      */
-    find() {
+    find(sorting = 'name', tags = []) {
         const query = {
             'fields': [
                 '_id',
+                '_rev',
                 'name',
                 'command',
                 'description',
                 'thumbnail',
                 'tags',
-                'started_date'
+                'date_started'
             ],
             'selector': {
                 'name': {
                     '$exists': true
                 }
-            }
+            },
+            'sort': [ sorting ]
         }
 
         return this.db.find(query).then((documents) => {

src/js/views/apps.riot

@@ -3,12 +3,9 @@
 
         <header class="header m-bottom-3">
             <div class="display-flex justify-content-space-between m-top-3">
-                <div>
+                <div class="display-flex">
-                    <button class="button button--icon button--hover-icon-contrast m-bottom-0">
+                    <potato-sorting class="m-right-3"></potato-sorting>
-                        <svg class="icon icon--big">
+                    <potato-filter></potata-filter>
-                            <use xlink:href="symbol-defs.svg#icon-filter" />
-                        </svg>
-                    </button>
                 </div>
                 <div>
                     <potato-apps-form-button></potato-apps-form-button>
@@ -48,11 +45,15 @@
     </div>
     <script>
         import * as riot from 'riot'
+        import dayjs from 'dayjs'
 
         import { spawn } from 'child_process'
 
         import potatoAppsForm from './../forms/apps.riot'
         import potatoAppsFormButton from './../components/appsFormButton.riot'
+        import potatoFilter from './../components/filter.riot'
+        import potatoSorting from './../components/sorting.riot'
+
         import appsStore from './../stores/apps.js'
         import formStore from './../stores/form.js'
 
@@ -65,10 +66,16 @@
         riot.register('potato-apps-form-button', potatoAppsFormButton)
         riot.mount('potato-apps-form-buttons')
 
+        riot.register('potato-filter', potatoFilter)
+        riot.mount('potato-filter')
+
+        riot.register('potato-sorting', potatoSorting)
+        riot.mount('potato-sorting')
+
         /**
          *
          *
-         *  @author Björn Hase
+         *  @author Björn Hase <me@herr-hase.wtf>
          *  @license hhttps://www.gnu.org/licenses/gpl-3.0.en.html GPL-3
          *  @link https://gitea.node001.net/HerrHase/potato-launcher.git
          *
@@ -114,31 +121,33 @@
              *
              */
             async handleClick(event, app) {
-                try {
+
                 const running = spawn(app.command)
 
-                    running.stdout.on('data', (data) => {
+                // send notification for starting
-                        console.log(data)
+                running.on('spawn', (data) => {
-                    })
+                    notificationStore.success(app.name + ' is starting')
 
-                    running.stderr.on('data', (data) => {
+                    // adding current datetime for started app
-                        console.log(data)
+                    app.date_started = dayjs()
+                    appsStore.put(app)
                 })
 
+                // if app has a error
                 running.on('error', (error) => {
-                        console.log(error)
+                    notificationStore.danger(app.name + ' could be not started, check if command is correct')
                 })
 
+                // if app is closing
                 running.on('close', (code) => {
-                        console.log(code)
+                    if (code === 0) {
-                    })
+                        notificationStore.success(app.name + ' is closed')
-                } catch(error) {
-                    console.log(error)
                     }
+                })
             },
 
             /**
-             *  start app
+             *  edit app
              *
              *  @param  {object} event
              *  @param  {object} app
@@ -150,8 +159,12 @@
             },
 
             /**
+             *  adding background styles
              *
              *
+             *  @param {object} app
+             *  @return {string}
+             *
              */
             addBackgroundStyles(app) {
 
@@ -163,8 +176,6 @@
 
                 return styles
             }
-
         }
-
     </script>
 </potato-apps-view>