add error reporting

frontend/src/App.vue

@@ -53,12 +53,14 @@ export default {
     --dialog-color: rgb(243, 241, 241);
     --foreground-color: #2c3e50;
     --highlight-color: rgb(221, 0, 0);
+    --input-color: rgb(150, 150, 150);
 }
 
 :root.dark {
     --background-color: rgb(34, 34, 34);
     --foreground-color: white;
     --dialog-color: rgb(51, 51, 51);
+    --input-color: rgb(121, 121, 121);
 }
 
 body, html {

frontend/src/upscalingHandler.js

@@ -55,10 +55,12 @@ class UpscalingHandler {
         
         child.on( 'error', ( error ) => {
             console.log( 'An error occurred' + error );
+            win.send( 'error', 'An error occurred during upscaling. (Error message: ' + error.message + ')' );
             new Notification( { title: `SimpleMediaScalerLite - Error whilst upscaling', body: 'Your upscaling Job encountered an error whilst upscaling. (Error message: ${ error.message }).`} )
         } );
         
         child.on( 'close', ( code ) => {
+            win.send( 'finish', 'Your upscaling job finished with exit code ' + code + '. You may find its output here: ' + options.OutputFile  );
             new Notification( { title: `SimpleMediaScalerLite - Job complete', body: 'Your Upscaling job has completed successfully (Code ${ code }). You may find its output here: ` + options.OutputFile } )
         } );
     }

frontend/src/views/HomeView.vue

@@ -1,31 +1,48 @@
 <template>
     <div class="home">
         <h1>SimpleMediaScalerLite</h1>
+        <div class="table-container">
+            <table>
+                <tr id="group1" class="group">
+                    <td>
+                        <label for="algorithm">Upscaler engine</label><br>
+                        <select name="engine" id="engine" v-model="upscaleSettings.engine">
+                            <option v-for="engine in engines" :key="engine.id" :value="engine.id">{{ engine.displayName }}</option>
+                        </select><br>
+                    </td>
 
-        <label for="algorithm">Upscaler engine</label><br>
+                    <td>
-        <select name="engine" id="engine" v-model="upscaleSettings.engine">
+                        <label for="algorithm">Upscaling algorithm</label><br>
-            <option v-for="engine in engines" :key="engine.id" :value="engine.id">{{ engine.displayName }}</option>
+                        <select name="algorithm" id="algorithm" v-model="upscaleSettings.algorithm">
-        </select><br>
+                            <option v-for="engine in engines[ upscaleSettings.engine ][ 'modes' ]" :key="engine.id" :value="engine.id">{{ engine.displayName }}</option>
+                        </select><br>
+                    </td>
+                </tr>
 
-        <label for="algorithm">Upscaling algorithm</label><br>
+                <tr id="group2" class="group">
-        <select name="algorithm" id="algorithm" v-model="upscaleSettings.algorithm">
+                    <td v-if="engines[ upscaleSettings.engine ][ 'supports' ].includes( 'upscaling' )">
-            <option v-for="engine in engines[ upscaleSettings.engine ][ 'modes' ]" :key="engine.id" :value="engine.id">{{ engine.displayName }}</option>
+                        <label for="scale">Scale factor</label><br>
-        </select><br>
+                        <input type="number" name="scale" id="scale" v-model="upscaleSettings.scale" min="2" max="4" onkeydown="return false">x<br>
+                    </td>
 
-        <div v-if="engines[ upscaleSettings.engine ][ 'supports' ].includes( 'upscaling' )">
+                    <td v-if="engines[ upscaleSettings.engine ][ 'supports' ].includes( 'sharpening' )">
-            <label for="scale">Scale factor</label><br>
+                        <label for="sharpening">Sharpening factor</label><br>
-            <input type="number" name="scale" id="scale" v-model="upscaleSettings.scale" min="2" max="4" onkeydown="return false">x<br>
+                        <input type="number" step="0.01" name="scale" id="scale" v-model="upscaleSettings.sharpening" min="0" max="1"><br>
+                    </td>
+                </tr>
+
+                <tr id="group3" class="group">
+                    <td>
+                        <button @click="runCommand( 'InputFile' )">Input file</button><br>
+                    </td>
+                    <td>
+                        <button @click="runCommand( 'OutputFile' )">Output file</button><br>
+                    </td>
+                </tr>
+            </table>
+            <button @click="start()" id="start">Start upscaling</button>
         </div>
 
-        <div v-if="engines[ upscaleSettings.engine ][ 'supports' ].includes( 'sharpening' )">
-            <label for="sharpening">Sharpening factor</label><br>
-            <input type="number" step="0.01" name="scale" id="scale" v-model="upscaleSettings.sharpening" min="0" max="1"><br>
-        </div>
-
-        <button @click="runCommand( 'InputFile' )">Input file</button><br>
-        <button @click="runCommand( 'OutputFile' )">Output file</button><br>
-        <button @click="start()">Start upscaling</button>
-
         <div class="output-box-wrapper">
             <p id="cmd" @click="showCmdOutput()">Command output</p>
             <div class="output-box" id="output" v-html="output">
@@ -43,7 +60,25 @@
 
         <dialog id="wrong">
             <div class="dialog-container">
-                Some entries are missing. Please ensure that you have specified an input and output file!
+                Some entries are missing. Please ensure that you have specified an input file!
+                <form method="dialog">
+                    <button>OK</button>
+                </form>
+            </div>
+        </dialog>
+
+        <dialog id="completed">
+            <div class="dialog-container">
+                <p style="width: 90%; word-wrap: break-word;">{{ finishMessage }}</p>
+                <form method="dialog">
+                    <button>OK</button>
+                </form>
+            </div>
+        </dialog>
+
+        <dialog id="error">
+            <div class="dialog-container">
+                <p style="width: 90%; word-wrap: break-word;">{{ errorMessage }}</p>
                 <form method="dialog">
                     <button>OK</button>
                 </form>
@@ -75,6 +110,8 @@ export default {
             engines: { 'ffc':{ 'displayName': 'FidelityFX CLI', 'id': 'ffc', 'modes': { 'fsr': { 'displayName': 'FidelityFX Super Resolution', 'id': 'fsr' }, 'c': { 'displayName': 'Cubic', 'id': 'c' }, 'hqc': { 'displayName': 'High Quality Cubic', 'id': 'hqc' } }, 'supports': [ 'upscaling', 'sharpening' ] }, 'ss':{ 'displayName': 'REAL-ESRGAN', 'id': 'ss', 'modes': { 'av3': { 'displayName': 'realesr-animevideov3', 'id': 'av3' }, 'x4plus': { 'displayName': 'realesrgan-x4plus-anime', 'id': 'x4plus' } }, 'supports': [ 'upscaling' ] } },
             fixed: false,
             output: '',
+            finishMessage: '',
+            errorMessage: '',
         }
     },
     methods: {
@@ -83,7 +120,6 @@ export default {
             ipcRenderer.on( 'select' + command, ( event, data ) => {
                 if ( command == 'InputFile' ) {
                     this.upscaleSettings[ 'OutputFile' ] = data[ 'data' ][ 0 ].substring( 0, data[ 'data' ][ 0 ].length - 4 ) + '_upscaled' + data[ 'data' ][ 0 ].substring( data[ 'data' ][ 0 ].length - 4 );
-                    console.log( this.upscaleSettings );
                 }
                 this.upscaleSettings[ command ] = data[ 'data' ];
             } );
@@ -110,6 +146,28 @@ export default {
             ipcRenderer.on( 'progress', function ( evt, message ) {
                 self.output += message;
             });
+
+            ipcRenderer.on( 'finish', function ( evt, message ) {
+                if ( self.errorMessage == '' ) {
+                    self.finishMessage = message;
+                    try {
+                        document.getElementById( 'processing' ).close();
+                        document.getElementById( 'completed' ).showModal();
+                    } catch ( error ) {
+                        console.log( error );
+                    }
+                }
+            } )
+
+            ipcRenderer.on( 'error', function ( evt, message ) {
+                self.errorMessage = message;
+                try {
+                    document.getElementById( 'processing' ).close();
+                    document.getElementById( 'error' ).showModal();
+                } catch ( error ) {
+                    console.log( error );
+                }
+            } )
         },
         showCmdOutput () {
             document.getElementById( 'output' ).classList.toggle( 'shown' );
@@ -124,10 +182,49 @@ export default {
 </script>
 
 <style scoped>
-    .output-box-wrapper {
+    .table-container {
-        margin-top: 5%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    table {
+        border-spacing: 3vw 0;
+    }
+
+    #start {
+        margin-top: 5vh;
+        padding: 1vw 2vw;
+        margin-bottom: 0;
+    }
+
+    button {
+        background-color: var( --input-color );
+        margin-top: 1vw;
+        padding: 0.5vw 1vw;
+        border-radius: 20px;
+        border-style: none;
+        cursor: pointer;
+        transition: all 0.4s;
+    }
+
+    button:hover {
+        background-color: #42b983;
+    }
+
+    input, select {
+        background-color: var( --input-color );
+        margin-bottom: 1vw;
+        margin-top: 0.3vw;
+        padding: 0.5vw 1vw;
+        border-radius: 20px;
+    }
+
+    .output-box-wrapper {
+        margin-top: 3%;
         width: 100%;
-        height: 20%;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -135,11 +232,13 @@ export default {
     }
     .output-box {
         display: none;
-        overflow: scroll;
+        overflow-y: scroll;
-        height: 100%;
+        overflow-x: hidden;
+        word-wrap: normal;
+        height: 20vh;
         width: 60%;
         text-align: justify;
-				white-space: pre-line;
+		white-space: pre-line;
     }
 
     .shown {