diff options
Diffstat (limited to 'share/frontend')
| -rw-r--r-- | share/frontend/imconcat/index.html | 97 |
1 files changed, 65 insertions, 32 deletions
diff --git a/share/frontend/imconcat/index.html b/share/frontend/imconcat/index.html index 89a896b..e244c9e 100644 --- a/share/frontend/imconcat/index.html +++ b/share/frontend/imconcat/index.html @@ -34,24 +34,6 @@ margin-bottom: 10px; background-color: #222; } -// .logo-row{ -// display: inline; -// } -// div.logo-row{ -// max-width: 544px; -// width: 544px; -// } -// img.logo-row{ -// vertical-align: top; -// } -// #logo-scratch{ -// position:relative; -// top: -52px; -// } -// #logos{ -// width: 100%; -// -// } .btn{ margin-top: 10px; background-color: gray; @@ -84,6 +66,15 @@ #final_image > img{ width: 100%; } + #send_to_input{ + margin-top: 10px; + } + .dontshowme{ + display: none; + } + #error_message{ + color: red; + } </style> </head> <body> @@ -97,6 +88,7 @@ <a class="pb_links" href="http://asdf.us/imlandscape">imlandscape</a> <a class="pb_links" href="http://asdf.us/imbreak">imbreak</a> <a class="pb_links" href="http://asdf.us/shader">shader</a> + <a class="pb_links" href="http://asdf.us/ascii">ascii</a> </div> <h1 id="logos"> <a href=""> @@ -109,25 +101,31 @@ <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> - <h4 class="modal-title success">Final Image:</h4> - <h4 class="modal-title failure">Request Failed:</h4> + <h4 class="modal-title success dontshowme modal-info">Final Image:</h4> + <h4 class="modal-title failure dontshowme modal-info">Request Failed:</h4> </div> <div class="modal-body"> - <div id="final_image"> + <div id="final_image" class="dontshowme modal-info"> <img src="img/logo-complete.png" / > </div> - <div id="final_width" class="row col-md-10"> + <div id="error_message" class="row col-md-10 dontshowme modal-info"> + </div> + + <div id="final_width" class="row col-md-10 dontshowme modal-info"> width: <span class="final_value">58</span>px </div> - <div id="final_height" class="row col-md-10"> + <div id="final_height" class="row col-md-10 dontshowme modal-info"> height: <span class="final_value">58</span>px </div> - <div id="final_size" class="row col-md-10"> + <div id="final_size" class="row col-md-10 dontshowme modal-info"> size: <span class="final_value">58</span> </div> - <div id="final_url" class="row col-md-10"> + <div id="final_url" class="row col-md-10 dontshowme modal-info"> url: <input type="text" class="final_value"></input> </div> + <div id="send_to_input" class="row col-md-10 dontshowme modal-info"> + <span id="sendtoinput" style="border: 1px solid gray; cursor: pointer;"> send to input <img src="img/arrow_pointing_left.png"> </span> + </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> @@ -142,14 +140,13 @@ <script type="text/javascript" src="lib/jsonform.js"></script> <script type="text/javascript"> $(document).ready(function(){ - $('.modal').modal(); $('form').jsonForm({ "schema": { - "image_url1": { + "img_url1": { "type": "string", "title": "Image Url 1:" }, - "image_url2": { + "img_url2": { "type": "string", "title": "Image Url 2:" }, @@ -186,29 +183,65 @@ } ], "onSubmitValid": function (values) { - is_generating() $.ajax({ - url: 'some-url', + url: '/im/api/pbconcat', type: 'post', dataType: 'json', data: $('form').serialize(), success: function(data) { showSuccess(data) }, - failure: showFaliure(data) + error: function(data){ + showFailure(data) + } }); } }); function showSuccess(data){ + console.log("in show success function") $('.modal').modal(); } function showFailure(data){ - $('.modal').modal(); + var msg; + switch(data.status) { + case 405: + msg = "This type of request is not allowed." + break; + case 500: + msg = "Problem with the request. Please check your input parameters." + break; + default: + msg = "Problem with request." + } + console.log(msg) + reportError(msg) } function generatingOn(){ }; function generatingOff(){ }; + function reportError(msg){ + $('h4.failure').toggleClass("dontshowme") + $('#error_message').html(msg) + $('#error_message').toggleClass("dontshowme") + generatingOff() + $('.modal').modal(); + } + function resetModal(){ + $('.modal-info').each( + function(el){ + if (!$(this).hasClass("dontshowme")){ + $(this).addClass("dontshowme") + } + } + ) + } + $('.modal-content').find("button").click(function(){ + resetModal() + }) + $('#myModal').on('hidden.bs.modal', function () { + resetModal() + }) }) </script> |