Ste #46 - Show success image on config screen on save click

build-canaries · Jan 21, 2015 · a410514 · a410514
1 parent 7291d33
commit a410514
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 10 deletions.
diff --git a/resources/public/config.html b/resources/public/config.html
@@ -89,10 +89,11 @@ <h2 class="visuallyhidden">Success</h2>
             <button id="save-success-text" type="submit">Save</button>
         </form>
         <form class="success-image-form">
-            <label for="success-image">Success image url</label>
-            <input id="success-image" type="text" name="success-image">
+            <label for="success-image-url">Success image url</label>
+            <input id="success-image-url" type="text" name="success-image">
             <button id="save-success-image" type="submit">Save</button>
         </form>
+        <img id="success-image" class="hidden config-success-image"/>
     </section><!-- /#timing -->
 </div><!-- /#main -->
 

diff --git a/src/js/config/adminView.js b/src/js/config/adminView.js
@@ -25,7 +25,7 @@ module.exports = function (controller) {
             $('#include-all').click(view.projView().includeAll)
             $('#exclude-all').click(view.projView().excludeAll)
             $('#save-success-text').click(function(e) { e.preventDefault(); saveSuccessText(controller) })
-            $('#save-success-image').click(function(e) { e.preventDefault(); saveSuccessImageUrl(controller) })
+            $('#save-success-image').click(function(e) { e.preventDefault(); saveAndShowSuccessImage(controller) })
 
             $("#cctray-url").keypress(function(e) {
                 if(e.which == 13) {
@@ -71,7 +71,7 @@ function load(postLoadCallback) {
     var settings = config.load()
     $('#cctray-url').val(settings.cctray)
     $('#success-text').val(settings.successText)
-    $('#success-image').val(settings.successImageUrl)
+    $('#success-image-url').val(settings.successImageUrl)
     if (config.hasCctray()) {
         postLoadCallback()
     }
@@ -87,11 +87,22 @@ function saveSuccessText(controller) {
     controller.saveSuccessText(text)
 }
 
-function saveSuccessImageUrl(controller) {
-    var imageUrl = $('#success-image').val().trim()
+function saveAndShowSuccessImage(controller) {
+    var imageUrl = $('#success-image-url').val().trim()
+    saveSuccessImageUrl(controller, imageUrl)
+    showSuccessImage(imageUrl)
+}
+
+function saveSuccessImageUrl(controller, imageUrl) {
     controller.saveSuccessImageUrl(imageUrl)
 }
 
+function showSuccessImage(imageUrl) {
+    var successImage = $('#success-image');
+    successImage.attr('src', imageUrl)
+    successImage.removeClass('hidden')
+}
+
 function monitorPage(controller) {
     saveSuccessText(controller)
 }

diff --git a/src/scss/_config.scss b/src/scss/_config.scss
@@ -44,6 +44,15 @@
   margin-top: 0.5em;
 }
 
+.config-success-image {
+  width: 10em;
+  margin-top: 1em;
+}
+
+.success-image-form {
+  margin-top: 1em;
+}
+
 .config-button {
   font-size: 1em;
   border-radius: 10px;

diff --git a/test/js/config/adminViewTest.js b/test/js/config/adminViewTest.js
@@ -123,15 +123,16 @@ describe('view logic', function () {
         describe('success image', function () {
             beforeEach(function () {
                 $('body').append('<form>' +
-                   '<input id="success-image" type=text name=success-image/>' +
+                   '<input id="success-image-url" type=text name=success-image/>' +
                    '<input id="save-success-image" class=button type=button>' +
-                   '</form>')
+                   '</form> ' +
+                   '<img id="success-image" src="" class="hidden"/>')
             })
 
             it('saves', function () {
                 spyOn(window.location, 'replace')
                 view.init()
-                $('#success-image').val('expected-image-url')
+                $('#success-image-url').val('expected-image-url')
                 spyOn(adminController, 'saveSuccessImageUrl')
 
                 $('#save-success-image').click()
@@ -141,12 +142,25 @@ describe('view logic', function () {
 
             it('loads', function () {
                 localStorage.setItem('successImageUrl', 'any old value')
-                var successImageUrl = $('#success-image')
+                var successImageUrl = $('#success-image-url')
 
                 view.init()
 
                 expect(successImageUrl.val()).toBe('any old value')
             })
+
+            it('shows image on the page', function () {
+                spyOn(window.location, 'replace')
+                view.init()
+                $('#success-image-url').val('expected-image-url')
+                spyOn(adminController, 'saveSuccessImageUrl')
+
+                $('#save-success-image').click()
+
+                var imageSrc = $('#success-image').attr('src');
+                expect(imageSrc).toBe('expected-image-url')
+                expect($('#success-image')).not.toHaveClass('hidden')
+            })
         })
     })