.

2022-05-25 16:50:18 +01:00
parent 41a09ea30d
commit 5701c8d613
30 changed files with 402 additions and 226 deletions
@@ -0,0 +1,137 @@
+
+{% extends 'generic/base.html' %}
+
+
+{% block content %}
+    {% if created_users %}
+        <div class="alert alert-success">
+            The follow users have been created: {{created_users}}
+        </div>
+    {% endif %}
+
+    {% if error %}
+        <div class="alert alert-warning">
+            {{error}}
+        </div>
+    {% endif %}
+
+    {% if message %}
+        <div class="alert alert-info">
+            {{message}}
+        </div>
+    {% endif %}
+    <p>
+        Prepare a spreadsheet with the following format.
+
+        <table>
+
+            <tr><th>First name</th><th>Last name</th><th>Email</th><th>Grade</th><th>Supervisor</th><th>Supervisor email</th></tr>
+            <tr><td>name 1</td><td>last name 1</td><td>email 1</td><td>grade 1</td><td>supervisor 1</td><td>Supervisor email 1</td></tr>
+        </table>
+
+
+        On your spreadsheet then "copy" the data (not including header), come to this page, put focus on the &lt;textarea> box and "paste" the text in. In some instance (large data sets) this might take a couple of seconds.
+        Once there simply click the button and check the users that will be created below.
+    </p>
+    <textarea id="csv" placeholder="Paste users content here" style="width: 300px; height: 100px;"></textarea><br/>
+    <input type="button" value="Load Data" onclick="createTable()" >
+
+
+    <div>
+        <ul id="users-list">
+        </ul>
+    </div>
+
+    <form id="user-list-form" method="post">
+        {% csrf_token %}
+        <input type="text" name="usersjson" id="user-list-json" hidden>
+        <input type="submit" id="submit-users" name="submit-users" value="Create Users" style="display: none">
+    </form>
+
+
+    <script>
+        function createTable() {
+
+            // Get the data
+            var excelData = document.getElementById('csv').value.trim()+"\n";
+
+            // split into rows
+            excelRow = excelData.split(String.fromCharCode(10));
+
+            // split rows into columns
+            for (i=0; i<excelRow.length; i++) {
+                excelRow[i] = excelRow[i].split(String.fromCharCode(9));
+
+            }
+
+            // start to create the HTML table
+            var myTable = document.createElement("table");
+            var myTbody = document.createElement("tbody");
+
+            // Loop over the rows
+
+            var elements = ["first_name", "last_name", "grade", "email", "supervisor_name", "supervisor_email"];
+            var users = [];
+
+            $("#users-list").empty();
+            $("#users-list").append(`The following users will be created. "undefined" fields will be left blank. Emails will be used as usernames.`);
+
+            for (i=0; i<excelRow.length - 1; i++) {
+                //users[i] = {};
+                user = {};
+
+                // create a row in the HTML table
+                var myRow = document.createElement("tr");
+
+                // Loop over the columns and add TD to the TR
+                for (j=0; j<excelRow[i].length; j++) {
+                    // Loop over the row columns
+                    if (excelRow[i][j].length != 0) {
+                        var myCell = document.createElement("td");
+                        myCell.innerHTML = excelRow[i][j];
+                        //users[i][elements[j]] = excelRow[i][j];
+                        user[elements[j]] = excelRow[i][j];
+                    }
+                    myRow.appendChild(myCell);
+                }
+                myTbody.appendChild(myRow);
+                users.push(user)
+                $("#users-list").append(`<li>Name: ${user.first_name} ${user.last_name}<br/>Email: ${user.email}<br/>Grade: ${user.grade}<br/>Supervisor: ${user.supervisor_name}<br/>Supervisor email: ${user.supervisor_email}</li>`)
+            }
+            myTable.appendChild(myTbody);
+
+            $("#users-list").append(`${users.length} users to create.`)
+
+            $("#user-list-json").val(JSON.stringify(users));
+            $("#submit-users").show();
+
+            // If we want to show the table
+            //document.body.appendChild(myTable);
+
+
+
+        }
+    </script>
+    <style>
+        table{
+            {% comment %} border-collapse: collapse; {% endcomment %}
+            border: 1px solid silver;
+        }
+        tr{
+            border-bottom: 1px solid silver;
+        }
+        td, th {
+            border: 1px solid silver;
+            padding: 2px;
+            padding-left: 4px;
+            padding-right: 4px;
+
+        }
+
+        #users-list li {
+            border: 1px solid blue;
+            margin: 10px;
+            padding: 10px;
+        }
+    </style>
+{% endblock content  %}