Add files via upload

Susannnnnna · Feb 22, 2024 · eb381c2 · eb381c2
1 parent ea637c6
commit eb381c2
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 0 deletions.
diff --git a/bootstrap.min.css b/bootstrap.min.css
diff --git a/clear-form.js b/clear-form.js
@@ -0,0 +1,4 @@
+function clearForm(){
+    // Find form by id and clean all data inside the form
+    document.getElementById("myForm").reset();
+}
diff --git a/copy-text.js b/copy-text.js
@@ -0,0 +1,16 @@
+function copyToCplipboard(elementId) {
+    // Create variable in which you save text to copy
+    var text = document.getElementById(elementId).innerText;
+    // Create temp variable, needed to save copied text
+    var temp = document.createElement("textarea");
+    // Add text to temp element
+    temp.value = text;
+    // Add temp element to document - it is needed to copy tekst
+    document.body.appendChild(temp);
+    // Select text in temp document
+    temp.select();
+    // Copy data to storage
+    document.execCommand("copy");
+    // Delete temp element
+    document.body.removeChild(temp);
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- https://bootswatch.com/slate/ -->
+    <link href="./css/bootstrap.min.css" rel="stylesheet" >
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SQL Queries Generator</title>
+</head>
+<body>
+
+    <h2>SQL Queries Generator</h2>
+
+    <button type="button" class="btn btn-outline-warning btn-lg" onclick="generateSQL()">Generate SQL Queries</button>
+    <button type="button" class="btn btn-outline-success btn-lg" onclick="copyToCplipboard('textToCopy')">Copy SQL</button>
+    <button type="button" class="btn btn-outline-danger btn-lg" onclick="clearForm('myForm')">Clear data</button>
+    <button type="button" class="btn btn-outline-info btn-lg" onclick="fillFormWithSampleDataSingleRow()">Sample data - SINGLE ROW</button>
+    <button type="button" class="btn btn-outline-info btn-lg" onclick="fillFormWithSampleDataMultiRows()">Sample data - MULTI ROWS</button>
+
+    <!-- <h3>Generated Queries</h3> -->
+    <div id="textToCopy">
+        <h4>
+            <pre id="result"></pre>
+        </h4>
+    </div>
+
+    <form id="myForm">
+        <div class="row">
+
+            <div class="col">
+                <label for="operation" class="form-label mt-4">Choose operation</label>
+                <select class="form-select" id="operation">
+                    <option value="insert">Insert</option>
+                    <option value="update">Update</option>
+                    <option value="delete">Delete</option>
+                </select>
+            </div>
+
+            <div class="col">
+                <label class="form-label mt-4" for="tableName">Table Name</label>
+                <input type="text" class="form-control" placeholder="TableNameExample" id="tableName">
+            </div>
+
+            <div class="col">
+                <label class="form-label mt-4" for="primaryKey">Primary Key (for Update/Delete)</label>
+                <input type="text" class="form-control" placeholder="exampleId" id="primaryKey">
+            </div>
+
+        </div>
+
+        <div class="form-group">
+            <label class="col-form-label mt-4" for="columnNames">Column Names (comma-separated)</label>
+            <input type="text" class="form-control" placeholder="ColumnName1, ColumnName2, ColumnName3" id="columnNames">
+        </div>
+
+        <div class="form-group">
+            <label for="dataValues" class="form-label mt-4">Data Values (values for data separated with ',' values for rows separated with ';')</label>
+            <textarea class="form-control" id="dataValues" placeholder="Value1, Value2, Value3, Value4" rows="5"></textarea>
+        </div>
+
+        <div class="form-group">
+            <label for="primaryKeyValue" class="form-label mt-4">Primary Key Value (for Update/Delete)</label>
+            <textarea class="form-control" id="primaryKeyValue" placeholder="1" rows="5"></textarea>
+            <br>
+        </div>
+    </form>
+
+
+    <script src="./js/sql-generate.js"></script>
+    <script src="./js/copy-text.js"></script>
+    <script src="./js/clear-form.js"></script>
+    <script src="./js/sample-data-filling.js"></script>
+
+</body>
+</html>
diff --git a/sample-data-filling.js b/sample-data-filling.js
@@ -0,0 +1,16 @@
+function fillFormWithSampleDataSingleRow() {
+    document.getElementById("tableName").value = "TableExampleName";
+    document.getElementById("columnNames").value = "ColumnName1,ColumnName2,ColumnName3,ColumnName4";
+    document.getElementById("dataValues").value = "Value1,Value2,Value3,Value4";
+    document.getElementById("primaryKey").value = "exampleId";
+    document.getElementById("primaryKeyValue").value = "1";
+}
+
+
+function fillFormWithSampleDataMultiRows() {
+    document.getElementById("tableName").value = "TableExampleName";
+    document.getElementById("columnNames").value = "ColumnName1,ColumnName2";
+    document.getElementById("dataValues").value = "Value1,Value2;\nValue5,Value6;\nValue9,Value10";
+    document.getElementById("primaryKey").value = "exampleId";
+    document.getElementById("primaryKeyValue").value = "1;\n2;\n3";
+}
diff --git a/sql-generate.js b/sql-generate.js
@@ -0,0 +1,34 @@
+function generateSQL() {
+    // Get variables from form
+    var operation = document.getElementById("operation").value;
+    var tableName = document.getElementById("tableName").value;
+    var columnNames = document.getElementById("columnNames").value.split(",").map(name => name.trim());
+    var dataValues = document.getElementById("dataValues").value.split(";");
+    var primaryKey = document.getElementById("primaryKey").value;
+    var primaryKeyValue = document.getElementById("primaryKeyValue").value.split(";").map(id => id.trim());
+    var sqlQuery = "";
+    let setClause = "";
+
+    // Depending on the case, separate and transform the data get from the form 
+    switch (operation) {
+        case "insert":
+            dataValues.forEach((row, index) => {
+                const values = row.split(",").map(value => `'${value.trim()}'`).join(",");
+                sqlQuery += `INSERT INTO ${tableName} (${columnNames}) VALUES (${values})${index < dataValues.length - 1 ? ',' : ';'}\n`;
+            });
+            break;
+        case "update":
+            dataValues.forEach((row, index) => {
+                const values = row.split(",").map(value => value.trim());
+                let setClause = columnNames.map((columnName, columnIndex) => `${columnName}='${values[columnIndex]}'`).join(",");
+                sqlQuery += `UPDATE ${tableName} SET ${setClause} WHERE ${primaryKey} = '${primaryKeyValue[index]}';\n`;
+            });
+            break;
+        case "delete":
+            sqlQuery = `DELETE FROM ${tableName} WHERE ${primaryKey} IN (${primaryKeyValue})`;
+            break;
+    }
+
+    // Send prepared data
+    document.getElementById("result").innerText = sqlQuery;
+}