diff --git a/frontend/index.html b/frontend/index.html
index e5f4b96..b580944 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -48,6 +48,13 @@
+
+
+
+
diff --git a/frontend/index.js b/frontend/index.js
index 87d25c8..843e07e 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -5,21 +5,20 @@ let go = document.getElementById("goGenerator")
let editor = ""
-window.generatorCall=function (){
- let yamlData = document.getElementById("yamlGenerator").value
+window.generatorCall = function () {
+ let yamlData = document.getElementById("yamlGenerator").value
document.getElementById('yamlGenerator').style.border = "1px solid #ced4da"
yamlData = editor.getValue()
$.ajax({
- 'url' : `${URL}`,
- 'type' : 'POST',
- 'data' : yamlData,
- 'success' : function(data) {
+ 'url': `${URL}`,
+ '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)
- {
+ 'error': function (jqXHR, request, error) {
document.getElementById('yamlGenerator').style.border = "1px solid red"
if (jqXHR.status == 400) {
displayError('Invalid yaml format')
@@ -32,30 +31,41 @@ window.generatorCall=function (){
}
//Convert
-document.getElementById("convert").addEventListener('click', ()=>{
- generatorCall()
+document.getElementById("convert").addEventListener('click', () => {
+ console.log('Temp Data')
+ generatorCall()
})
//Clear YAML
-document.getElementById('clearYaml').addEventListener('click',()=>{
+document.getElementById('clearYaml').addEventListener('click', () => {
editor.setValue('')
})
//Clear Go
-document.getElementById('clearGo').addEventListener('click',()=>{
+document.getElementById('clearGo').addEventListener('click', () => {
go.setValue('')
})
-$(document).ready(function(){
- //code here...
- var input = $(".codemirror-textarea")[0];
- var output = $(".codemirror-textarea")[1];
- editor = CodeMirror.fromTextArea(input, {
- mode: "text/x-yaml",
- lineNumbers : true
- });
-
+$(document).ready(function () {
+ //code here...
+ var input = $(".codemirror-textarea")[0];
+ var output = $(".codemirror-textarea")[1];
+ editor = CodeMirror.fromTextArea(input, {
+ mode: "text/x-yaml",
+ lineNumbers: true
+ });
+ editor.setSize(600, 400)
+ go = CodeMirror.fromTextArea(output, {
+ lineNumbers: true,
+ mode: "text/x-go"
+ });
+ go.setSize(600, 400)
+ $('.CodeMirror').resizable({
+ resize: function () {
+ editor.setSize($(this).width(), $(this).height());
+ }
+ });
go = CodeMirror.fromTextArea(output, {
lineNumbers : true,
mode: "text/x-go"
diff --git a/frontend/style.css b/frontend/style.css
index a1b5d79..5afe8d7 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -1,143 +1,143 @@
-html, body, main {
- height:100%;
-}
-
-.apply_space{
- width: 45%;
-}
-
-.button_yaml{
- width: 50px;
- height: 50px;
- top: 50%;
- margin: auto;
- left: 0;
- right: 0;
-}
-
-/* Safari 4.0 - 8.0 */
-@-webkit-keyframes example {
- 0% {border-color: #FF851B;}
- 25% {border-color: #0074D9;}
- 50% {border-color: #F012BE;}
- 75% {border-color: #B10DC9;}
- 100% {border-color: #001f3f;}
-
- }
-
- /* Standard syntax */
- @keyframes example {
- 0% {border-color: #FF851B;}
- 25% {border-color: #0074D9;}
- 50% {border-color: #F012BE;}
- 75% {border-color: #B10DC9;}
- 100% {border-color: #001f3f;}
- }
-
-
-.btn {
- background-color: steelBlue; /* Blue background */
- border: none; /* Remove borders */
- color: white; /* White text */
- cursor: pointer; /* Mouse pointer on hover */
-}
-
-.container{
- max-width: 80%;
- height: 100%;
-}
-
-.coversion{
- width: 21px;
- margin-left: 12px;
- margin-top: 16px;
-}
-.clear_code{
- float: right;
- margin-top: 8px;
-}
-
-.modify{
- display: flex;
- justify-content: center;
-}
-
-.go-float{
- float: right;
-}
-
-.jumbotron {
- padding: 10px 0 !important;
- background-color: azure !important;
-}
-
-
-.infoData{
- margin: 16px 42px;
- width: 50%
-}
-
-.k2Go{
- font-size: 22px;
- color: steelblue;
- font-family: monospace;
- margin-bottom: 4px;
-}
-
-.secondaryData{
- font-size: 15px;
- color: steelblue;
- font-family: monospace;
-}
-
-button:focus{
- outline: none;
- box-shadow: none;
-}
-
-.pointer{
- cursor: pointer;
-}
-
-
-.CodeMirror {
- border: 1px solid lavender !important;
- height: 100%;
-}
-
-#error{
- width: 50%;
- margin: auto;
- border: 1px solid azure;
- display: none;
- padding: 10px;
- text-align: center;
- color: red;
-}
-
-#view-source{
- margin-top: 40px;
- width: 60%;
- text-align: right;
- margin-right: 100px;
-}
-
-#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;
-}
-
-.credits {
- color: gray;
- text-align: center;
-}
+html, body, main {
+ height:100%;
+}
+
+.apply_space{
+ width: 45%;
+}
+
+.button_yaml{
+ width: 50px;
+ height: 50px;
+ top: 50%;
+ margin: auto;
+ left: 0;
+ right: 0;
+}
+
+/* Safari 4.0 - 8.0 */
+@-webkit-keyframes example {
+ 0% {border-color: #FF851B;}
+ 25% {border-color: #0074D9;}
+ 50% {border-color: #F012BE;}
+ 75% {border-color: #B10DC9;}
+ 100% {border-color: #001f3f;}
+
+ }
+
+ /* Standard syntax */
+ @keyframes example {
+ 0% {border-color: #FF851B;}
+ 25% {border-color: #0074D9;}
+ 50% {border-color: #F012BE;}
+ 75% {border-color: #B10DC9;}
+ 100% {border-color: #001f3f;}
+ }
+
+
+.btn {
+ background-color: steelBlue; /* Blue background */
+ border: none; /* Remove borders */
+ color: white; /* White text */
+ cursor: pointer; /* Mouse pointer on hover */
+}
+
+.container{
+ max-width: 80%;
+ height: 100%;
+}
+
+.coversion{
+ width: 21px;
+ margin-left: 12px;
+ margin-top: 16px;
+}
+.clear_code{
+ float: right;
+ margin-top: 8px;
+}
+
+.modify{
+ display: flex;
+ justify-content: center;
+}
+
+.go-float{
+ float: right;
+}
+
+.jumbotron {
+ padding: 10px 0 !important;
+ background-color: azure !important;
+}
+
+
+.infoData{
+ margin: 16px 42px;
+ width: 50%
+}
+
+.k2Go{
+ font-size: 22px;
+ color: steelblue;
+ font-family: monospace;
+ margin-bottom: 4px;
+}
+
+.secondaryData{
+ font-size: 15px;
+ color: steelblue;
+ font-family: monospace;
+}
+
+button:focus{
+ outline: none;
+ box-shadow: none;
+}
+
+.pointer{
+ cursor: pointer;
+}
+
+
+.CodeMirror {
+ border: 1px solid lavender !important;
+ height: 100%;
+}
+
+#error{
+ width: 50%;
+ margin: auto;
+ border: 1px solid azure;
+ display: none;
+ padding: 10px;
+ text-align: center;
+ color: red;
+}
+
+#view-source{
+ margin-top: 40px;
+ width: 60%;
+ text-align: right;
+ margin-right: 100px;
+}
+
+#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;
+}
+
+.credits {
+ color: gray;
+ text-align: center;
+}