Standardized modal creation

SmearcarDB/static/index.css

@@ -363,7 +363,7 @@ a {
 	background-color: rgba(0, 0, 0, 0.05);
 }
 
-#newLanguage, #editLanguage, #login, #addUser, #writePost {
+/*#newLanguage, #editLanguage, #login, #addUser, #writePost {
 	position: absolute;
 	width: 100%;
 	height: 100%;
@@ -382,6 +382,10 @@ a {
 	grid-template-rows: 6vh 5% 70% auto;
 }
 
+#newLanguage > div {
+	grid-template-rows: 6vh 5% 5% 70% auto;
+}
+
 #login > div {
 	height: 30%;
 	grid-template-rows: 6vh 1fr 1fr 1fr;
@@ -400,7 +404,7 @@ a {
 	grid-template-rows: 6vh 1fr 1fr 8fr 2fr;
 }
 
-#loginUsername, #loginPassword, #addUserUsername, #addUserPassword, #writePostText, #writePostAuthor, #writePostTitle {
+#loginUsername, #loginPassword, #addUserUsername, #addUserPassword, #writePostText, #writePostAuthor, #writePostTitle, #newLanguageSource {
 	margin-left: 5%;
 }
 
@@ -429,7 +433,7 @@ a {
 	grid-row: 2;
 }
 
-#newLanguageName p, #editLanguageName p {
+#newLanguageName p, #editLanguageName p, #newLanguageSource p {
 	display: inline;
 	margin-left: 5%;
 	grid-row: 1;
@@ -441,6 +445,10 @@ a {
 	grid-row: 1;
 }
 
+#newLanguageSource {
+	grid-row: 3;
+}
+
 #newLanguagePhonemes, #editLanguagePhonemes, #loginPassword, #addUserAuthority, #writePostAuthor {
 	grid-row: 3;
 }
@@ -467,12 +475,16 @@ a {
 	font-size: 1.5vh;
 }
 
-#newLanguageSubmit, #editLanguageSubmit, #loginSubmit {
+#newLanguagePhonemes {
+	grid-row: 4;
+}
+
+#editLanguageSubmit, #loginSubmit {
 	display: grid;
 	grid-row: 4;
 }
 
-#addUserSubmit, #addUserSubmit, #writePostSubmit {
+#addUserSubmit, #addUserSubmit, #writePostSubmit, #newLanguageSubmit {
 	grid-row: 5;
 }
 
@@ -483,7 +495,7 @@ a {
 	padding: 1%;
 	text-align: center;
 	cursor: pointer;
-}
+}*/
 
 #header2 {
 	display:grid;
@@ -516,3 +528,35 @@ a {
 #addData, #editData, #addUserButton, #addUpdateButton {
 	display: none;
 }
+
+.modal {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	display: none;
+	opacity: 0;
+	background-color: rgba(0,0,0,0.4);
+}
+
+.modalSubmit {
+	display: block;
+	width: 70%;
+	font-size: 3vh;
+	margin: auto;
+	padding: 1%;
+	text-align: center;
+	cursor: pointer;
+}
+
+.modal input, .modal textarea {
+	margin: 0 auto 0 auto;
+	border: 0;
+	background-color: rgba(0,0,0,0.1);
+	font-family: 'Saira Condensed',  sans-serif;
+	font-size: 100%;
+	font-weight: 300;
+	padding: 1vh;
+	width: 90%;
+	outline: none;
+	resize: none;
+}

SmearcarDB/static/index.js

@@ -5,11 +5,10 @@ var data;
 var languageChart;
 var dataOpen = false;
 var submittable = true;
+var dropOp = {};
+var dropOpStore = {};
 var loginInfo = {};
 
-// var trelloInfo = {};
-
-
 var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
     ["home", "Home", "home"],
     ["bar-chart", "Data Values", "dataValues1"],
@@ -17,10 +16,6 @@ var navi = [ // Array containing navigation items in form [Font-Awesome class na
     ["info", "About", "about"]
 ];
 
-var members = [
-    "Kenneth Jao", "Yaman Qalieh", "Enrico Colon"
-];
-
 var authorityLabels = {
     0: "#0: Full access", 
     1: "#1: Create updates", 
@@ -28,11 +23,137 @@ var authorityLabels = {
     3: "#3: No access"
 };
 
-var dropOp = {
-    //Insert correct
-};
 
-var dropOpStore = {};
+var modals = [
+    {
+        name: "Add Language",
+        modal: "newLanguage",
+        button: "addData",
+        structure: {
+            width: "20%",
+            form: [
+                {
+                    name: "Name",
+                    formType: "input"
+                },
+                {
+                    name: "Source",
+                    formType: "input",
+                    inputType: "file"
+                },
+                {
+                    name: "Phonemes",
+                    formType: "textarea",
+                    height: "25vh"
+                }
+            ]
+        }
+    },
+    {
+        name: "Edit Language",
+        modal: "editLanguage",
+        button: "editData",
+        buttonClick: function() {
+            var langInfo = language(dropOpStore["langSelect"]);
+            document.querySelectorAll("#editLanguageName input")[0].value = langInfo.name;
+            var k = Object.keys(langInfo.phonemes);
+            var v = Object.values(langInfo.phonemes);
+            var str = "";
+            for(var i = 0; i < k.length; i++) {
+                str += k[i] + " " + v[i] + ((i === k.length-1) ? "" : "\n");
+            }
+            document.querySelectorAll("#editLanguagePhonemes textarea")[0].value = str;
+            //modal("editLanguage", true);
+        },
+        structure: {
+            width: "20%",
+            form: [
+                {
+                    name: "Name",
+                    formType: "input"
+                },
+                {
+                    name: "Source",
+                    formType: "input",
+                    inputType: "file"
+                },
+                {
+                    name: "Phonemes",
+                    formType: "textarea",
+                    height: "25vh"
+                }
+            ]
+        }
+    },
+    {
+        name: "Login",
+        modal: "login",
+        button: "signIn",
+        structure: {
+            width: "20%",
+            form: [
+                {
+                    name: "Username",
+                    formType: "input"
+                },
+                {
+                    name: "Password",
+                    formType: "input",
+                    inputType: "password"
+                },
+            ]
+        }
+    },
+    {
+        name: "Add User",
+        modal: "addUser",
+        button: "addUserButton",
+        structure: {
+            width: "20%",
+            form: [
+                {
+                    name: "Username",
+                    formType: "input"
+                },
+                {
+                    name: "Authority",
+                    formType: "input",
+                    inputType: "number"
+                },
+                {
+                    name: "Password",
+                    formType: "input",
+                    inputType: "password"
+                }
+            ]
+        }
+    },
+    {
+        name: "Write Update",
+        modal: "writePost",
+        button: "addUpdateButton",
+        structure: {
+            width: "40%",
+            form: [
+                {
+                    name: "Title",
+                    formType: "input",
+                },
+                {
+                    name: "Author",
+                    formType: "input",
+                },
+                {
+                    name: "Message",
+                    formType: "textarea",
+                    height: "18vh"
+                }
+            ]
+        }
+    },
+];
+
+
 
 function Rnd(item,fig) {
   if(varType(item) === "Array") {
@@ -117,6 +238,7 @@ function getData(updatePage) {
                     dropOpUpdate("langSelect");
                     document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[dropoption='"+(dropOpStore["langSelect"])+"']")[0].click();
                 }
+                generateModals();
             },
             function error(e) {
                 console.log(e);
@@ -258,9 +380,6 @@ function createDrop() {
             var p3 = document.createElement("p");
             p3.className = "transition";
             p3.id = "addData";
-            p3.onclick = function() { // Open add language.
-                modal("newLanguage", true);
-            };
             p3.appendChild(document.createTextNode("Add language..."));
             div2.appendChild(p3); 
         }
@@ -342,7 +461,7 @@ function homeCards() {
                 h2.textContent = postList[i].title;
                 div.appendChild(h2);
                 var h3 = document.createElement("h3");
-                h3.textContent = postList[i].date;
+                h3.textContent = postList[i].author + " - " + postList[i].date;
                 div.appendChild(h3);
                 var p = document.createElement("p");
                 p.innerHTML = postList[i].content;
@@ -426,19 +545,7 @@ function modal(id, open) {
     }   
 }
 
-var modals = ["newLanguage", "editLanguage", "login", "addUser"];
+/*document.querySelectorAll("#addUser > div")[0].onclick = function(event) {
-for(var i = 0; i < modals.length; i++) {
-    let id = modals[i];
-    document.getElementById(modals[i]).onclick = function(event) { 
-        modal(id, false);
-        for(var j = 0; j < document.getElementsByTagName("input"); j++) document.getElementsByTagName("input")[j].value = "";
-        dropOpStore["authority"] = "";
-        document.querySelectorAll(".dropdown[option=authority] .button p")[0].textContent = dropOp["authority"][1];
-    };
-    document.querySelectorAll("#"+modals[i]+" > div")[0].onclick = function(event) { event.stopPropagation(); };
-}
-
-document.querySelectorAll("#addUser > div")[0].onclick = function(event) {
     event.stopPropagation();
     for (var i = 0; i < document.getElementsByClassName("dropdown").length; i++) {
         var opCont = document.querySelectorAll(".dropdown .opCont")[i];
@@ -447,26 +554,84 @@ document.querySelectorAll("#addUser > div")[0].onclick = function(event) {
             opCont.style.display = "none";
         }, 300);
     }
+}*/
+
+
+function generateModals() {
+    while(document.getElementsByClassName("modal").length > 0) {
+        document.getElementsByTagName("body")[0].removeChild(document.getElementsByClassName("modal")[0]);
+    }
+    for(var i = 0; i < modals.length; i++) {
+        let eachModal = modals[i];
+        var overlay = document.createElement("div");
+        overlay.id = modals[i].modal;
+        overlay.className = "transition modal";
+
+        var modalCont = document.createElement("div");
+        modalCont.className = "card transition";
+        modalCont.style.position = "absolute";
+        modalCont.style.paddingBottom = "1vh";
+        modalCont.style.width = modals[i].structure.width;
+        var marg = 50-parseInt(modals[i].structure.width.replace("%",""))/2;
+        modalCont.style.margin = "5% " + marg + "% 0 " + marg+"%";
+        var h2 = document.createElement("h2");
+        h2.appendChild(document.createTextNode(modals[i].name));
+        h2.style.gridRow = "1";
+        modalCont.appendChild(h2);
+
+        var gridTemplate = "6vh ";
+        var form = modals[i].structure.form;
+        for(var j = 0; j < form.length; j++) {
+            gridTemplate += (form[j].formType === "input") ? "7vh " : "auto ";
+            var div = document.createElement("div");
+            div.id = modals[i].modal + form[j].name;
+            div.style.marginLeft = "5%";
+            div.style.gridRow = j+2;
+            var p = document.createElement("p");
+            p.appendChild(document.createTextNode(form[j].name + ":"));
+            var input = document.createElement(form[j].formType);
+            if(form[j].inputType) input.type = form[j].inputType;
+            if(form[j].height) input.style.height = form[j].height; 
+            
+            
+            div.appendChild(p);
+            div.appendChild(input);
+            modalCont.appendChild(div);
+        }
+        gridTemplate += "7vh";
+        modalCont.style.gridTemplateRows = gridTemplate;
+        modalCont.style.gridTemplateColumns = "100%";
+
+        var submit = document.createElement("div");
+        submit.id = modals[i].modal + "Submit";
+        submit.style.gridRow = form.length+2;
+        submit.style.display = "grid";
+        submit.onclick = function() {
+            (eachModal.submitClick)();
+        }
+        var p2 = document.createElement("p");
+        p2.className = "card modalSubmit"; // Refer to modalSubmit CSS to edit.
+        p2.appendChild(document.createTextNode("Submit!"));
+        submit.appendChild(p2);
+        modalCont.appendChild(submit);
+
+        overlay.appendChild(modalCont);
+        document.getElementsByTagName("body")[0].appendChild(overlay);
+        console.log(modals[i].button);
+        document.getElementById(modals[i].button).onclick = function() {
+            if(eachModal.buttonClick) (eachModal.buttonClick)();
+            modal(eachModal.modal, true);
+        }
+
+        overlay.onclick = function(event) {
+            if(this !== event.target) return;
+            for(var i = 0; i < document.getElementsByTagName("input").length; i++) document.getElementsByTagName("input")[i].value = "";
+            modal(eachModal.modal, false);
+        }
+    }
 }
 
-document.getElementById("editData").onclick = function() { // Open edit language.
+modals[0].submitClick = function() { // submitClick for newLanguage.
-    var langInfo = language(dropOpStore["langSelect"]);
-    document.querySelectorAll("#editLanguageName input")[0].value = langInfo.name;
-    var k = Object.keys(langInfo.phonemes);
-    var v = Object.values(langInfo.phonemes);
-    var str = "";
-    for(var i = 0; i < k.length; i++) {
-        str += k[i] + " " + v[i] + ((i === k.length-1) ? "" : "\n");
-    }
-    document.querySelectorAll("#editLanguagePhonemes textarea")[0].value = str;
-    modal("editLanguage", true);
-};
-
-document.getElementById("signIn").onclick = function() { modal("login", true); };
-document.getElementById("addUserButton").onclick = function() { modal("addUser", true); };
-document.getElementById("addUpdateButton").onclick = function() { modal("writePost", true); };
-
-document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // Function for adding a language.
     if(!submittable) return;
     submittable = false;
     var name = document.querySelectorAll("#newLanguageName input")[0].value;
@@ -493,16 +658,30 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // F
         }
         phonemes[info[i][0]] = num;
     }
+
+    var formData = new FormData();
+    var source = document.querySelectorAll("#newLanguageSource input")[0].files;
+    if(source.length === 0 || source[0].type) {
+        alert("Please give a source!");
+        submittable = true;
+        return;
+    }
+    formData.append("source", source[0]);
+    formData.append("name", name);
+    formData.append("phonemes", phonemes);
+    formData.append("editor", loginInfo);
+
     var newLanguage = {
         name: name,
-        source: null,
+        source: sourceData,
         phonemes: phonemes,
         editor: loginInfo
     };
 
-    this.innerText = "Processing...";
+    var p = document.querySelectorAll("#newLanguageSubmit p ")[0]
-    this.style.backgroundColor = "rgba(0,0,0,0.2)";
+    p.innerText = "Processing...";
-    var p = this;
+    p.style.backgroundColor = "rgba(0,0,0,0.2)";
+
     $.ajax({
         url: serverURL + '/server',
         type: 'POST',
@@ -530,7 +709,7 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // F
     );
 };
 
-document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { // Function for submitting edits to language.
+modals[1].submitClick= function() { // submitClick for editLanguage.
     if(!submittable) return;
     var langInfo = language(dropOpStore["langSelect"]);
     submittable = false;
@@ -561,9 +740,9 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { //
     }
     console.log(newPhonemes);
 
-    this.innerText = "Processing...";
+    var p = document.querySelectorAll("#editLanguageSubmit p")[0]
-    this.style.backgroundColor = "rgba(0,0,0,0.2)";
+    p.innerText = "Processing...";
-    var p = this;
+    p.style.backgroundColor = "rgba(0,0,0,0.2)";
 
     var oldPhoneset = new Set(Object.keys(langInfo.phonemes));
     var newPhoneset = new Set(Object.keys(newPhonemes));
@@ -728,7 +907,7 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { //
     }
 };
 
-document.querySelectorAll("#loginSubmit p")[0].onclick = function() {
+modals[2].submitClick = function() { // submitClick for login.
     var info = [
         document.querySelectorAll("#loginUsername input")[0], 
         document.querySelectorAll("#loginPassword input")[0]
@@ -751,16 +930,16 @@ document.querySelectorAll("#loginSubmit p")[0].onclick = function() {
     setTimeout(function() {
         info[0].value = "";
         info[1].value = "";
-    }, 300)
+    }, 300);
 };
 
-document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
+modals[3].submitClick = function() {
     if(!submittable) return;
     submittable = false;
     var info = [
         document.querySelectorAll("#addUserUsername input")[0], 
         document.querySelectorAll("#addUserPassword input")[0],
-        parseInt(dropOpStore["authority"])
+        document.querySelectorAll("#addUserAuthority input")[0]
     ];
     if(info[0].value === "") {
         alert("Please enter in a username!");
@@ -776,9 +955,9 @@ document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
         return;
     }
 
-    this.innerText = "Processing...";
+    var p = document.querySelectorAll("#addUserSubmit p")[0]
-    this.style.backgroundColor = "rgba(0,0,0,0.2)";
+    p.innerText = "Processing...";
-    var p = this;
+    p.style.backgroundColor = "rgba(0,0,0,0.2)";
 
     $.ajax({
         url: serverURL + '/editors',
@@ -787,7 +966,7 @@ document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
         contentType: 'application/json;charset=UTF-8',
         data: JSON.stringify({
             username: info[0].value,
-            authority: info[2],
+            authority: parseInt(info[2]),
             password: info[1].value,
             editor: loginInfo
         })
@@ -814,13 +993,13 @@ document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
     );
 };
 
-document.querySelectorAll("#writePostSubmit p")[0].onclick = function() {
+modals[4].submitClick = function() {
     if(!submittable) return;
     submittable = false;
     var info = [
         document.querySelectorAll("#writePostTitle input")[0], 
         document.querySelectorAll("#writePostAuthor input")[0],
-        document.querySelectorAll("#writePostText textarea")[0]
+        document.querySelectorAll("#writePostMessage textarea")[0]
     ];
     if(info[0].value === "") {
         alert("Please enter in a title!");
@@ -835,11 +1014,12 @@ document.querySelectorAll("#writePostSubmit p")[0].onclick = function() {
         submittable = true;
         return;
     }
-    this.innerText = "Processing...";
-    this.style.backgroundColor = "rgba(0,0,0,0.2)";
-    var p = this;
 
-     $.ajax({
+    var p = document.querySelectorAll("#writePostSubmit p")[0]
+    p.innerText = "Processing...";
+    p.style.backgroundColor = "rgba(0,0,0,0.2)";
+
+    $.ajax({
         url: serverURL + '/updates',
         type: 'POST',
         dataType: "json",
@@ -871,35 +1051,7 @@ document.querySelectorAll("#writePostSubmit p")[0].onclick = function() {
     );
 };
 
-/*function getTrelloCards() {
-    Trello.authorize();
-    var cardArr, listArr, lists;
-    var cards = window.Trello.rest(
-        "GET", "boards/vm2c2IZd/cards",
-        function success() {
-            cardArr = JSON.parse(cards.responseText);
-            lists = window.Trello.rest(
-            "GET", "boards/vm2c2IZd/lists",
-            function success() {
-                listArr = JSON.parse(lists.responseText);
-                for(var i = 0; i < listArr.length; i++) {
-                    var arr = cardArr.filter(function(obj) {
-                        return obj.idList === listArr[i].id;
-                    }).map(a => a.name);
-                    trelloInfo[listArr[i].name] = arr;
-                }
-            },
-            function error(e) {
-                console.log(e);
-            });
-        },
-        function error(e) {
-            console.log(e);
-    });
-}*/
-
 getData();
 homeCards();
 createNav();
 updateNav(navSelect);
-

SmearcarDB/templates/index.html

@@ -21,7 +21,7 @@
     </div>
     <div id="header2">
         <div id="addUpdateButton" class="transition">
-            <p>Write Post</p>
+            <p>Update</p>
             <i class="fa fa-edit"></i>
        </div>
        <div id="signIn" class="transition">
@@ -68,7 +68,7 @@
                 <canvas class="transition"></canvas>
             </div>
         </div>
-        <div id="dataValues2" class="optionContainer">
+        <!-- <div id="dataValues2" class="optionContainer">
             <div class="row">
                 <div id="langSelect" class="card">
                     <h2>Language</h2>
@@ -93,7 +93,7 @@
             <div id="langGraph" class="card">
                 <canvas class="transition"></canvas>
             </div>
-        </div>
+        </div> -->
         <div id="files" class="optionContainer">
             <div class="temp card">
                 <h2>Currently in progress!</h2>
@@ -105,95 +105,6 @@
             </div>
         </div>
     </div>
-    <div id="newLanguage" class="transition">
-        <div class="card transition">
-            <h2>Add Language</h2>
-            <div id="newLanguageName">
-                <p>Name:</p>
-                <input>
-            </div>
-            <div id="newLanguagePhonemes">
-                <p>Phonemes:</p>
-                <textarea></textarea>
-            </div>
-            <div id="newLanguageSubmit">
-                <p class="card">Submit!</p>
-            </div>
-        </div>
-    </div>
-    <div id="editLanguage" class="transition">
-        <div class="card transition">
-            <h2>Edit Language</h2>
-            <div id="editLanguageName">
-                <p>Name:</p>
-                <input>
-            </div>
-            <div id="editLanguagePhonemes">
-                <p>Phonemes:</p>
-                <textarea></textarea>
-            </div>
-            <div id="editLanguageSubmit">
-                <p class="card">Submit!</p>
-            </div>
-        </div>
-    </div>
-    <div id="login" class="transition">
-        <div class="card transition">
-            <h2>Login</h2>
-            <div id="loginUsername">
-                <p>Username:</p>
-                <input>
-            </div>
-            <div id="loginPassword">
-                <p>Password:</p>
-                <input type="password">
-            </div>
-            <div id="loginSubmit">
-                <p class="card">Submit!</p>
-            </div>
-        </div>
-    </div>
-    <div id="addUser" class="transition">
-        <div class="card transition">
-            <h2>Add New User</h2>
-            <div id="addUserUsername">
-                <p>Username:</p>
-                <input>
-            </div>
-            <div id="addUserAuthority">
-                <p>Authority:</p>
-                <div option="authority" class="dropdown transition">
-                </div>
-            </div>
-            <div id="addUserPassword">
-                <p>Password:</p>
-                <input type="password">
-            </div>
-            <div id="addUserSubmit">
-                <p class="card">Submit!</p>
-            </div>
-        </div>
-    </div>
-    <div id="writePost" class="transition">
-        <div class="card transition">
-            <h2>Write New Update</h2>
-            <div id="writePostTitle">
-                <p>Title:</p>
-                <input>
-            </div>
-            <div id="writePostAuthor">
-                <p>Author:</p>
-                <input>
-            </div>
-            <div id="writePostText">
-                <p>Message:</p>
-                <textarea></textarea>
-            </div>
-            <div id="writePostSubmit">
-                <p class="card">Submit!</p>
-            </div>
-        </div>
-    </div>
 </body>
 <script src="{{ url_for('static', filename='index.js') }}"></script>