create base page for shifts admin

members/static/css/admin/manage_regular_shifts.css

+.header {
+    margin: 1rem 0;
+}
+
+.login_area {
+    position: absolute;
+    display: block;
+    top: 5px;
+    right: 5px;
+}
+
+#back_to_admin_index {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+}
+
+/* Search members area */
+#search_member_area {
+    margin-top: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#search_member_form_area {
+    display:flex;
+    align-items: center;
+}
+
+#search_member_form {
+    margin-left: 10px;
+}
+
+.search_member_results_area {
+    margin-top: 15px;
+    display: flex;
+    align-items: center;
+}
+
+.search_results_text {
+    min-width: 150px;
+}
+
+.search_member_results {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.btn_possible_member {
+    margin: 0.5rem 1rem;
+}
\ No newline at end of file

members/static/css/admin/manage_shift_registrations.css

@@ -38,7 +38,7 @@
     padding-top: 0.755em;
 }
 
-/* Search membres area */
+/* Search members area */
 #search_member_area {
     margin-top: 30px;
     display: flex;

members/static/js/admin/manage_makeups.js

@@ -358,7 +358,7 @@ $(document).ready(function() {
             error: function() {
                 err = {
                     msg: "erreur serveur lors de la recherche de membres",
-                    ctx: 'confirm_movement.search_members'
+                    ctx: 'members.admin.manage_makeups.search_members'
                 };
                 report_JS_error(err, 'stock');
 

members/static/js/admin/manage_regular_shifts.js

+/**
+ * Display the members from the search result
+ */
+ function display_possible_members() {
+    $('.search_member_results_area').show();
+    $('.search_member_results').empty();
+    $('.btn_possible_member').off();
+
+    let no_result = true;
+
+    if (members_search_results.length > 0) {
+        for (member of members_search_results) {
+            $(".search_results_text").show();
+            no_result = false;
+
+            // Display results (possible members) as buttons
+            var member_button = '<button class="btn--success btn_possible_member" member_id="'
+                + member.id + '">'
+                + member.barcode_base + ' - ' + member.name
+                + '</button>';
+
+            $('.search_member_results').append(member_button);
+        }
+
+        // Set action on member button click
+        $('.btn_possible_member').on('click', function() {
+            for (member of members_search_results) {
+                if (member.id == $(this).attr('member_id')) {
+                    selected_member = member;
+
+                    // TODO display member
+
+                    $('.search_member_results').empty();
+                    $('.search_member_results_area').hide();
+                    $('#search_member_input').val('');
+
+                    break;
+                }
+            }
+        });
+    }
+
+    if (no_result === true) {
+        $(".search_results_text").hide();
+        $('.search_member_results').html(`<p>
+            <i>Aucun résultat ! Vérifiez votre recherche...</i>
+        </p>`);
+    }
+}
+
+$(document).ready(function() {
+    if (coop_is_connected()) {
+        $.ajaxSetup({ headers: { "X-CSRFToken": getCookie('csrftoken') } });
+
+        $(".page_content").show();
+    } else {
+        $(".page_content").hide();
+    }
+
+    $('#back_to_admin_index').on('click', function() {
+        let base_location = window.location.href.split("manage_regular_shifts")[0].slice(0, -1);
+        window.location.assign(base_location);
+    });
+
+    // Set action to search for the member
+    $('#search_member_form').submit(function() {
+        let search_str = $('#search_member_input').val();
+
+        $.ajax({
+            url: '/members/search/' + search_str,
+            dataType : 'json',
+            success: function(data) {
+                members_search_results = [];
+
+                for (member of data.res) {
+                    if (member.is_member || member.is_associated_people) {
+                        members_search_results.push(member);
+                    }
+                }
+
+                display_possible_members();
+            },
+            error: function() {
+                err = {
+                    msg: "erreur serveur lors de la recherche de membres",
+                    ctx: 'members.admin.manage_regular_shifts.search_members'
+                };
+                report_JS_error(err, 'members.admin');
+
+                $.notify("Erreur lors de la recherche de membre, il faut ré-essayer plus tard...", {
+                    globalPosition:"top right",
+                    className: "error"
+                });
+            }
+        });
+    });
+});

templates/members/admin/manage_regular_shifts.html

@@ -15,7 +15,38 @@
 
 {% block content %}
 
-<p>Hello</p>
+<div class="page_body">
+  <div id="back_to_admin_index">
+    <button type="button" class="btn--danger"><i class="fas fa-arrow-left"></i>&nbsp; Retour</button>
+  </div>
+  <div class="login_area">
+    {% include "common/conn_admin.html" %}
+  </div>
+  <div class="header txtcenter">
+    <h1>Gestion des Créneaux</h1>
+  </div>
+  
+  <div class="page_content">
+    <div id="search_member_area">
+      <div id="search_member_form_area">
+        <h4>Rechercher un.e membre</h4>
+        <form id="search_member_form" action="javascript:;" method="post">
+          <input type="text" id="search_member_input" value="" placeholder="Nom ou numéro du coop..." required>
+          <button type="submit" class="btn--primary" id="search_member_button">Recherche</button>
+        </form>
+      </div>
+      <div class="search_member_results_area" style="display:none;">
+        <div class="search_results_text">
+          <p><i>Choisissez parmi les membres trouvés :</i></p>
+        </div>
+        <div class="search_member_results"></div>
+      </div>
+    </div>
+    
+  </div>
+
+  <div id="templates" style="display:none;"></div>
+</div>
 
 
 <script src='{% static "js/all_common.js" %}?v='></script>