Merge branch 'release/1.5'

.editorconfig

@@ -0,0 +1,15 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Trailing whitespace is significant in markdown files.
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -84,3 +84,6 @@ typings/
 
 # dotenv environment variables file
 .env
+
+# dist folder
+dist

README.md

@@ -2,7 +2,6 @@
 
 > My superb app
 
-
 ## Dev
 
 ```

drop.js

@@ -0,0 +1,77 @@
+/*jslint node: true, esversion: 6 */
+'use strict';
+
+const dropZoneEl = document.getElementById('dropZone');
+const dropInstructionEl = document.getElementById('dropInstruction');
+
+const readingProgressEl   = document.getElementById('readingProgress');
+const writingProgressEl   = document.getElementById('writingProgress');
+const verifyingProgressEl = document.getElementById('verifyingProgress');
+const statusEl            = document.getElementById('status');
+
+const updateButtonEl = document.getElementById('updateButton');
+const cancelButtonEl = document.getElementById('cancelButton');
+
+const completeOutputEl     = document.getElementById("completeOutput");
+const showCompleteOutputEl = document.getElementById("showCompleteOutputButton");
+
+let hexPath;
+
+function setReaction (string, color, duration = 0.5) {
+	dropZoneEl.style = 'background: ' + color + '; transition: ' + duration + 's;';
+	dropInstructionEl.innerHTML = string;
+}
+
+dropZoneEl.ondragover = () => {
+	return false;
+}
+
+dropZoneEl.ondragenter = (e) => {
+	setReaction("Yep here! That's right! :)", "#4CAF50");
+	return false;
+};
+
+dropZoneEl.ondragleave = () => {
+	setReaction("Oooh!... Come back! :(", "#EEEEEE");
+
+	setTimeout(function(){
+		setReaction("Drag and drop the <code>.hex</code> file here.", "#EEEEEE");
+	}, 3000);
+
+	return false;
+};
+
+dropZoneEl.ondragend = () => {
+	setReaction("Drag and drop the <code>.hex</code> file here.", "#EEEEEE");
+	return false;
+};
+
+dropZoneEl.ondrop = function (e) {
+
+	e.preventDefault();
+	dropZoneEl.style = "background: #EEEEEE; transition: 0.5s;";
+
+	if (e.dataTransfer.files.length != 1) {
+		dropInstructionEl.innerHTML = "Only one file should be dropped. Please try again.";
+		updateButtonEl.disabled = true;
+		return false;
+	}
+
+	const file          = e.dataTransfer.files[0];
+	const fileName      = file.name;
+	const filePath      = file.path;
+	const fileExtension = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);
+
+	if (fileExtension != 'hex') {
+		dropInstructionEl.innerHTML = 'You dropped a <code>' + fileExtension + '</code> file.</br>The file must be a <code>.hex</code> file. Please try again.';
+		updateButtonEl.disabled = true;
+		return false;
+	}
+
+	hexPath = filePath;
+	dropInstructionEl.innerHTML = 'Well done! We are about to upload <code>'+ fileName + '</code></br>You can now click the Update button bellow.';
+	statusEl.innerHTML = 'Click the green button';
+	updateButtonEl.disabled = false;
+
+	return false;
+};

index.css

@@ -6,22 +6,65 @@ body {
 
 body {
 	font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
+	text-align: center;
 }
 
 header {
-	position: absolute;
-	width: 500px;
-	height: 250px;
-	top: 50%;
-	left: 50%;
-	margin-top: -125px;
-	margin-left: -250px;
-	text-align: center;
+	width: 100%;
+	margin-top: 10px;
 }
 
 header h1 {
+	width: 100%;
 	font-size: 60px;
 	font-weight: 100;
 	margin: 0;
 	padding: 0;
 }
+
+section {
+	width: 100% - 20px;
+	height: 200px;
+	background: #EEEEEE;
+	margin: 10px;
+	border-radius: 10px;
+}
+
+#dropZone div {
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+#dropInstruction {
+	display: inline-block;
+	pointer-events: none;
+}
+
+input {
+	border-radius: 10px;
+	border: none;
+	color: white;
+	padding: 15px 32px;
+	text-decoration: none;
+	display: inline-block;
+	font-size: 16px;
+	margin: 4px;
+	margin-top: 10px;
+	cursor: pointer;
+}
+
+input:disabled {
+	background-color: light-grey;
+}
+
+input:enabled {
+	background-color: #4CAF50;
+}
+
+#completeOutput {
+	display: none;
+	text-align: left;
+	font-family: Courier, 'New Courier', monospace;
+	font-size: 12px;
+}

index.html

@@ -1,26 +1,52 @@
 <!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8">
-		<title>Leka Alpha Updater</title>
-		<link rel="stylesheet" href="index.css">
-	</head>
-	<body>
-		<div class="container">
-			<header>
-				<h1>Leka Alpha Updater</h1>
-			</header>
 
-			<section class="main">
+<head>
+	<meta charset="utf-8">
+	<title>Leka Alpha Updater</title>
+	<link rel="stylesheet" href="index.css">
+</head>
 
-				<div id="drop" droppable="foobar" multi >Drag and drop the <code>.hex</code> file bellow</div>
+<body>
 
-				<input id="updateButton" type="button" name="UpdateLeka" value="Update Leka">
+	<div class="container">
 
-			</section>
+		<header>
+			<h1>Leka Alpha Updater</h1>
+		</header>
 
-			<footer></footer>
+		<section id="dropZone" class="main">
+
+			<div id="dropInstruction">Drag and drop the <code>.hex</code> file here.</div>
+
+		</section>
+
+		<progress id="readingProgress" value="0" max="100">0%</progress>
+		<progress id="writingProgress" value="0" max="100">0%</progress>
+		<progress id="verifyingProgress" value="0" max="100">0%</progress>
+
+		<div id="status">Drop file in the area above...</div>
+
+		<input id="updateButton" type="button" name="Update" value="Update Leka" disabled>
+		<input id="cancelButton" type="button" name="Cancel" value="Cancel" disabled>
+
+	</div> <!-- container -->
+
+<!-- 	<div class="container">
+
+		<button id="showCompleteOutputButton">Show complete output...</button>
+
+		<br>
+
+		<div id="completeOutput"></div>
+
+	</div> -->
+
+	<script type="text/javascript" src="drop.js"></script>
+	<script type="text/javascript" src="upload.js"></script>
+
+
+
+</body>
 
-		</div>
-	</body>
 </html>

index.js → main.js

@@ -1,4 +1,6 @@
+/*jslint node: true, esversion: 6 */
 'use strict';
+
 const electron = require('electron');
 
 const app = electron.app;
@@ -18,7 +20,7 @@ function onClosed() {
 function createMainWindow() {
 	const win = new electron.BrowserWindow({
 		width: 600,
-		height: 400
+		height: 430
 	});
 
 	win.loadURL(`file://${__dirname}/index.html`);