Use relative path for .env config

.gitignore

@@ -8,4 +8,11 @@ node_modules/
 !src/frontend/public/
 !src/frontend/.env
 mockup.drawio
-demo.gif
+demo.gif
+.env.template
+config.properties
+config.template.properties
+photo-metadata-updater/
+photo-metadata-updater.zip
+build.sh
+readme.txt

README.md

@@ -11,7 +11,7 @@ Node.js application with a Vue frontend. Runs on Mac/Unix systems, not tested on
 
 ### Please make backups of all photos before using the app and editing metadata, in case of unexpected errors.
 
-![](https://github.com/kylmp/photo-metadata-updater/blob/develop/demo.gif)
+![Demo](https://github.com/kylmp/photo-metadata-updater/blob/master/demo.gif)
 
 # Required Dependencies
 
@@ -21,12 +21,12 @@ Ensure you have the following dependencies downloaded on your system:
 * [Node.js](https://nodejs.org/en/download/) - Used to run the application
 * [Bing maps API key](https://docs.microsoft.com/en-us/bingmaps/getting-started/bing-maps-dev-center-help/getting-a-bing-maps-key) - Used for displaying map and timezone calculations
 
-# Build and Run Application
+# Run App Guide
 
 ### Setup
 1. [Download zip of the latest release](https://github.com/kylmp/photo-metadata-updater/releases/latest/download/photo-metadata-updater.zip)
 2. Extract the zip into a new project directory
-4. Open the `.env` file and add your bing API key, and update the exiftool path (if not globally accessable on your computer)
+4. Edit the `config.properties` file and add your bing API key, and update the exiftool path (if not globally accessable on your computer)
 
 ### Run application
 Run the command `node photo-metadata-updater.js` from the project directory, or use `node /path/to/photo-metadata-updater.js` from any directory

photo-metadata-updater.js

@@ -4,7 +4,7 @@ const path = require('path');
 const shell = require('shelljs');
 const app = express();
 const imgFolder = require('./src/service/img-folder-service');
-require('dotenv').config();
+require('dotenv').config({ path: path.join(__dirname, './config.properties') });
 
 const port = process.env.PORT || 8000;
 const appName = 'photo-metadata-updater';

src/frontend/src/components/body-content/MapDisplay.vue

@@ -1,7 +1,7 @@
 <template>
   <BingMap v-if="provider === 'BING'" :apikey="apikey"></BingMap>
   <GoogleMap v-if="provider === 'GOOGLE'" :apikey="apikey"></GoogleMap>
-  <div v-if="!loaded">Loading...</div>
+  <div v-if="apikey === ''">Loading...</div>
 </template>
 
 <script>
@@ -17,17 +17,18 @@ export default {
     GoogleMap,
   },
   setup() {
-    const loaded = ref(false);
     const provider = ref('');
     const apikey = ref('');
 
     axios.get('/api/maps-api-key').then((response) => {
       provider.value = response.data.provider;
       apikey.value = response.data.key;
-      loaded.value = true;
-    });
+    }).catch(() => {
+      provider.value = 'BING';
+      apikey.value = 'NO-API-KEY';
+    })
 
-    return { loaded, provider, apikey };
+    return { provider, apikey };
   },
 }
 </script>