added github link and removed alerts (#26)

* removing the alerts to display the erro as an element * added github link * fixed error box * refactoring
PrasadG193 · Oct 16, 2019 · 5489352 · 5489352
1 parent 7a37188
commit 5489352
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -27,13 +27,23 @@
     <div class="jumbotron d-flex">
       <img src="https://raw.githubusercontent.com/PrasadG193/yaml2go/master/yaml2go.png" style="height: 102px">
       <div class="infoData">
-        <p class="k2Go">
-          yaml2go
-        </p>
-        <p class="secondaryData">
-          Convert YAML specs to Go type definitions
-        </p>
+        <div>
+          <p class="k2Go">
+            yaml2go
+          </p>
+          <p class="secondaryData">
+            Convert YAML specs to Go type definitions
+          </p>
+        </div>  
       </div>
+      <div id="view-source">
+          <a id="view-source-link" href="https://github.com/PrasadG193/yaml2go"><i class="fa fa-github"></i> &nbsp;View Source</a>
+      </div>
+    </div>
+    <div id="error">
+      <span id="err-span">
+
+      </span>
     </div>
     <div class="container">
       <!-- Example row of columns -->

diff --git a/frontend/index.js b/frontend/index.js
@@ -14,15 +14,17 @@ window.generatorCall=function (){
     'type' : 'POST',
     'data' : yamlData,
     'success' : function(data) { 
+        document.getElementById("error").style.display="none" 
+        document.getElementById("err-span").innerHTML="";     
         go.setValue(data)
     },
     'error' : function(jqXHR, request,error)
     {
       document.getElementById('yamlGenerator').style.border = "1px solid red"
       if (jqXHR.status == 400) {
-        alert('Invalid yaml format')
+        displayError('Invalid yaml format')
       } else {
-        alert('Something went wrong! Please report this to [email protected]')
+        displayError('Something went wrong! Please report this to [email protected]')
       }
     }
   });
@@ -59,3 +61,8 @@ $(document).ready(function(){
         mode: "text/x-go"
     });
 });
+
+function displayError(err){
+  document.getElementById("err-span").innerHTML=err;
+  document.getElementById("error").style.display="block"
+}
diff --git a/frontend/style.css b/frontend/style.css
@@ -96,4 +96,29 @@ button:focus{
 
 .CodeMirror {
   border: 1px solid lavender !important;
+}
+#error{
+  width: 50%;
+  margin: auto;
+  border: 1px solid azure;
+  display: none;
+  padding: 10px;
+  text-align: center;
+  color: red;
+}
+#view-source{
+  margin-top: 50px;
+  margin-left: 470px;
+}
+#view-source-link{
+  border: 1px solid steelblue;
+  padding: 10px;
+  color: steelblue;
+
+}
+#view-source a{
+  text-decoration: none !important;
+}
+#view-source-link:hover{
+  background-color: white;
 }