codefoxes · razyalov · Apr 22, 2018 · Apr 22, 2018
diff --git a/create.html b/create.html
@@ -96,7 +96,7 @@
 <script>
 	const electron = require('electron').remote
 	const ipc = require('electron').ipcRenderer
-	const firebase = require("firebase")
+	const firebase = require("firebase-admin")
 	const writeFile = require('write-file-atomic')
 	require('electron').webFrame.setZoomLevelLimits(1, 1)
 </script>

diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 	<script>
 		const electron = require('electron').remote
 		const ipc = require('electron').ipcRenderer
-		const firebase = require("firebase")
+		const firebase = require("firebase-admin")
 		const writeFile = require('write-file-atomic')
 		const clipboard = electron.clipboard
 		//window.$ = window.jQuery = require('jquery')
@@ -20,7 +20,7 @@
 </head>
 <body ng-app="fba" ng-controller="mainController" class="{{os}} index">
 	<div id="mainmenu">
-		<div class="titlebar" ng-if="titleBar">Firebase Admin</div>
+		<div class="titlebar" ng-if="titleBar">Firebase Admin<span ng-show="currentApp.name"> - {{currentApp.name}}</span></div>
 		<div class="icons">
 			<div class="icon" ng-click="listShown = true;">
 				<img class="logo" src="img/list.svg">

diff --git a/js/app.js b/js/app.js
@@ -74,6 +74,7 @@ var fba = angular.module('fba', ['ngRoute', 'angularResizable', 'ui.codemirror']
   $scope.codeResult = 'No Data'
   $scope.query = ''
   $scope.mode = 'explorer'
+  $scope.selectedResult = 0 // in case of multiple results, which one to show first
 
   if (process.env.mode && process.env.mode === 'dev') {
     console.oldLog = console.log
@@ -181,6 +182,7 @@ var fba = angular.module('fba', ['ngRoute', 'angularResizable', 'ui.codemirror']
       $scope.currentApp = $scope.apps[id]
       $scope.update()
       dataBin.setData('openCon', openCon)
+      ipc.send('set-title', $scope.currentApp.name)
     } catch (err) {
       $scope.menuOverlay = false
       $scope.menuHidden = true
@@ -311,58 +313,76 @@ var fba = angular.module('fba', ['ngRoute', 'angularResizable', 'ui.codemirror']
 
   $scope.run = function () {
     let query = $scope.queryView.getValue()
-    $scope.results = []
-    if($scope.mode === 'explorer') {
-      $scope.collection = {}
-      try {
-        if(!query.endsWith('/')) {
-          query = query + '/'
-        }
-        query = query.substring($scope.baseURL.length, query.length - 1)
-        $scope.currentApp.database().ref(query).on('value', function (snapshot) {
-          $scope.result = snapshot.val()
-          $scope.results.push(snapshot.val())
-          if(!snapshot.key) {
-            $scope.collection.name = $scope.currentApp.name
-            $scope.collection.url = ''
-          } else {
-            $scope.collection.name = snapshot.key
-            $scope.collection.url = query
-          }
-          if (typeof $scope.result === 'object') {
-            $scope.collection.collections = $scope.updateResult($scope.result, $scope.collection.url)
-          } else {
-            $scope.collection.value = $scope.result
-            $scope.collection.leaf = true
+    $scope.results = ["fetching..."]
+    $scope.selectedResult = 0
+    $scope.queryRunning = true
+      // invoke the actual acction async so the UI can refresh for the waiting animation.
+      $timeout(() => {
+          if($scope.mode === 'explorer') {
+              $scope.collection = {}
+              try {
+                  if(!query.endsWith('/')) {
+                      query = query + '/'
+                  }
+                  query = query.substring($scope.baseURL.length, query.length - 1)
+                  let queryMethod = $rootScope.settings.queryMethod || 'on'
+                  $scope.currentApp.database().ref(query)[queryMethod]('value', function (snapshot) {
+                      $scope.result = snapshot.val()
+                      $scope.results[$scope.result]
+                      if(!snapshot.key) {
+                          $scope.collection.name = $scope.currentApp.name
+                          $scope.collection.url = ''
+                      } else {
+                          $scope.collection.name = snapshot.key
+                          $scope.collection.url = query
+                      }
+                      if (typeof $scope.result === 'object') {
+                          $scope.collection.collections = $scope.updateResult($scope.result, $scope.collection.url)
+                      } else {
+                          $scope.collection.value = $scope.result
+                          $scope.collection.leaf = true
+                      }
+                      $scope.collection.open = true
+                      $scope.codeResult = JSON.stringify($scope.result, null, 2)
+                      $scope.activeUrl = $scope.collection.url
+                      $scope.queryRunning = false
+                  }, function (err) {
+                      $scope.result = 'The read failed: ' + err.code
+                      $scope.results = [$scope.result]
+                      $scope.queryRunning = false
+                  })
+              } catch (err) {
+                  $scope.result = 'Ooops.. There is an error":\n"' + err.message
+                  $scope.results = [$scope.result]
+                  $scope.queryRunning = false
+              }
+          } else if($scope.mode === 'query') {
+              let regex = 'firebase().'
+              query = query.replace(regex, '$scope.currentApp.')
+              try {
+                  eval(query)
+                  $scope.results = []
+                  if (typeof $scope.$log !== 'undefined' && $scope.$log != null && $scope.$log.length > 0) {
+                      $scope.$log.forEach((res) => {
+                          $scope.results.push(res)
+                      })
+                  } else {
+                      // no results found
+                      $scope.results.push("No results matched your query.")
+                  }
+                  $scope.$log = null
+                  $scope.queryRunning = false
+              } catch (err) {
+                  $scope.result = errorMessage = 'Ooops.. There is an error":\n"' + err.message
+                  $scope.results = [$scope.result]
+                  $scope.queryRunning = false
+              }
           }
-          $scope.collection.open = true
-          $scope.codeResult = JSON.stringify($scope.result, null, 2)
-          $scope.activeUrl = $scope.collection.url
-        }, function (err) {
-          $scope.result = 'The read failed: ' + err.code
-        })
-      } catch (err) {
-        $scope.result = 'Ooops.. There is an error":\n"' + err.message
-      }
-    } else if($scope.mode === 'query') {
-      let regex = 'firebase().'
-      query = query.replace(regex, '$scope.currentApp.')
-       try {
-        eval(query)
-        if (typeof $scope.$log !== 'undefined' && $scope.$log.length > 0) {
-          $scope.$log.forEach((res) => {
-            $scope.results.push(res)
-          })
-        }
-        $scope.$log = null
-      } catch (err) {
-        $scope.result = 'Ooops.. There is an error":\n"' + err.message
-      }
-    }
+      })
   }
 
   $scope.copy = () => {
-    let copyText = JSON.stringify($scope.result, null, '\t')
+    let copyText = JSON.stringify($scope.results, null, '\t')
     clipboard.writeText(copyText)
     $scope.copiedNow = true
     $timeout(() => {
@@ -412,7 +432,8 @@ var fba = angular.module('fba', ['ngRoute', 'angularResizable', 'ui.codemirror']
       } else {
         $scope.query = ''
       }
-      $scope.queryView.setValue(`firebase().database().ref('/${$scope.query}').on('value', function (snapshot) {\n\tconsole.log(snapshot.val())\n})`)
+      let queryMethod = $rootScope.settings.queryMethod || 'on'
+      $scope.queryView.setValue(`firebase().database().ref('/${$scope.query}').${queryMethod}('value', function (snapshot) {\n\tsnapshot.forEach((it)=>{console.log({[it.key]:it.val()})})\n})`)
       $scope.changeQueryBoxHeight(90)
     }
     $scope.refreshQueryView()
@@ -439,6 +460,10 @@ var fba = angular.module('fba', ['ngRoute', 'angularResizable', 'ui.codemirror']
   $scope.updateChild = (collection) => {
     $scope.dbRef.child(collection.url).set(collection.value)
   }
+
+  $scope.selectResult = (resultId) => {
+    $scope.selectedResult = resultId
+  }
 })
 
 .controller('connectionController', function ($scope) {

diff --git a/js/default-settings.json b/js/default-settings.json
@@ -1,5 +1,6 @@
 {
   "theme": "light",
   "fonts": "system",
-  "jsonTheme": "default"
+  "jsonTheme": "default",
+  "queryMethod": "on"
 }
diff --git a/js/settings.js b/js/settings.js
@@ -3,18 +3,24 @@ var fbaP = angular.module('fba-p', []).run(function () {
 
 .controller('settingsController', function ($scope, $timeout) {
   $scope.view = {}
-  $scope.view.theme = true
-  $scope.activeUrl = 'theme'
   $scope.saved = false
   $scope.jsonThemes = []
   $scope.items = [{
+      name: 'General',
+      url: 'general'
+  },
+  {
     name: 'Theme',
     url: 'theme'
   },{
     name: 'Fonts',
     url: 'fonts'
   }]
 
+  let defaultView = $scope.items[0]
+  $scope.view[defaultView.url] = true
+  $scope.activeUrl = defaultView.url
+
   const userPath = electron.app.getPath('userData')
   const fs = require('graceful-fs')
   try {

diff --git a/main.js b/main.js
@@ -92,6 +92,8 @@ ipc.on('show-context-menu', (e, args) => {
 
 ipc.on('reload-window', () => mainWindow.reload())
 
+ipc.on('set-title', function(e, newTitle) { mainWindow.setTitle(newTitle) })
+
 ipc.on('open-create-window', function (event) {
   createWindow('conWin', 'create.html', {parent: mainWindow, width: 600, height: 320})
 })

diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "spectron": "^3.3.0"
   },
   "dependencies": {
-    "firebase": "^3.2.0",
+    "firebase-admin": "^5.12.0",
     "graceful-fs": "^4.1.4",
     "jquery": "^3.1.0",
     "write-file-atomic": "^1.1.4"

diff --git a/settings.html b/settings.html
@@ -18,6 +18,18 @@
 	</div>
 	<div class="admin-content">
 		<form class="form" ng-submit="save()" name="settings">
+			<section class="general" ng-show="view.general">
+				<div class="panel">
+					<div class="panel-heading">Query Method</div>
+					<div>Choose what method to use when retrieving data from a database reference object. Using <code>once</code> will retrieve the value once, while using <code>on</code> will continue to monitor changes to this reference and will reload the results if the real-time database detects a change.</div>
+					<div class="radio">
+						<div class="radio" ng-repeat="qType in ['on', 'once']" >
+							<input type="radio" name="queryMethod" ng-attr-id="queryMethod-{{qType}}" ng-model="form.queryMethod" ng-value="qType">
+							<label ng-attr-for="queryMethod-{{qType}}">{{qType}}</label>
+						</div>
+					</div>
+				</div>
+			</section>
 			<section class="theme" ng-show="view.theme">
 				<div class="panel">
 					<div class="panel-heading">Main Theme</div>

diff --git a/templates/main.html b/templates/main.html
@@ -1,7 +1,7 @@
 <section ng-hide="rootError" class="container content">
 	<form id="query-box" class="query-box" resizable r-directions="['bottom']">
 		<ui-codemirror id="query" ui-codemirror-opts="codeQueryOptions" ng-model="query"></ui-codemirror>
-		<button type="submit" class="button" ng-click="run()">Run</button>
+		<div class="loader" ng-show="queryRunning"></div><button type="submit" class="button" ng-click="run()" ng-disable="queryRunning">Run<span ng-show="queryRunning">ing...</span></button>
 	</form>
 	<div class="result-wrap">
 		<div class="result-mode">
@@ -23,7 +23,12 @@
 			</div>
 		</div>
 		<div class="result-view raw" ng-show="view.raw">
-			<div class="result" ng-repeat="result in results">{{result}}</div>
+			<div class="result-wrap">
+				<div class="result-mode" ng-show="results.length > 1">
+					<div class="icon" ng-repeat="result in results track by $index" ng-click="selectResult($index)" ng-class="{'active': selectedResult == $index}">{{$index+1}}</div>
+				</div>
+				<div class="result" ng-repeat="result in results track by $index" ng-show="selectedResult == $index">{{result}}</div>
+			</div>
 		</div>
 		<div class="copy-wrap" ng-click="copy()">
 			<img class="copy" src="img/copy.svg">