Add import users

templates/user/import/index.html

@@ -0,0 +1,111 @@
+{% extends "user/user-base.html" %}
+{% block js_media %}
+<script>
+    function getCookie(name) {
+        let cookieValue = null;
+        if (document.cookie && document.cookie !== '') {
+            const cookies = document.cookie.split(';');
+            for (let i = 0; i < cookies.length; i++) {
+                const cookie = cookies[i].trim();
+                // Does this cookie string begin with the name we want?
+                if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                    break;
+                }
+            }
+        }
+        return cookieValue;
+    }
+    
+    const csrftoken = getCookie('csrftoken');
+
+    $(function() {
+        $('#load_button').on('click', function(e) {
+            e.preventDefault();
+            var files = $('#csv_file').prop('files');
+            if (files.length == 1) {
+                $('#load_button').addClass('disabled');
+            
+                var file = files[0];
+                if (file.type != 'text/csv') {
+                    alert("{{_('Upload CSV only')}}");
+                    return;
+                }
+                var form_data = new FormData();
+                form_data.append('csv_file', file, file.name);
+
+                var xhr = new XMLHttpRequest();
+                xhr.open('POST', "{{url('import_users_post_file')}}", true);
+                xhr.setRequestHeader('X-CSRFToken', csrftoken);
+                xhr.onload = function () {
+                    if (xhr.status === 200) {
+                        var json = JSON.parse(xhr.responseText);
+                        $('#load_button').removeClass('disabled');
+
+                        if (json.done) {
+                            window.import_users = json.data
+                            $('#table_csv').html(json.html);
+                            $('#confirm_button').removeClass('disabled');
+                        }
+                        else {
+                            window.import_users = []
+                            $('#table_csv').html(json.msg);
+                            $('#confirm_button').addClass('disabled');   
+                        }
+                    } else {
+                        alert('Fail to read file.');
+                    }
+                };
+
+                xhr.send(form_data);
+            }
+        })
+
+        $('#confirm_button').on('click', function() {
+            $(this).addClass('disabled');
+            var data = {
+                'users': window.import_users
+            };
+
+            if (!data.users || data.users.length == 0) {
+                alert('No valid users');
+                return;
+            }
+
+            $('#table_csv').html('');
+            $('#log').html('Working...');
+            $.post({
+                url: "{{url('import_users_submit')}}",
+                data: JSON.stringify(data),
+                contentType:"application/json; charset=utf-8",
+                dataType:"text",
+                fail: function() {alert('Fail to import')},
+                success: function(data) {
+                    data = JSON.parse(data);
+                    var msg = data.msg.split('\n');
+                    $('#log').html('')
+                    for (var i of msg) {
+                        $('#log').append(`<p>${i}</p>`);
+                    }
+                }
+            })
+        })
+    });
+</script>
+{% endblock %}
+
+{% block body %}
+{% csrf_token %}
+<center>
+    <label for="csv_file">{{_('User File')}}:</label>
+    <input type="file" accept=".csv" id="csv_file">
+    <a href="{{url('import_users_sample')}}">{{_('Sample')}}</a>
+    <div style="display: inline-flex">
+        <button id="load_button" style="margin-left: 1em">{{_('Load')}}</button>
+        <button id="confirm_button" style="margin-left: 1em" class="disabled">{{_('Import')}}</button>
+    </div>
+</center>
+<br>
+<table id="table_csv" class="table"></table>
+<p style="margin-left: 2em" id="log"></p>
+{% endblock %}

templates/user/import/table_csv.html

@@ -0,0 +1,24 @@
+<thead>
+    <tr>
+        <th>{{_('ID')}}</th>
+        <th>{{_('Username')}}</th>
+        <th>{{_('Password')}}</th>
+        <th>{{_('Name')}}</th>
+        <th>{{_('School')}}</th>
+        <th>{{_('Email')}}</th>
+        <th>{{_('Organizations')}}</th>
+    </tr>
+</thead>
+<tbody>
+    {% for i in data %}
+    <tr>
+        <td>{{loop.index}}</td>
+        <td>{{i.username}}</td>
+        <td>{{i.password}}</td>
+        <td>{{i.name}}</td>
+        <td>{{i.school}}</td>
+        <td>{{i.email}}</td>
+        <td>{{i.organizations}}</td>
+    </tr>
+    {% endfor %}
+</tbody>

templates/user/user-about.html

@@ -13,7 +13,7 @@
             <div class="user-info-card">
                 <div class="user-info">
                     <div class="user-info-header"><i class="fa fa-star {{user.css_class}}"></i> {{_('Rating')}}</div>
-                    <div class="user-info-body {{user.css_class}}">{{user.rating}}</div>
+                    <div class="user-info-body {{user.css_class}}">{{user.rating if user.rating else '-'}}</div>
                 </div>
             </div>
             <div class="user-info-card">
@@ -43,7 +43,7 @@
             <div class="user-info-card">
                 <div class="user-info">
                     <div class="user-info-header" title="{{_('Rank by rating')}}"><i style="color: peru" class="fa fa-globe" ></i> {{_('Rating')}}</div>
-                    <div class="user-info-body">{{rating_rank}}</div>
+                    <div class="user-info-body">{{rating_rank if rating_rank else '-'}}</div>
                 </div>
             </div>
             {% endif %}

templates/user/user-list-tabs.html

@@ -4,4 +4,7 @@
     {{ make_tab('list', 'fa-trophy', url('user_list'), _('Leaderboard')) }}
     {{ make_tab('friends', 'fa-users', url('user_list') + '?friend=true', _('Friends')) }}
     {{ make_tab('organizations', 'fa-university', url('organization_list'), _('Organizations')) }}
+    {% if request.user.is_superuser %}
+        {{ make_tab('import', 'fa-table', url('import_users'), _('Import')) }}
+    {% endif %}
 {% endblock %}