Feature/current time cursor (#288)

Author: TamarBerger

app/routers/dayview.py

@@ -1,12 +1,15 @@
 from bisect import bisect_left
 from datetime import datetime, timedelta
-from typing import Iterator, Optional, Tuple, Union
+from typing import Dict, Iterator, Optional, Tuple, Union
 
-from fastapi import APIRouter, Depends, HTTPException, Request, status
+from fastapi import APIRouter, Depends, HTTPException, Request
 
 from app.database.models import Event, User
 from app.dependencies import get_db, templates
 from app.internal import international_days, zodiac
+from app.internal.security.dependencies import current_user
+
+# from app.internal.security.schema import CurrentUser
 from app.routers.user import get_all_user_events
 
 router = APIRouter()
@@ -26,6 +29,50 @@ class DivAttributes:
     CLASS_SIZES = ("title-size-tiny", "title-size-xsmall", "title-size-small")
     LENGTH_SIZE_STEP = (30, 45, 90)
 
+    def _minutes_position(self, minutes: int) -> Dict[str, int]:
+        """
+        Provides info about the minutes value.
+        Returns a Dict that contains-
+        'minutes position': calculates the number of grid bar quarters
+        that the minutes value covers (from 1 to 4).
+        'min_deviation': calculates the 'spare' minutes left out
+        of a grid bar quarter.
+        (used to indicate the accurate current time)
+        """
+        min_minutes = self.MIN_MINUTES
+        max_minutes = self.MAX_MINUTES
+        for i in range(self.GRID_BAR_QUARTER, self.FULL_GRID_BAR + 1):
+            if min_minutes < minutes <= max_minutes:
+                minute_deviation = minutes - (i - 1) * self.MAX_MINUTES
+                return {"min_position": i, "min_deviation": minute_deviation}
+            min_minutes = max_minutes
+            max_minutes += self.MAX_MINUTES
+
+    def _get_position(self, time: datetime) -> int:
+        grid_hour_position = time.hour * self.FULL_GRID_BAR
+        grid_minutes_modifier = self._minutes_position(time.minute)
+        if grid_minutes_modifier is None:
+            grid_minutes_modifier = 0
+        else:
+            grid_minutes_modifier = grid_minutes_modifier["min_position"]
+        return grid_hour_position + grid_minutes_modifier + self.BASE_GRID_BAR
+
+
+class CurrentTimeAttributes(DivAttributes):
+    def __init__(self, date: datetime) -> None:
+        current = datetime.now()
+        self.dayview_date = date.date()
+        self.is_viewed = self._date_is_today()
+        self.grid_position = self._get_position(current) - 1
+        self.sub_grid_position = self._minutes_position(current.minute)
+        self.sub_grid_position = self.sub_grid_position["min_deviation"]
+
+    def _date_is_today(self) -> bool:
+        today = datetime.today().date()
+        return today == self.dayview_date
+
+
+class EventsAttributes(DivAttributes):
     def __init__(
         self,
         event: Event,
@@ -46,23 +93,6 @@ def _check_color(self, color: str) -> str:
             return self.DEFAULT_COLOR
         return color
 
-    def _minutes_position(self, minutes: int) -> Union[int, None]:
-        min_minutes = self.MIN_MINUTES
-        max_minutes = self.MAX_MINUTES
-        for i in range(self.GRID_BAR_QUARTER, self.FULL_GRID_BAR + 1):
-            if min_minutes < minutes <= max_minutes:
-                return i
-            min_minutes = max_minutes
-            max_minutes += 15
-        return None
-
-    def _get_position(self, time: datetime) -> int:
-        grid_hour_position = time.hour * self.FULL_GRID_BAR
-        grid_minutes_modifier = self._minutes_position(time.minute)
-        if grid_minutes_modifier is None:
-            grid_minutes_modifier = 0
-        return grid_hour_position + grid_minutes_modifier + self.BASE_GRID_BAR
-
     def _set_grid_position(self) -> str:
         if self.start_multiday:
             start = self.FIRST_GRID_BAR
@@ -137,12 +167,12 @@ def get_events_and_attributes(
     day: datetime,
     session,
     user_id: int,
-) -> Iterator[Tuple[Event, DivAttributes]]:
+) -> Iterator[Tuple[Event, EventsAttributes]]:
     events = get_all_user_events(session, user_id)
     day_end = day + timedelta(hours=24)
     for event in events:
         if is_specific_time_event_in_day(event, day, day_end):
-            yield event, DivAttributes(event, day)
+            yield event, EventsAttributes(event, day)
 
 
 def get_all_day_events(
@@ -154,51 +184,46 @@ def get_all_day_events(
     day_end = day + timedelta(hours=24)
     for event in events:
         if is_all_day_event_in_day(event=event, day=day, day_end=day_end):
-            yield (event)
+            yield event
 
 
 @router.get("/day/{date}", include_in_schema=False)
 async def dayview(
     request: Request,
     date: str,
-    session=Depends(get_db),
     view="day",
+    session=Depends(get_db),
+    user: User = Depends(current_user),
 ):
-    # TODO: add a login session
-    user = session.query(User).filter_by(username="test_username").first()
-    if not user:
-        error_message = "User not found."
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND,
-            detail=error_message,
-        )
     try:
         day = datetime.strptime(date, "%Y-%m-%d")
     except ValueError as err:
         raise HTTPException(status_code=404, detail=f"{err}")
     zodiac_obj = zodiac.get_zodiac_of_day(session, day)
-    events_n_attrs = get_events_and_attributes(
+    events_with_attrs = get_events_and_attributes(
         day=day,
         session=session,
-        user_id=user.id,
+        user_id=user.user_id,
     )
     all_day_events = get_all_day_events(
         day=day,
         session=session,
-        user_id=user.id,
+        user_id=user.user_id,
     )
+    current_time_with_attrs = CurrentTimeAttributes(date=day)
     inter_day = international_days.get_international_day_per_day(session, day)
     month = day.strftime("%B").upper()
     return templates.TemplateResponse(
         "calendar_day_view.html",
         {
             "request": request,
-            "events": events_n_attrs,
+            "events_and_attrs": events_with_attrs,
             "all_day_events": all_day_events,
             "month": month,
             "day": day.day,
             "international_day": inter_day,
             "zodiac": zodiac_obj,
             "view": view,
+            "current_time": current_time_with_attrs,
         },
     )

app/routers/event.py

@@ -138,7 +138,6 @@ async def create_new_event(
     availability = data.get("availability", "True") == "True"
     location = data["location"]
     all_day = data["event_type"] and data["event_type"] == "on"
-
     vc_link = data.get("vc_link")
     category_id = data.get("category_id")
     privacy = data["privacy"]

app/routers/weekview.py

@@ -8,9 +8,12 @@
 
 from app.database.models import Event, User
 from app.dependencies import TEMPLATES_PATH, get_db
+from app.internal.security.dependencies import current_user
 from app.routers.dayview import (
-    DivAttributes,
+    CurrentTimeAttributes,
+    EventsAttributes,
     dayview,
+    get_all_day_events,
     get_events_and_attributes,
 )
 
@@ -23,12 +26,14 @@
 class DayEventsAndAttrs(NamedTuple):
     day: datetime
     template: Jinja2Templates.TemplateResponse
-    events_and_attrs: Tuple[Event, DivAttributes]
+    events_and_attrs: Tuple[Event, EventsAttributes]
+    current_time_and_attrs: CurrentTimeAttributes
+    all_day_events: Event
 
 
-def get_week_dates(firstday: datetime) -> Iterator[datetime]:
+def get_week_dates(first_day: datetime) -> Iterator[datetime]:
     rest_of_days = [timedelta(days=1) for _ in range(6)]
-    rest_of_days.insert(0, firstday)
+    rest_of_days.insert(0, first_day)
     return accumulate(rest_of_days)
 
 
@@ -43,20 +48,37 @@ async def get_day_events_and_attributes(
         date=day.strftime("%Y-%m-%d"),
         view="week",
         session=session,
+        user=user,
     )
     events_and_attrs = get_events_and_attributes(
         day=day,
         session=session,
-        user_id=user.id,
+        user_id=user.user_id,
+    )
+    current_time_and_attrs = CurrentTimeAttributes(date=day)
+    all_day_events = get_all_day_events(
+        day=day,
+        session=session,
+        user_id=user.user_id,
+    )
+    return DayEventsAndAttrs(
+        day,
+        template,
+        events_and_attrs,
+        current_time_and_attrs,
+        all_day_events,
     )
-    return DayEventsAndAttrs(day, template, events_and_attrs)
 
 
-@router.get("/week/{firstday}")
-async def weekview(request: Request, firstday: str, session=Depends(get_db)):
-    user = session.query(User).filter_by(username="test_username").first()
-    firstday = datetime.strptime(firstday, "%Y-%m-%d")
-    week_days = get_week_dates(firstday)
+@router.get("/week/{first_day}")
+async def weekview(
+    request: Request,
+    first_day: str,
+    session=Depends(get_db),
+    user: User = Depends(current_user),
+):
+    first_day = datetime.strptime(first_day, "%Y-%m-%d")
+    week_days = get_week_dates(first_day)
     week = [
         await get_day_events_and_attributes(request, day, session, user)
         for day in week_days

app/static/dayview.css

@@ -46,7 +46,20 @@ body {
   grid-row: 1 / -1;
   grid-column: 1 / -1;
   display: grid;
-  grid-template-rows: repeat(100, 1fr);
+  grid-template-rows: repeat(100, auto);
+}
+
+.timegrid {
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-rows: repeat(100, auto);
+  z-index: 43;
+}
+
+.sub-timegrid {
+  display: grid;
+  grid-template-rows: repeat(15, auto);
 }
 
 .hour-block {
@@ -164,3 +177,12 @@ body {
   width: 1.2rem;
   height: 1.2rem;
 }
+
+#current_time_cursor {
+  border-bottom: 2.5px dotted rgba(255, 0, 0, 0.808);
+}
+
+#all-day-events {
+  background-color: var(--primary);
+  word-spacing: 0.25em;
+}

app/static/weekview.css

@@ -39,3 +39,7 @@
     margin-left: -2;
     overflow: hidden;
 }
+
+#all_day_event_in_week {
+    color: #EF5454;
+}

app/templates/calendar_day_view.html

@@ -26,16 +26,16 @@
         <span class="fw-bold text-white date-nums">{{day}} / {{month}}</span>
         {% endif %}
     </div>
+    <div id="all-day-events" class="d-flex justify-content-center text-truncate my-0 {{size}} text-light">
+        {% for event in all_day_events %}
+            <a href={{ url_for('eventview', event_id=event.id) }}  title="See full event">{{ event.title }}&nbsp;&nbsp;&nbsp;</a>
+        {% endfor %}
+      </div>
     {% if international_day %}
     <div class="international-days">
         The International days are: "{{ international_day.international_day }}"
     </div>
     {% endif %}
-    <div class="all_day_events">
-        {% for event in all_day_events %}
-        <p class="text-truncate my-0 {{size}}">{{ event.title }}</p>
-        {% endfor %}
-    </div>
     <div class="schedule">
         <div class="container times bg-primeary position">
             {% for hour in range(25)%}
@@ -50,8 +50,16 @@
             </div>
             {% endfor %}
         </div>
+        <div class="timegrid">
+          {% if current_time.is_viewed %}
+            <div class="sub-timegrid" style="grid-row: {{ current_time.grid_position }};">
+                <div id="current_time_cursor" style="grid-row: {{ current_time.sub_grid_position }};">
+                </div>
+            </div>
+          {% endif %}
+        </div>
         <div class="event-grid">
-            {% for event, attr in events %}
+            {% for event, attr in events_and_attrs %}
             <div id="event{{event.id}}"
                  class="d-flex flex-column text-truncate px-2 event"
                  style="background-color: {{attr.color}}; grid-row: {{attr.grid_position}}; max-hight:1.5rem;">
@@ -92,4 +100,4 @@
         crossorigin="anonymous"></script>
 <script type="text/javascript"
         src="{{ url_for('static', path='/eventdisplay.js') }}"></script>
-{% endblock body %}
+{% endblock body %}

app/templates/weekview.html

@@ -12,12 +12,15 @@
     <body>
         <div id="week-view">
             <div id="week-schedule" class="d-flex justify-content-between">
-                {% for day, dayview, events_and_attr in week %}
+                {% for day, dayview, events_and_attrs, current_time, all_day_events in week %}
                 <div class="day-weekview m-0 flex-fill border-start" style="width: 100%;">
-                        <div class="day-name sticky-top">{{ day.strftime('%A').upper()[:3] }}</div>
+                    <div class="day-name sticky-top">{{ day.strftime('%a').upper()}}
+                        {% for event in all_day_events %}
+                        <a href={{ url_for('eventview', event_id=event.id) }} title="See full event" class="text-danger">{{ event.title }}</a>
+                        {% endfor %}
+                    </div>
                         {% set month = day.month %}
                         {% set day = day.day %}
-                        {% set events = events_and_attr%}
                         {% include dayview.template %}
                     </div>
                 {% endfor %}
@@ -35,4 +38,4 @@
         </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
     </body>
-</html>
+</html>

tests/fixtures/client_fixture.py

@@ -10,12 +10,14 @@
     agenda,
     audio,
     categories,
+    dayview,
     event,
     friendview,
     google_connect,
     meds,
     notification,
     profile,
+    weekview,
     weight,
 )
 from app.routers.salary import routes as salary
@@ -138,3 +140,13 @@ def google_connect_test_client():
 
     main.app.dependency_overrides = {}
     Base.metadata.drop_all(bind=test_engine)
+
+
+@pytest.fixture(scope="session")
+def dayview_test_client() -> Iterator[TestClient]:
+    yield from create_test_client(dayview.get_db)
+
+
+@pytest.fixture(scope="session")
+def weekview_test_client() -> Iterator[TestClient]:
+    yield from create_test_client(weekview.get_db)