feat: now we have a workspace and a desktop for more separeted working

public/index.html

@@ -45,9 +45,14 @@
                 </div>
             </nav>
             <div id="code" class="col-10 code-editor">
-                <div id="main" class="row mt-3">
-
+                <div class="d-flex justify-content-center">
+                    <h4>Workspace</h4>
+                </div>
+                <div id="workspace" class="row m-3" style="background-color: #a3a3a3"></div>
+                <div class="d-flex justify-content-center">
+                    <h4>Área de Trabalho</h4>
                 </div>
+                <div id="main" class="row m-3 m-3" style="background-color: #717171"></div>
                 <div id="functions" class="row">
 
                 </div>
@@ -56,6 +61,35 @@
     </div>
     <!-- Code selects -->
 
+    <!-- Where to place the code modal -->
+    <div class="modal fade" id="workspacePositionModal" tabindex="-1" role="dialog"
+         aria-labelledby="workspacePositionModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="workspacePositionModalLabel">Onde colocar variável ?</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body" id="workspacePositionModalBody">
+                    <div class="form-group">
+                        <label for="workspacePositionModalPositionsSelect">Colocar após: </label>
+                        <select class="form-control" id="workspacePositionModalPositionsSelect">
+                            <!-- To be filled dinamically with options -->
+                        </select>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
+                    <button type="button" class="btn btn-primary" id="workspacePositionModalAddButton">Adicionar
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Where to place the code modal -->
+
     <script src="/javascripts/util/jquery-3.5.0.js"></script>
     <script src="/javascripts/util/jquery.hotkeys.js"></script>
     <script src="/javascripts/bootstrap/bootstrap.bundle.js"></script>
@@ -64,7 +98,9 @@
     <script src="/javascripts/shortcuts/shortcuts-events.js"></script>
     <script src="/javascripts/data-types.js"></script>
     <script src="/javascripts/code-view.js"></script>
-    <script src="/javascripts/modules/variables.js"></script>
+    <script src="/javascripts/modules/variables/util-variables.js"></script>
+    <script src="/javascripts/modules/variables/main-variables.js"></script>
+    <script src="/javascripts/modules/variables/workspace-variables.js"></script>
 </body>
 
 </html>

public/javascripts/code-view.js

@@ -1,4 +1,5 @@
 const $code = $("#code");
+const $workspace = $("#workspace");
 const $main = $("#main");
 const $functions = $("#functions");
 

public/javascripts/modules/variables/main-variables.js

@@ -0,0 +1,29 @@
+const UNIVERSAL_WORKSPACE_ID = "universalworkspaceid";
+const WORKSPACE_COMPONENTS_NAME = "workspaceComponents";
+
+function addVariableToMain({id = null, variable = {name: "", type: "String", value: ""}, afterComponentWithId = null}) {
+    let html = ``;
+    let code = mountCodeFromVariable(variable);
+
+    html += `<div class="col-3 p-2 m-2" style="background-color: #a6a6a6; border: 1px solid #646464" id="workspaceVariableDiv${id}">`;
+    html += `    <input type="hidden" id="workspaceGlobalMenu${id}" name="${WORKSPACE_COMPONENTS_NAME}" value='${code}' ${UNIVERSAL_WORKSPACE_ID}="${id}">`;
+    html += `    <div class="row">`;
+    html += `        <div class="col-10 pt-2" style="border-right: 1px solid #646464;">`;
+    html += `           <h6>${code}</h6>`;
+    html += `        </div>`;
+    html += `        <div class="col-2 pl-2 pr-1" style="border-left: 1px solid #646464;">`;
+    html += `            <button type="button" class="btn btn-danger" onclick="deleteVariableFromMain(${id})">X</button>`;
+    html += `        </div>`;
+    html += `    </div>`;
+    html += `</div>`;
+
+    if (afterComponentWithId == null) {
+        $main.append(html);
+    } else {
+        $(html).insertAfter(`#workspaceVariableDiv${afterComponentWithId}`);
+    }
+}
+
+function deleteVariableFromMain(id = null) {
+    $(`#workspaceVariableDiv${id}`).remove();
+}

public/javascripts/modules/variables/util-variables.js

@@ -0,0 +1,4 @@
+function mountCodeFromVariable(variable = {name: "", type: "String", value: ""}) {
+    let variableBarrier = getVariableTypeBarrier(variable.type);
+    return `${variable.type} ${variable.name} = ${variableBarrier}${variable.value}${variableBarrier}`;
+}

public/javascripts/modules/variables.js

@@ -1,12 +1,23 @@
 let creatingVariable = false;
 
+/*
+* Workspace position modal attributes
+*/
+let $workspacePositionModal = $("#workspacePositionModal");
+let $workspacePositionModalBody = $("#workspacePositionModalBody");
+let $workspacePositionModalPositionsSelect = $("#workspacePositionModalPositionsSelect");
+
+let workspaceToBeAddId = null;
+let workspaceToBeAddVariable = null;
+let workspaceToBeAddAfterComponent = null;
+
 function addVariable(variable = {name: "", type: dataTypes.String, value: ""}, id = null) {
     if (creatingVariable === false) {
         // Blocking future variable creation until finish the current creation
         creatingVariable = true;
 
         let html = "";
-        html += `<div class="col-3" id="variableCreationDiv">`;
+        html += `<div class="col-3 p-2" id="variableCreationDiv">`;
         html += `    <div class="card">`;
         html += `        <div class="card-header">`;
         html += `            <h3>Adicionar variável</h3>`;
@@ -17,7 +28,7 @@ function addVariable(variable = {name: "", type: dataTypes.String, value: ""}, i
         html += `                    <label for="variableName">Nome: </label>`;
         html += `                </div>`;
         html += `                <div class="col-9">`;
-        html += `                    <input id="varibaleName" type="text" value="${variable.name}">`;
+        html += `                    <input id="variableName" type="text" value="${variable.name}">`;
         html += `                </div>`;
         html += `            </div>`;
         html += `            <div class="row">`;
@@ -48,31 +59,29 @@ function addVariable(variable = {name: "", type: dataTypes.String, value: ""}, i
         html += `        <div class="card-footer">`;
         html += `            <div class="row">`;
         html += `                <div class="col-6">`;
-        html += `                    <button type="button" accesskey="c" onclick="cancelAddVariable(${id})">Cancelar</button>`;
+        html += `                    <button type="button" class="btn btn-warning" accesskey="c" onclick="cancelAddVariable(${id})">Cancelar</button>`;
         html += `                </div>`;
         html += `                <div class="col-6">`;
-        html += `                    <button type="button" accesskey="s" onclick="addVariableTocode({id: ${id}})">Salvar</button>`;
+        html += `                    <button type="button" class="btn btn-info" accesskey="s" onclick="addVariableToCode({id: ${id}})">Salvar</button>`;
         html += `                </div>`;
         html += `            </div>`;
         html += `        </div>`;
         html += `    </div>`;
         html += `</div>`;
-        $main.append(html);
+        $workspace.append(html);
     }
 }
 
-function addVariableTocode({id = null}) {
+function addVariableToCode({id = null}) {
     let code = "";
 
     let variable = {
-        name: $("#varibaleName").val(),
+        name: $("#variableName").val(),
         type: $("#variableType").val(),
         value: $("#variableValue").val()
     };
 
-    let variableBarrier = getVariableTypeBarrier(variable.type);
-
-    code += `${variable.type} ${variable.name} = ${variableBarrier}${variable.value}${variableBarrier}`;
+    code = mountCodeFromVariable(variable);
 
     // Sending code to screen
     addCodeToScreen({id: id, code: code, variable: variable});
@@ -114,10 +123,12 @@ function addCodeToScreen({
 
     if (id != null) {
         $(`#mainCode${id}`).html(`<span>${code}</span>`);
+        $(`#globalMenu${id}`).val(code);
         $(`#editCode${id}`).html(`<button type="button" id="editCodeButton${id}" onclick='editVariable(${id}, ${JSON.stringify(variable)})'>Editar</button>`);
         $(`#variableDiv${id}`).show();
     } else {
         html += `<div class="col-3 p-2" id="variableDiv${universalId}">`;
+        html += `    <input type="hidden" id="globalMenu${universalId}" value="${code}"/>`;
         html += `    <div class="card" id="variableCard${universalId}">`;
         html += `        <div class="card-header" id="variableCardHeader${universalId}">`;
         html += `            <h4>Variável</h4>`;
@@ -130,20 +141,67 @@ function addCodeToScreen({
         html += `        </div>`;
         html += `        <div class="card-footer" id="variableCardFooter${universalId}">`;
         html += `            <div class="row">`;
-        html += `                <div class="col-6" id="deleteCode${universalId}">`;
-        html += `                    <button type="button" id="deleteCodeButton${universalId}" onclick="deleteVariable(${universalId})">Deletar</button>`;
+        html += `                <div class="col-3" id="deleteCode${universalId}">`;
+        html += `                    <button type="button" class="btn btn-danger" id="deleteCodeButton${universalId}" onclick="deleteVariable(${universalId})">Deletar</button>`;
         html += `                </div>`;
-        html += `                <div class="col-6" id="editCode${universalId}">`;
-        html += `                    <button type="button" id="editCodeButton${universalId}" onclick='editVariable(${universalId}, ${JSON.stringify(variable)})'>Editar</button>`;
+        html += `                <div class="col-4 align-self-center" id="editCode${universalId}">`;
+        html += `                    <button type="button" class="btn btn-dark" id="editCodeButton${universalId}" onclick='askWhereToPlaceTheVariable(${universalId}, ${JSON.stringify(variable)})'>Posicionar</button>`;
+        html += `                </div>`;
+        html += `                <div class="col-3" id="editCode${universalId}">`;
+        html += `                    <button type="button" class="btn btn-info" id="editCodeButton${universalId}" onclick='editVariable(${universalId}, ${JSON.stringify(variable)})'>Editar</button>`;
         html += `                </div>`;
         html += `            </div>`;
         html += `        </div>`;
         html += `    </div>`;
         html += `</div>`;
 
-        $main.append(html);
+        $workspace.append(html);
     }
 
     // Increasing universal id
     universalId += 1;
-}
+}
+
+function askWhereToPlaceTheVariable(id = null, variable = {name: "", type: "String", value: ""}) {
+    if (buildAllWorkspaceComponentsSelect()) {
+        $workspacePositionModal.modal('toggle');
+        $workspacePositionModalPositionsSelect.focus();
+
+        workspaceToBeAddId = id;
+        workspaceToBeAddVariable = variable;
+    } else {
+        addVariableToMain({id: id, variable: variable});
+    }
+}
+
+function buildAllWorkspaceComponentsSelect() {
+    let allWorkspaceComponents = $(`input[type="hidden"][name="${WORKSPACE_COMPONENTS_NAME}"]`);
+    let selectOptions = [];
+
+    if (allWorkspaceComponents.length > 0) {
+        for (let i = 0; i < allWorkspaceComponents.length; i++) {
+            console.log(allWorkspaceComponents[i].attributes);
+            selectOptions.push(`<option value="${allWorkspaceComponents[i].attributes.universalworkspaceid.value}">${allWorkspaceComponents[i].value}</option>`);
+        }
+
+        $workspacePositionModalPositionsSelect.empty(); // remove old options
+        selectOptions.forEach((object, index, array) => {
+            $workspacePositionModalPositionsSelect.append($(object));
+        })
+
+        return true;
+    } else {
+        return false;
+    }
+}
+
+$("#workspacePositionModalAddButton").click(() => {
+    addVariableToMain({id: workspaceToBeAddId, variable: workspaceToBeAddVariable, afterComponentWithId: $workspacePositionModalPositionsSelect.val()})
+
+    // Reset variables for future use
+    workspaceToBeAddId = null;
+    workspaceToBeAddVariable = null;
+
+    // Hide position modal
+    $workspacePositionModal.modal('toggle');
+});