首页 发现 帮助
登录
marcelovbcfilho
/
ivprog-acessible
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

feat: now is possible to create, edit and delete variables, standardirized variable types and enable future creations of new types

Marcelo Vilas Boas Correa Filho 5 年之前
父节点
ab979382f9
当前提交
d1fea44029
共有 11 个文件被更改，包括 268 次插入 和 60 次删除
合并视图 显示文件统计
  1. 8 0
      .idea/.gitignore
  2. 6 0
      .idea/encodings.xml
  3. 9 0
      .idea/ivprog-acessible.iml
  4. 9 0
      .idea/misc.xml
  5. 8 0
      .idea/modules.xml
  6. 6 0
      .idea/vcs.xml
  7. 55 51
      public/index.html
  8. 134 9
      public/javascripts/code-view.js
  9. 24 0
      public/javascripts/data-types.js
  10. 7 0
      public/javascripts/util/object-common.js
  11. 2 0
      public/stylesheets/style.css

+ 8 - 0
.idea/.gitignore
查看文件 

@@ -0,0 +1,8 @@
 
+# Default ignored files
 
+/shelf/
 
+/workspace.xml
 
+# Datasource local storage ignored files
 
+/dataSources/
 
+/dataSources.local.xml
 
+# Editor-based HTTP Client requests
 
+/httpRequests/

+ 6 - 0
.idea/encodings.xml
查看文件 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="Encoding" defaultCharsetForPropertiesFiles="UTF-8">
 
+    <file url="PROJECT" charset="UTF-8" />
 
+  </component>
 
+</project>

+ 9 - 0
.idea/ivprog-acessible.iml
查看文件 

@@ -0,0 +1,9 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<module type="JAVA_MODULE" version="4">
 
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
 
+    <exclude-output />
 
+    <content url="file://$MODULE_DIR$" />
 
+    <orderEntry type="inheritedJdk" />
 
+    <orderEntry type="sourceFolder" forTests="false" />
 
+  </component>
 
+</module>

+ 9 - 0
.idea/misc.xml
查看文件 

@@ -0,0 +1,9 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="JavaScriptSettings">
 
+    <option name="languageLevel" value="ES6" />
 
+  </component>
 
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" project-jdk-name="11" project-jdk-type="JavaSDK">
 
+    <output url="file://$PROJECT_DIR$/out" />
 
+  </component>
 
+</project>

+ 8 - 0
.idea/modules.xml
查看文件 

@@ -0,0 +1,8 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectModuleManager">
 
+    <modules>
 
+      <module fileurl="file://$PROJECT_DIR$/.idea/ivprog-acessible.iml" filepath="$PROJECT_DIR$/.idea/ivprog-acessible.iml" />
 
+    </modules>
 
+  </component>
 
+</project>

+ 6 - 0
.idea/vcs.xml
查看文件 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="VcsDirectoryMappings">
 
+    <mapping directory="" vcs="Git" />
 
+  </component>
 
+</project>

+ 55 - 51
public/index.html
查看文件 

@@ -7,64 +7,67 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-    <!-- Shortcut buttons -->
 
-    <div>
 
-        <nav class="navbar navbar-expand-lg navbar-light bg-light">
 
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
-                <ul class="navbar-nav mr-auto">
 
-                    <li class="nav-item active">
 
-                        <button class="nav-link" accesskey="a" title="Voltar para essa lista de atalhos Alt + a" data-toggle="tooltip" data-placement="bottom">Lista de Atalhos<span class="sr-only">Lista de Atalhos</span></a>
 
-                    </li>
 
-                    <li class="nav-item">
 
-                        <a class="nav-link" href="#" title="Ir para a lista de operações Alt + O" data-toggle="tooltip" data-placement="bottom">Lista de Operações<span class="sr-only">Lista de Operações</span></a>
 
-                    </li>
 
-                </ul>
 
-            </div>
 
-        </nav>
 
-    </div>
 
-    <!-- Shortcut buttons -->
 
+<!-- Shortcut buttons -->
 
+<div>
 
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
 
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
+            <ul class="navbar-nav mr-auto">
 
+                <li class="nav-item active">
 
+                    <button class="nav-link" accesskey="s" title="Voltar para essa lista de atalhos Alt + a"
 
+                            data-toggle="tooltip" data-placement="bottom">Lista de Atalhos<span class="sr-only">Lista de Atalhos</span></a>
 
+                </li>
 
+                <li class="nav-item">
 
+                    <a class="nav-link" href="#" title="Ir para a lista de operações Alt + O" data-toggle="tooltip"
 
+                       data-placement="bottom">Lista de Operações<span class="sr-only">Lista de Operações</span></a>
 
+                </li>
 
+            </ul>
 
+        </div>
 
+    </nav>
 
+</div>
 
+<!-- Shortcut buttons -->
 
 
 
-    <!-- Code selects -->
 
-    <div>
 
-        <div class="container-fluid">
 
-            <div class="row">
 
-                <nav class="col-md-2 d-none d-md-block bg-light sidebar">
 
-                    <div class="sidebar-sticky">
 
-                        <ul class="nav flex-column">
 
-                            <li class="nav-item">
 
-                                <div class="dropdown">
 
-                                    <button class="btn btn-secondary dropdown-toggle" accesskey="v" role="Variáveis" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
-                                  Variáveis
 
-                                </button>
 
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 
-                            <button class="dropdown-item" type="button" onclick="addCodeToScreen({code: `variavel`})">Adicionar</button>
 
-                        </div>
 
-            </div>
 
-            </li>
 
-            <li class="nav-item">
 
-                <div class="dropdown">
 
-                    <button class="btn btn-secondary dropdown-toggle" accesskey="o" role="Variáveis" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
-                                      Operações
 
+<!-- Code selects -->
 
+<div>
 
+    <div class="container-fluid">
 
+        <div class="row">
 
+            <nav class="col-md-2 d-none d-md-block bg-light sidebar">
 
+                <div class="sidebar-sticky">
 
+                    <ul class="nav flex-column">
 
+                        <li class="nav-item">
 
+                            <button class="dropdown-item" accesskey="v" type="button"
 
+                                    onclick="addVariable()">Adicionar
 
                             </button>
 
                             </button>
 
-                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 
-                        <button class="dropdown-item" type="button" onclick="addCodeToScreen({code:`if`})">Condição (se)</button>
 
-                        <button class="dropdown-item" type="button" onclick="addCodeToScreen({code:`while`})">Loop enquanto (while)</button>
 
-                    </div>
 
+                        </li>
 
+                        <li class="nav-item">
 
+                            <div class="dropdown">
 
+                                <button class="btn btn-secondary dropdown-toggle" accesskey="o" role="Variáveis"
 
+                                        type="button" id="dropdownMenuButton" data-toggle="dropdown"
 
+                                        aria-haspopup="true" aria-expanded="false">
 
+                                    Operações
 
+                                </button>
 
+                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 
+                                    <button class="dropdown-item" type="button" onclick="addCodeToScreen({code:`if`})">
 
+                                        Condição (se)
 
+                                    </button>
 
+                                    <button class="dropdown-item" type="button"
 
+                                            onclick="addCodeToScreen({code:`while`})">Loop enquanto (while)
 
+                                    </button>
 
+                                </div>
 
+                            </div>
 
+                        </li>
 
+                    </ul>
 
                 </div>
 
                 </div>
 
-            </li>
 
-            </ul>
 
-    </div>
 
-    </nav>
 
-    <div id="code" class="col-10 code-editor">
 
-        <div id="main">
 
+            </nav>
 
+            <div id="code" class="col-10 code-editor">
 
+                <div id="main">
 
 
 
-        </div>
 
-        <div id="functions">
 
+                </div>
 
+                <div id="functions">
 
 
 
+                </div>
 
+            </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
-    </div>
 
-    </div>
 
     <!-- Code selects -->
 
     <!-- Code selects -->
 
 
 
     <script src="/javascripts/util/jquery-3.5.0.js"></script>
 
     <script src="/javascripts/util/jquery-3.5.0.js"></script>
 
@@ -73,6 +76,7 @@
 
     <script src="/javascripts/bootstrap/bootstrap.js"></script>
 
     <script src="/javascripts/bootstrap/bootstrap.js"></script>
 
 
 
     <script src="/javascripts/shortcuts/shortcuts-events.js"></script>
 
     <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/code-view.js"></script>
 
 </body>
 
 </body>

+ 134 - 9
public/javascripts/code-view.js
查看文件 

@@ -2,21 +2,146 @@ const $code = $("#code");
 
 const $main = $("#main");
 
 const $main = $("#main");
 
 const $functions = $("#functions");
 
 const $functions = $("#functions");
 
 
 
+let universalId = 0;
 
+let creatingVariable = false;
 
+
 
+
 
+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="card col-3" id="variableCreationDiv">`;
 
+        html += `    <div class="card-header">`;
 
+        html += `       <h3>Adicionar variável</h3>`;
 
+        html += `    </div>`;
 
+        html += `    <div class="card-body">`;
 
+        html += `        <div class="row">`;
 
+        html += `            <div class="col-3">`;
 
+        html += `                <label for="variableName">Nome: </label>`;
 
+        html += `            </div>`;
 
+        html += `            <div class="col-9">`;
 
+        html += `                <input id="varibaleName" type="text" value="${variable.name}">`;
 
+        html += `            </div>`;
 
+        html += `        </div>`;
 
+        html += `        <div class="row">`;
 
+        html += `            <div class="col-3">`;
 
+        html += `                <label for="variableType">Tipo: </label>`;
 
+        html += `            </div>`;
 
+        html += `            <div class="col-9">`;
 
+        html += `                <select id="variableType">`;
 
+        // Filling data type select with available data types in {data-types.js}
 
+        for (let dataType in dataTypes) {
 
+            if (dataType === variable.type)
 
+                html += `                    <option value="${dataType}" selected>${dataTypes[dataType]}</option>`;
 
+            else
 
+                html += `                    <option value="${dataType}">${dataTypes[dataType]}</option>`;
 
+        }
 
+        html += `                </select>`;
 
+        html += `            </div>`;
 
+        html += `        </div>`;
 
+        html += `        <div class="row">`;
 
+        html += `            <div class="col-3">`;
 
+        html += `                <label for="variableValue">Valor: </label>`;
 
+        html += `            </div>`;
 
+        html += `            <div class="col-9">`;
 
+        html += `                <input id="variableValue" type="text" value="${variable.value}">`;
 
+        html += `            </div>`;
 
+        html += `        </div>`;
 
+        html += `    </div>`;
 
+        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 += `            </div>`;
 
+        html += `            <div class="col-6">`;
 
+        html += `                <button type="button" accesskey="s" onclick="addVariableTocode({id: ${id}})">Salvar</button>`;
 
+        html += `            </div>`;
 
+        html += `        </div>`;
 
+        html += `    </div>`;
 
+        html += `</div>`;
 
+        $code.append(html);
 
+    }
 
+}
 
+
 
+function addVariableTocode({id = null}) {
 
+    let code = "";
 
+
 
+    let variable = {
 
+        name: $("#varibaleName").val(),
 
+        type: $("#variableType").val(),
 
+        value: $("#variableValue").val()
 
+    };
 
+
 
+    let variableBarrier = getVariableTypeBarrier(variable.type);
 
+
 
+    code += `${variable.type} ${variable.name} = ${variableBarrier}${variable.value}${variableBarrier}`;
 
+
 
+    // Sending code to screen
 
+    addCodeToScreen({id: id, code: code, variable: variable});
 
+
 
+    // Removing div form for variable creation
 
+    $("#variableCreationDiv").remove();
 
+
 
+    // Enabling future variable creation
 
+    creatingVariable = false;
 
+}
 
+
 
+function cancelAddVariable(id = null) {
 
+    // Removing div form for variable creation
 
+    $("#variableCreationDiv").remove();
 
+
 
+    if (id != null)
 
+        $(`#codeLine${id}`).show();
 
+
 
+    // Enabling future variable creation
 
+    creatingVariable = false;
 
+}
 
+
 
+function editVariable(id = null, variable = {name: "", type: dataTypes.String, value: ""}) {
 
+    $(`#codeLine${id}`).hide();
 
+    addVariable(variable, id);
 
+}
 
+
 
+function deleteVariable(id = null) {
 
+    if (id != null)
 
+        $(`#codeLine${id}`).remove();
 
+}
 
 
 
 function addCodeToScreen({
 
 function addCodeToScreen({
 
-    code = "Some code",
 
-}) {
 
+                             id = null,
 
+                             code = "Some code",
 
+                             variable = {name: "", type: "String", value: ""}
 
+                         }) {
 
     let html = ``;
 
     let html = ``;
 
-    html += `<div class="row code-line">`;
 
-    html += `   <div class="col-1 line-number" id="mainLine"><span>${getCurrentMainLineNumber()}</span></div>`;
 
-    html += `   <div class="col-11 line-code" id="mainCode"><span>${code}</span></div>`;
 
-    html += `</div>`;
 
-    $code.append(html);
 
+
 
+    if (id != null) {
 
+        $(`#mainCode${id}`).html(`<span>${code}</span>`);
 
+        $(`#editCode${id}`).html(`<button type="button" id="editCodeButton${id}" onclick='editVariable(${id}, ${JSON.stringify(variable)})'>Editar</button>`);
 
+        $(`#codeLine${id}`).show();
 
+    } else {
 
+        html += `<div class="row code-line" id="codeLine${universalId}">`;
 
+        html += `    <div class="col-1 line-number" id="mainLine${universalId}"><span>${getCurrentMainLineNumber()}</span></div>`;
 
+        html += `    <div class="col-7 line-code" id="mainCode${universalId}"><span>${code}</span></div>`;
 
+        html += `    <div class="col-2" id="editCode${universalId}">`;
 
+        html += `        <button type="button" id="editCodeButton${universalId}" onclick='editVariable(${universalId}, ${JSON.stringify(variable)})'>Editar</button>`;
 
+        html += `    </div>`;
 
+        html += `    <div class="col-2" id="deleteCode${universalId}">`;
 
+        html += `        <button type="button" id="deleteCodeButton${universalId}" onclick="deleteVariable(${universalId})">Deletar</button>`;
 
+        html += `    </div>`;
 
+        html += `</div>`;
 
+
 
+        $code.append(html);
 
+    }
 
+
 
+    // Increasing universal id
 
+    universalId += 1;
 
 }
 
 }
 
 
 
 function addFunctionToScreen({
 
 function addFunctionToScreen({
 
-    name = "functionName",
 
-}) {
 
+                                 name = "functionName",
 
+                             }) {
 
 
 
 }
 
 }

+ 24 - 0
public/javascripts/data-types.js
查看文件 

@@ -0,0 +1,24 @@
 
+const dataTypes = {
 
+    String: 'String',
 
+    byte: 'Byte',
 
+    short: 'Short',
 
+    int: 'Int',
 
+    long: 'Long',
 
+    float: 'Float',
 
+    double: 'Double',
 
+    boolean: 'Boolean',
 
+    char: 'Char'
 
+};
 
+
 
+function getVariableTypeBarrier(dataType) {
 
+    console.log("Getting barrier for type: " + dataType);
 
+
 
+    switch (dataType) {
 
+        case 'String':
 
+            return "\"";
 
+        case 'char':
 
+            return "\'";
 
+        default:
 
+            return "";
 
+    }
 
+}

+ 7 - 0
public/javascripts/util/object-common.js
查看文件 

@@ -0,0 +1,7 @@
 
+Object.size = function(obj) {
 
+    let size = 0, key;
 
+    for (key in obj) {
 
+        if (obj.hasOwnProperty(key)) size++;
 
+    }
 
+    return size;
 
+};

+ 2 - 0
public/stylesheets/style.css
查看文件 

@@ -7,6 +7,8 @@ a {
 
     color: #00B7FF;
 
     color: #00B7FF;
 
 }
 
 }
 
 
 
+.code-editor {}
 
+
 
 .code-line {
 
 .code-line {
 
     border: 1px;
 
     border: 1px;
 
     border-style: solid;
 
     border-style: solid;