Restructure event page (#498)

* Code and design improvements on event page

* Rename day_badge template to day_card

* Simplify context processors manipulation

* Add (unused) custom-events controller

* Add button/modal to add recipes directly from event overview

* Change text

* Add missing conftest import

app/controllers/daily_plan_recipes.py

@@ -36,7 +36,7 @@ def add_recipe(self, daily_plan_id):
 
         self.daily_recipe = DailyPlanManager(self.daily_plan).add_recipe(self.recipe)
 
-        return redirect(url_for("DailyPlanView:show", id=self.daily_plan.id))
+        return redirect(request.referrer)
 
     @route("daily_plans/add_shopping/<daily_plan_id>", methods=["POST"])
     def add_shopping(self, daily_plan_id):

app/helpers/context_processors.py

@@ -73,3 +73,10 @@ def inflect(word, value):
         raise AttributeError(
             f"Don't know how to inflect {word} with value {value}, teach me!"
         )
+
+
+context_processors = {
+    "human_format_date": human_format_date,
+    "formatted_amount": formatted_amount,
+    "inflect": inflect,
+}

app/models/__init__.py

@@ -64,7 +64,7 @@
     "EventDay",
 ]
 
-all_dict = {
+models_dictionary = {
     "Attendee": Attendee,
     "Conversion": Conversion,
     "DailyPlan": DailyPlan,

app/static/js/controllers/clicker_controller.js

@@ -10,6 +10,8 @@ export default class extends Controller {
   }
 
   activateLink(event) {
+    if (event.target.dataset.bsToggle == "modal") { return; } // prevent this when clicking modal button
+
     var clickable_parent = event.target.closest(".clickable")
     var first_link = clickable_parent.getElementsByTagName("a")[0];
     first_link.click();

app/static/js/controllers/custom_events_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "../../node_modules/@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { "event": String }
+
+  dispatch() {
+    const event = new CustomEvent(this.eventValue)
+    window.dispatchEvent(event)
+  }
+
+}

app/static/js/src/app.js

@@ -70,5 +70,8 @@ window.Stimulus.register('dropzone', DropzoneController)
 import ClassChangeController from "../controllers/class_change_controller.js"
 window.Stimulus.register('class-change', ClassChangeController)
 
+import CustomEventsController from "../controllers/custom_events_controller.js"
+window.Stimulus.register('custom-events', CustomEventsController)
+
 // Turbo
 import * as Turbo from "@hotwired/turbo"

app/templates/base/base.html.j2

@@ -61,9 +61,6 @@
     <!-- custom fonts -->
     <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
 
-
-
-
     {% block links %}{% endblock %}
     {% block style %}{% endblock %}
     {% block scripts %}{% endblock %}

app/templates/daily_plans/_add_recipe_form_options.html.j2

@@ -4,5 +4,5 @@
     {{ options(current_user.visible_recipes) }}
 </optgroup>
 <optgroup label="veřejné recepty">
-    {{ options(public_recipes) }}
-</optgroup>
+    {{ options(Recipe.load_all_public(exclude_mine=True)) }}
+</optgroup>

app/templates/daily_plans/_add_recipe_modal.html.j2

@@ -0,0 +1,29 @@
+<div class="modal fade" id="{{ modal_id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="exampleModalLabel">co si ještě dáme?</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <span class="col-6 mt-2">
+          <form class="form" action="{{ url_for('DailyPlanRecipeView:add_recipe', daily_plan_id=daily_plan.id) }}" method="post">
+              <div class="row">
+                  <div class="col-8">
+                      <select name="recipe_id" id="recipe_select" class="form-control">
+                        {% include "daily_plans/_add_recipe_form_options.html.j2" %}
+                      </select>
+                  </div>
+                  <div class="col">
+                      <input type="submit" class="form-control btn bg-color-primary-action color-white" value="přidat!">
+                  </div>
+              </div>
+          </form>
+        </span>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">zrušit</button>
+      </div>
+    </div>
+  </div>
+</div>

app/templates/daily_plans/_day_card.html.j2

@@ -0,0 +1,64 @@
+{% if not day.is_active %}
+	{% set color = "light-grey" %}
+{% elif day.weekday in ["neděle"]  %}
+	{% set color = "secondary-highlighted" %}
+{% else %}
+	{% set color = "secondary" %}
+{% endif %}
+
+{% if not day.is_active %}
+	{% set class = "opacity-50 d-none d-md-inline-block cursor-default" %}
+{% elif day.is_active %}
+	{% set class = "clickable" %}
+{% endif %}
+
+# set daily_plan = day
+
+<div
+	{% if day.is_active %} data-action="click->clicker#activateLink" {% endif %}
+	class="col-12 col-md p-2 mb-2 mb-md-3 ms-2 me-2 bg-color-{{ color }} rounded text-center text-nobreak {{ class }} lh-2 text-truncate user-select-none">
+
+	<div><h2>{{ link_to(day, class="fs-5") }}</h2></div>
+
+	{% if day.is_active %}
+
+		<ul class="ps-0 ms-0" data-controller="sortable"
+			data-sortable-group-value="daily-plan-recipes"
+			data-sortable-list-id="{{day.id}}">
+
+			{% for daily_recipe in day.daily_recipes %}
+				<li class="text-truncate"
+						data-sortable-update-url="{{ url_for("DailyPlanRecipeView:sort", daily_recipe_id=daily_recipe.id)}}"
+						data-sortable-move-url={{ url_for("DailyPlanRecipeView:change_daily_plan", daily_recipe_id=daily_recipe.id)}}
+						>
+
+					{% if not daily_recipe.recipe.is_shopping %}
+						{{ link_to(daily_recipe.recipe, portion_count=daily_recipe.portion_count, style="user-select: none") }}
+					{% else %}
+						<span class="color-grey"> nákup </span>
+					{% endif %}
+				</li>
+			{% else %}
+				<span class="text-wrap"><em>zatím tu nejsou žádné recepty. nějaký přidej, nebo je přesuň z jiného dne</em></span>
+			{% endfor %}
+
+		</ul>
+
+		<button type="button" class="btn bg-color-primary-action text-white" data-bs-toggle="modal" data-bs-target="#add-recipe-to-{{day.id}}-modal" data-controller="custom-events">
+		  víc jídla! {{ icon("add") }}
+		</button>
+
+	{% endif %}
+
+	{% if day.all_tasks %}
+			<hr>
+	    {% for task in day.all_tasks %}
+	        {{ task }} <br>
+	    {% endfor %}
+	{% endif %}
+
+</div>
+
+{% with modal_id="add-recipe-to-"~day.id~"-modal" %}
+	{% include "daily_plans/_add_recipe_modal.html.j2" %}
+{% endwith %}

app/templates/daily_plans/_navigation.html.j2

@@ -1,4 +1,4 @@
-<h4> {{ link_to(daily_plan.event) }} </h4>
+<h1 class="text-center font-comfortaa"> {{ link_to(daily_plan.event) }} </h1>
 
 <div class="col">
     {% if daily_plan.has_previous %}
@@ -25,4 +25,4 @@
         </a>
     </span>
     {% endif %}
-</div>
+</div>

app/templates/events/_export.html.j2

@@ -1,4 +1,4 @@
-<details class="colored mb-2">
+<details class="colored mb-2" open>
 <summary> exporty </summary>
 <div>
 	<div class="row mb-2">

app/templates/events/_info.html.j2

@@ -1,8 +1,6 @@
 <div id="event-info">
 	<h1 class="text-center font-comfortaa"> {{ event.name }} </h1>
 
-	<hr>
-
 	<div class="row ms-2 me-2">
 		<div class="col-12 col-sm">
 			<div class="row">
@@ -31,8 +29,11 @@
 					{{icon("person")}}&nbsp;<a href="{{ url_for("AttendanceView:index", event_id=event.id) }}" target="_top">pro {{ event.people_count }} lidí </a> &nbsp;({{event.relative_portion_count | round(1) }} celých porcí)
 				</div>
 				<div class="col col mb-1 p-2 info-badge">
-				    {% if event.is_shared %}   <span class="me-2"> {{ icon("shared", cursor_class="cursor-default") }}   </span> {% endif %}
-				    {% if event.is_archived %} <span class="me-2"> {{ icon("archived", cursor_class="cursor-default") }} </span> {% endif %}
+				    {% if event.is_shared %}
+				    	<span class="me-2">{{ icon("shared", cursor_class="cursor-default") }}</span>
+				    {% endif %}
+
+				    {% if event.is_archived %} <span class="me-2"> {{ icon("archived", cursor_class="cursor-default", tooltip="v archivu") }} </span> {% endif %}
 				</div>
 			</div>
 		</div>
@@ -45,4 +46,4 @@
 
 	</div>
 
-</div>
+</div>

app/templates/events/_more_options.html.j2

@@ -2,9 +2,9 @@
     <div class="row" id="event-more-options-button-row">
         <div class="col-12 col-md-3 mb-1">
             {% if event.is_shared %}
-                {% set share_text = "zneveřejnit" + icon("unshare") %}
+                {% set share_text = "zneveřejnit " + icon("unshare") %}
             {% else %}
-                {% set share_text = "zveřejnit" + icon("share") %}
+                {% set share_text = "zveřejnit " + icon("share") %}
             {% endif %}
 
             {{ button_to(url_for('EventView:toggle_shared', id=event.id),
@@ -14,7 +14,7 @@
         <div class="col-12 col-md-3 mb-1">   
             {% if event.can_current_user_share %}
             {{ button_to(url_for('ShareEventView:show_share_with_user', event_id=event.id),
-                class="btn bg-color-secondary-action color-white w-100", value="sdílet dalším lidem" + icon('share')) }}
+                class="btn bg-color-secondary-action color-white w-100", value="sdílet dalším lidem " + icon('share')) }}
             {% else %}
             <button class="btn bg-color-secondary-action color-white w-100" disabled> nemůžete sdílet </button>
             {% endif %}
@@ -27,9 +27,9 @@
 
         <div class="col-12 col-md-3 mb-1">
             {% if not event.is_archived %}
-                {% set archive_text = "archivovat" + icon("archive") %}
+                {% set archive_text = "archivovat " + icon("archive") %}
             {% else %}
-                {% set archive_text = "aktivovat" + icon("unarchive") %}
+                {% set archive_text = "aktivovat " + icon("unarchive") %}
             {% endif %}
 
             {{ button_to(url_for('EventView:toggle_archived', id=event.id),
@@ -38,7 +38,7 @@
 
         <div class="col-12 col-md-3 mb-1">  
             {{ button_to(url_for('EventView:delete', id=event.id),
-                class="btn bg-color-secondary-action color-white w-100 ", value="smazat akci " ~ icon("delete"), confirmation="Opravdu chcete smazat akci?") }}  
+                class="btn bg-color-secondary-action color-white w-100 ", value="smazat akci " ~ icon("delete"), confirmation="opravdu chceš smazat akci?") }}
         </div>
     </div>
-</div>
+</div>

app/templates/events/_other_options.html.j2

@@ -5,7 +5,7 @@
 		<div class="row">
 			<div class="col-12 col-sm-3">
 				{{ button_to(url_for('EventView:duplicate', id=event.id),
-			                 class="btn bg-color-secondary-action color-white w-100", value="zkopírovat" + icon('duplicate')) }}
+			                 class="btn bg-color-secondary-action color-white w-100", value="zkopírovat " + icon('duplicate')) }}
 			</div>
 			<div class="col-12 col-sm-3">
 			</div>
@@ -16,4 +16,4 @@
 		</div>
 	</div>
 </div>
-</details>
+</details>

app/templates/events/_sharing.html.j2

@@ -2,18 +2,17 @@
     <summary > sdílení </summary>
     <div>
         {% for event_role in event.user_roles %}
-        <div class="col-12 row mb-2">
-            <div class="col-3 pt-2">
-            {{ event_role.user.email }} {{ icon(event_role.role) }}
-            </div>
-            <div class="col-2">
-                {% if event.can_current_user_share %}    
-                {{ button_to(url_for('ShareEventView:remove_sharing', event_id=event.id, user_id=event_role.user.id),
-                class="btn", style="color:white; background-color: #A66A6A", value="odebrat práva" ~ icon('delete')) }}
-                {% endif %}
+            <div class="col-12 row mb-2">
+                <div class="col-3 pt-2">
+                {{ event_role.user.email }} {{ icon(event_role.role) }}
+                </div>
+                <div class="col-2">
+                    {% if event.can_current_user_share %}
+                    {{ button_to(url_for('ShareEventView:remove_sharing', event_id=event.id, user_id=event_role.user.id),
+                    class="btn", style="color:white; background-color: #A66A6A", value="odebrat práva" ~ icon('delete')) }}
+                    {% endif %}
+                </div>
             </div>
-        </div>
-        <hr>
         {% endfor %}
 
         {% if event.is_shared %}

app/templates/events/_warnings.html.j2

@@ -5,9 +5,7 @@
 		  or event.no_category_ingredient_recipes
 		  or event.recipes_without_category %}
 
-	<hr>
-
-	<div class="warning m-2 p-2 pb-3 pt-3 text-center">
+	<div class="warning m-2 mt-4 p-2 pb-3 pt-3 text-center">
 		<h3 class="text-uppercase font-comfortaa"> Upozornění </h3>
 
 		{% if event.zero_amount_ingredient_recipes %}

app/templates/events/edit.html.j2

@@ -17,7 +17,7 @@
     {% for week in timetable.all_relevant_days_split_by_weeks %}
         <div class="row">
         {% for day in week %}
-            {% include("daily_plans/_day_badge.html.j2") %}
+            {% include("daily_plans/_day_card.html.j2") %}
         {% endfor %}
         </div>
     {% endfor %}
@@ -43,4 +43,4 @@
     {% include "events/_other_options.html.j2" %}
 {% endif %}
 
-{% endblock %}
+{% endblock %}