hide excel options + show supported extensions and verification status.

Author: Robin Duda

src/main/resources/templates/index.jade

@@ -15,7 +15,7 @@ html(lang='en')
                     p.text-danger Not connected, #[a(href=".") refresh?]
         div.col-xs-10.col-xs-offset-1.col-lg-4.col-lg-offset-4
             .panel.panel-info
-                .panel-heading#panelheader Upload an .xlsx or .xls file!
+                .panel-heading#panelheader Supported file types: #{context.supportedFiles}!
                 .panel-body
                     div#progress
                         .progress
@@ -32,8 +32,10 @@ html(lang='en')
                                 label.col-lg-3.control-label(for='mapping') Mapping
                                 .col-lg-9
                                     input#index.form-control(type='text', name='mapping', placeholder='default')
-                            .form-group
-                                label.col-lg-3.control-label(for='offset') Title-row (excel)
+                            a.text-center.clickable#excel-options-show
+                                show excel options
+                            .form-group(hidden)#excel-options
+                                label.col-lg-3.control-label(for='offset') Title-row
                                 .col-lg-9
                                     input#offset.form-control(type='text', name='offset', value='1')
                             .form-group

src/main/resources/webroot/css/style.css

@@ -19,7 +19,57 @@ span.glyphicon {
     z-index: 1;
 }
 
+#excel-options-show {
+    width: 100%;
+    text-align: center;
+    display: block;
+    margin-bottom: 8px;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
 #progress-bar {
     animation: 0.2s linear 0s normal none infinite progress-bar-stripes;
     transition: width 0.25s !important;
 }
+
+.jumbotron {
+    background-color: #ffffff32;
+    color: #fff;
+}
+
+body {
+    background:
+            linear-gradient(red, transparent),
+            linear-gradient(to top left, lime, transparent),
+            linear-gradient(to top right, blue, transparent);
+    background-blend-mode: screen;
+    height: 100%;
+    margin: 0;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+
+html {
+    height: 100%;
+}
+
+a:link {
+    color: darkkhaki;
+}
+
+a:visited {
+    color: darkkhaki;
+}
+
+a:hover {
+    color: yellow;
+    text-decoration: none;
+}
+
+a:active {
+    color: cornsilk;
+    text-decoration: none;
+}

src/main/resources/webroot/js/application.js

@@ -6,13 +6,19 @@ websock.onmessage = (e) => {
     console.log(e.data);
 
     if (data.uploadId === uploadId) {
-        $('#panelheader').text('Importing ' + $('#file').val().split('\\').pop() + ' into ' + $('#index').val());
-        $('#progress-bar').css('width', data.progress + '%');
-        $
+
+        if (data.action === "import") {
+            $('#panelheader').text('Importing ' + $('#file').val().split('\\').pop() + ' into ' + $('#index').val());
+            $('#progress-bar').css('width', data.progress + '%');
+        }
+
+        if (data.action === "verify") {
+            $('#panelheader').text('Verifying ' + $('#file').val().split('\\').pop());
+        }
     }
-}
+};
 
-$('#file').change(function () {
+$('#file').change(() => {
     uploadId = Math.random().toString(36).substring(7);
     $('#upload').hide();
     $('#uploadId').val(uploadId);
@@ -25,23 +31,28 @@ $('#file').change(function () {
     }, 500);
 });
 
-$(document).ready(function () {
+$(document).ready(() => {
     var date = new Date();
     $('#progress').hide();
     $('#index').val(date.toLocaleString('en-us', {month: 'long'}).toLowerCase() + '-' + date.getFullYear());
-    $(function () {
+    $(() => {
         $("[data-toggle='tooltip']").tooltip();
     });
 });
 
-$('#close-window').click(function () {
+$('#close-window').click(() => {
     window.close();
 });
 
-$('#add-window').click(function () {
+$('#add-window').click(() => {
     window.open('http://' + location.host, '_blank');
 });
 
-$('#start-page').click(function () {
+$('#start-page').click(() => {
     window.location.href = '/';
+});
+
+$('#excel-options-show').click(() => {
+    $('#excel-options').show();
+    $('#excel-options-show').hide();
 });