From e4975011cdee1e884aaed19a63a46d1f00b17800 Mon Sep 17 00:00:00 2001
From: Patrick Mayr <patrick@fet.at>
Date: Wed, 5 Jan 2022 22:49:43 +0000
Subject: [PATCH] add subNav and edit Button

---
 fet2020/templates/members/index.html          | 202 ++++++++++--------
 .../members/partials/_member_details.html     |  16 --
 2 files changed, 111 insertions(+), 107 deletions(-)

diff --git a/fet2020/templates/members/index.html b/fet2020/templates/members/index.html
index 158319a2..9670f064 100644
--- a/fet2020/templates/members/index.html
+++ b/fet2020/templates/members/index.html
@@ -7,85 +7,132 @@
 	<!-- Main Content -->
 	<main class="container mx-auto w-full px-4 mt-8 flex-1">
 		<h1 class="page-title">Über uns</h1>
-		<div class="sm:flex sm:flex-row justify-center my-8">
-			<aside class="flex-none max-w-min sm:mr-8">
-				<div class="fixed sm:sticky top-0 sm:top-4 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
-					x-show="showModal || $screen('sm')"
-					x-transition:enter="transition duration-300 ease-out"
-					x-transition:enter-start="opacity-0"
-					x-transition:enter-end="opacity-100"
-					x-transition:leave="transition duration-150 ease-in"
-					x-transition:leave-start="opacity-100"
-					x-transition:leave-end="opacity-0"
-				>
-					<div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 sm:p-0 bg-white sm:bg-transparent rounded sm:rounded-none"
-						@click.outside="showModal = false"
-						x-show="showModal || $screen('sm')"
-						x-transition:enter="transition transform ease-out duration-300"
-						x-transition:enter-start="scale-110 opacity-0"
-						x-transition:enter-end="scale-100 opacity-100"
-						x-transition:leave="transition transform ease-in duration-150"
-						x-transition:leave-start="scale-100 opacity-100"
-						x-transition:leave-end="scale-110 opacity-0"
-					>
-						<div class="flex justify-between items-center mb-2 sm:hidden">
-							<h2 class="text-gray-800 sm:section-title sm_section-title-margins sm:w-full">
-								<span class="mr-1 text-gray-400 sm:hidden">
-									<i class="fa-solid fa-bars"></i>
-								</span>
-								Kategorien
-							</h2>
-							<div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 sm:hidden cursor-pointer" @click="showModal = false">
-								<i class="far fa-times"></i>
-							</div>
-						</div>
-						<ul class="sideBarNav">
+        <div class="sm:flex sm:flex-row justify-center my-8">
+            <aside class="flex-none max-w-min sm:mr-8">
+                <div class="fixed sm:sticky top-0 sm:top-4 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
+                    x-show="showModal || $screen('sm')"
+                    x-transition:enter="transition duration-300 ease-out"
+                    x-transition:enter-start="opacity-0"
+                    x-transition:enter-end="opacity-100"
+                    x-transition:leave="transition duration-150 ease-in"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0"
+                >
+                    <div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 sm:p-0 bg-white sm:bg-transparent rounded sm:rounded-none"
+                        @click.outside="showModal = false"
+                        x-show="showModal || $screen('sm')"
+                        x-transition:enter="transition transform ease-out duration-300"
+                        x-transition:enter-start="scale-110 opacity-0"
+                        x-transition:enter-end="scale-100 opacity-100"
+                        x-transition:leave="transition transform ease-in duration-150"
+                        x-transition:leave-start="scale-100 opacity-100"
+                        x-transition:leave-end="scale-110 opacity-0"
+                    >
+                        <div class="flex justify-between items-center mb-2 sm:hidden">
+                            <h2 class="text-gray-800 sm:section-title sm_section-title-margins sm:w-full">
+                                <span class="mr-1 text-gray-400 sm:hidden">
+                                    <i class="fa-solid fa-bars"></i>
+                                </span>
+                                Kategorien
+                            </h2>
+                            <div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 sm:hidden cursor-pointer" @click="showModal = false">
+                                <i class="far fa-times"></i>
+                            </div>
+                        </div>
+                        <ul class="sideBarNav">
                             {% for job in pinned_job_groups %}
-                                <li class="{% if job.slug in request.path %} active {% endif %}">
-                                    <a href="{% url 'jobs' job.slug %}">{{ job.name|softhyphen|safe }}</a>
+                                <li class="{% if job.slug in request.path %}active{% endif %}">
+                                    <a href="{% url 'jobs' job.slug %}">{{ job.name }}</a>
                                 </li>
+
+                                {% if job.slug in job_members.0.job.job_group.slug %}
+                                    {% regroup job_members by job.name as all_jobmem_list %}
+
+                                    <ul id="scrollspy-subNav">
+                                        {% for jobmem in all_jobmem_list %}
+                                            <li class="{% if jobmem.grouper %}active{% endif %}">
+                                                <a href="#{{ jobmem.list.0.job.slug }}">{{ jobmem.grouper }}</a>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                {% endif %}
                             {% endfor %}
 
                             {% for job in unpinned_job_groups %}
-                                <li class="{% if job.slug in request.path %} active {% endif %}">
-                                    <a href="{% url 'jobs' job.slug %}">{{ job.name|softhyphen|safe }}</a>
+                                <li class="{% if job.slug in request.path %}active{% endif %}">
+                                    <a href="{% url 'jobs' job.slug %}">{{ job.name }}</a>
                                 </li>
+
+                                {% if job.slug in job_members.0.job.job_group.slug %}
+                                    {% regroup job_members by job.name as all_jobmem_list %}
+
+                                    <ul id="scrollspy-subNav">
+                                        {% for jobmem in all_jobmem_list %}
+                                            <li class="{% if jobmem.grouper %}active{% endif %}">
+                                                <a href="#{{ jobmem.list.0.job.slug }}">{{ jobmem.grouper }}</a>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                {% endif %}
                             {% endfor %}
 
                             <hr class="">
 
-                            <li class="{% if 'pension' in request.path %} active {% endif %}">
+                            <li class="{% if 'pension' in request.path %}active{% endif %}">
                                 <a href="{% url 'members_view' 'pension' %}">Pension</a>
                             </li>
-                       
-                            <li class="{% if '/members/' == request.path %} active {% endif %}">
+
+                            <li class="{% if '/members/' == request.path %}active{% endif %}">
                                 <a href="{% url 'members' %}">Alle Mitglieder</a>
                             </li>
-                       
-							<li class="active"><a href="#">Studienkommission</a></li>
-							<ul id="scrollspy-subNav">
-								<li class="active"><a href="#stuko-computational-science">Studienkommission Computational Science</a></li>
-								<li><a href="#stuko-et">Studienkommission ET</a></li>
-								<li><a href="#stuko-ulg">Studienkommission Universitätslehrgänge</a></li>
-							</ul>
 
-							<li class="internalLI"><a href="#"><i class="fa-regular fa-pen-to-square mr-1"></i>Bearbeiten</a></li>
-						</ul>
-					</div>
-				</div>
-				<button id="modal-trigger-1" class="trigger fixed bottom-4 right-4 bg-proprietary-darker text-blue-50 shadow-lg text-2xl rounded sm:hidden" 
-					@click="showModal = true"
-					x-show="!showModal && !$screen('sm')"
-					x-transition:enter="transition duration-100 ease-in"
-					x-transition:enter-start="opacity-0"
-					x-transition:enter-end="opacity-100"
-					x-transition:leave="transition duration-100 ease-out"
-					x-transition:leave-start="opacity-100"
-					x-transition:leave-end="opacity-0"
-				>
-				<i class="fa-solid fa-bars px-2 py-1"></i>
-				</button>
-			</aside>
+                            {% if request.user.is_authenticated %}
+                                {% if pinned_job_groups%}
+                                    {% for job in pinned_job_groups %}
+                                        {% if job.slug in request.path %}
+                                            <li class="internalLI">
+                                                <a href="{% url 'admin:members_jobgroup_change' job.id %}">
+                                                    <i class="fa-regular fa-pen-to-square mr-1"></i>{{ job.name|softhyphen|safe }} bearbeiten
+                                                </a>
+                                            </li>
+                                        {% endif %}
+                                    {% endfor %}
+                                {% elif unpinned_job_groups %}
+                                    {% for job in unpinned_job_groups %}
+                                        {% if job.slug in request.path %}
+                                            <li class="internalLI">
+                                                <a href="{% url 'admin:members_jobgroup_change' job.id %}">
+                                                    <i class="fa-regular fa-pen-to-square mr-1"></i>{{ job.name|softhyphen|safe }} bearbeiten
+                                                </a>
+                                            </li>
+                                        {% endif %}
+                                    {% endfor %}
+                                {% endif %}
+
+                                {% if fs_info %}
+                                    <li class="internalLI">
+                                        <a href="{% url 'admin:core_customflatpage_change' fs_info.id %}">
+                                            <i class="fa-regular fa-pen-to-square mr-1"></i>Fachschaft-Text bearbeiten
+                                        </a>
+                                    </li>
+                                {% endif %}
+                            {% endif %}
+                        </ul>
+                    </div>
+                </div>
+                <button id="modal-trigger-1" class="trigger fixed bottom-4 right-4 bg-proprietary-darker text-blue-50 shadow-lg text-2xl rounded sm:hidden" 
+                    @click="showModal = true"
+                    x-show="!showModal && !$screen('sm')"
+                    x-transition:enter="transition duration-100 ease-in"
+                    x-transition:enter-start="opacity-0"
+                    x-transition:enter-end="opacity-100"
+                    x-transition:leave="transition duration-100 ease-out"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0"
+                >
+                <i class="fa-solid fa-bars px-2 py-1"></i>
+                </button>
+            </aside>
 
 			<section class="flex-grow max-w-prose my-8 sm:my-0">
                 {% if description %}
@@ -106,12 +153,6 @@
                         <div class="db-page-content text-gray-800">
                             {{ fs_info.content|safe }}
                         </div>
-
-                        {% if request.user.is_authenticated %}
-                            <hr>
-                            <a href="{% url 'admin:core_customflatpage_change' fs_info.id %}">Fachschaft-Text bearbeiten</a>
-                            <hr>
-                        {% endif %}
                     {% endif %}
 
                     <article class="members-article">
@@ -130,25 +171,4 @@
 			</section>
 		</div>
 	</main>
-
-    <script src="{% static 'js/gumshoe@5.1.1.js' %}"></script>
-    <script src="{% static 'js/smooth-scroll@16.1.2.js' %}"></script>
-    <script src="{% static 'js/toolkit-screen@1.0.0.js' %}" defer></script>
-	<script defer src="{% static 'js/alpinejs@3.2.2.js' %}"></script>
-	<script defer src="{% static 'js/scripts.js' %}"></script>
-
-	<script>
-		var spy = new Gumshoe('#scrollspy-subNav a', {
-			/***** Scrollspy *****/ // Active classes
-			navClass: 'font-semibold', // applied to the nav list item
-		});
-
-		/***** SmoothScroll *****/ // All animations will take exactly 500ms
-		var scroll = new SmoothScroll('a[href*="#"]', {
-			speed: 750,
-			speedAsDuration: true,
-			easing: 'easeInOutQuad'
-		});
-	</script>
-
 {% endblock %}
diff --git a/fet2020/templates/members/partials/_member_details.html b/fet2020/templates/members/partials/_member_details.html
index 7dac3549..37f10c9a 100644
--- a/fet2020/templates/members/partials/_member_details.html
+++ b/fet2020/templates/members/partials/_member_details.html
@@ -55,19 +55,3 @@
         {% endif %}
     </div>
 </section>
-
-<script src="{% static 'gumshoe.js' %}"></script>
-<script src="{% static 'smooth-scroll.js' %}"></script>
-<script>
-    var spy = new Gumshoe('#scrollspy-subNav a', {
-        /***** Scrollspy *****/ // Active classes
-        navClass: 'font-semibold', // applied to the nav list item
-    });
-
-    /***** SmoothScroll *****/ // All animations will take exactly 500ms
-    var scroll = new SmoothScroll('a[href*="#"]', {
-        speed: 750,
-        speedAsDuration: true,
-        easing: 'easeInOutQuad'
-    });
-</script>