Skip to content

Commit

Permalink
Merge pull request #90 from ECE444-2023Fall/jhanavi-calendar
Browse files Browse the repository at this point in the history 
Organise Events in Calendar Layout
  • Loading branch information
@pandyah5
pandyah5 authored Nov 12, 2023
2 parents 2274cf8 + aee1121 commit dd0ca9a
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 33 deletions.
1 change: 1 addition & 0 deletions app/main.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ def create_app(debug):
app.register_blueprint(events, url_prefix="/")
app.register_blueprint(search, url_prefix="/")
app.register_blueprint(filter, url_prefix="/")

app.register_blueprint(user_events, url_prefix="/")
app.register_blueprint(account, url_prefix="/")

Expand Down
39 changes: 39 additions & 0 deletions app/static/js/calendar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
document.addEventListener('DOMContentLoaded', function() {
var eventData = JSON.parse(event_data_json.innerText);
console.log(eventData);
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth', // Default view is set to list

views: {
dayGridMonth: {
buttonText: 'Month'
},
dayGridWeek: {
type: 'dayGridWeek',
duration: { weeks: 1 },
buttonText: 'Week'
},
list: {
type: 'listMonth', // This will give you a list view with a monthly format
buttonText: 'Day'
}
},

headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,listMonth'
},

eventClick: function(info) {
eventKey = info.event.extendedProps.key;
window.location.href = `/events/${eventKey}` ;
},

events: eventData,

});

calendar.render();
});
18 changes: 18 additions & 0 deletions app/static/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,7 @@ button .fa-solid{
.form-group{
margin: 10px 0;
}

.wrapper {
display: table;
height: 100%;
Expand Down Expand Up @@ -464,6 +465,23 @@ h1.heading {
text-transform: uppercase
}

.event_data_hide {
display: none;
}
/* Default styles for calendar buttons
.fc-button {
font-size: 16px;
padding: 10px 20px;
}
@media (max-width: 768px) {
.fc-button {
font-size: 14px;
padding: 8px 16px;
}
}
*/

/* Below are the styles for user_organizers_list.html */
.icon-container {
text-align: center;
Expand Down
6 changes: 4 additions & 2 deletions app/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,10 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Aclonica&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=ADLaM+Display&family=Aclonica&display=swap">
<link rel="stylesheet" href="{{ url_for ('static', filename='style.css')}}">

{% import "bootstrap/wtf.html" as wtf %}

{% import "bootstrap/wtf.html" as wtf %}
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.js'></script>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">

</head>
Expand Down
92 changes: 63 additions & 29 deletions app/templates/user_main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
console.log(`Event name ${data[i][0]} -- ${data[i][1]}`)
$('.autocomplete-drop-down').append(`<a class="dropdown-item autocomplete-item" href="/events/${data[i][1]}">${data[i][0]}</a>`)
}
})
});
}
</script>
<div class="page-header">
Expand All @@ -67,6 +67,13 @@ <h1>University of Toronto Events</h1>
<!-- <button class="btn btn-light my-2 my-sm-0" type="submit" name="clear-search-button" value="clear">Clear Search</button> -->
</form>

<!-- Generates a form to toggle between the user views -->
<!-- Form sends a POST request to flask to change the toggle value on the backend-side -->
<!-- And the new toggle value (from the server) is embedded in the button element -->
<form action="{{ url_for('user.toggle', filter=filter, search=search) }}" method="post">
<button id="toggleViewButton" class="btn btn-primary" embedded-toggle-data="{{toggle}}" type="submit">Toggle View</button>
</form>

<!-- <div class="col-xs-12 col-sm-12" style="text-align: center; display: block; position: relative;"> -->
<!-- The text box to display autocomplete suggestions -->
<div class="dropdown-menu autocomplete-drop-down"></div>
Expand All @@ -88,36 +95,63 @@ <h1>University of Toronto Events</h1>
</div>
</div>
{% endblock %}

<div class="content">
<div class="container event-list-container">
<div class="row">
<!-- Displays a list of events in card view, each as a hyperlink with their respective names. -->
{% for key, value in event_data.items() %}
<div class="col-xs-12 col-sm-4">
<div class="card">
<a class="img-card" href="/events/{{ key }}">
<img src="{{ url_for ('static', filename='event-assets/event_banner_' + value.id + '.png')}}" />
</a>
<div class="card-content"> <!-- Ensure all cards displayed are the same size -->
<h4 class="card-title">
<a href="/events/{{ key }}"> {{value.name}}
</a>
</h4>
<p class="">
{{value.short_description}}
</p>
</div>
<div class="card-read-more">
<a href="/events/{{ key }}" class="btn btn-link btn-block">
Read More
</a>
<div id="cardView" style="display: none;">
<div class="content">
<div class="container event-list-container">
<div class="row">
<!-- Displays a list of events in card view, each as a hyperlink with their respective names. -->
{% for key, value in event_data.items() %}
<div class="col-xs-12 col-sm-4">
<div class="card">
<a class="img-card" href="/events/{{ key }}">
<img src="{{ url_for ('static', filename='event-assets/event_banner_' + value.id + '.png')}}" />
</a>
<div class="card-content">
<h4 class="card-title">
<a href="/events/{{ key }}"> {{value.name}} </a>
</h4>
<p class="">
{{value.short_description}}
</p>
</div>
<div class="card-read-more">
<a href="/events/{{ key }}" class="btn btn-link btn-block">
Read More
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div id="calendarView" style="display: block;">
<div class="event_data_hide" id="event_data_json">{{event_data_json}}</div>
<script src="{{ url_for ('static', filename='js/calendar.js')}}"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
<script> //script to toggle between the card view and calendar view
var toggle = document.getElementById("toggleViewButton").getAttribute('embedded-toggle-data');
if (toggle === "True") {
console.log("The page is in calendar Mode")
cardView.style.display = "none";
calendarView.style.display = "block";
}
else {
console.log("The page is in Card Mode")
cardView.style.display = "block";
calendarView.style.display = "none";
};
</script>

</div>
</div>
</div>
{% endblock %}
57 changes: 55 additions & 2 deletions app/user.py
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
from flask import Blueprint, render_template, abort
from flask import Blueprint, render_template, abort, session, redirect, url_for
from sqlalchemy import distinct
from datetime import datetime
import logging
Expand All @@ -9,6 +9,8 @@
from app.search import get_eventids_matching_search_query
from app.filter import filter_for_today_events, filter_for_inperson_events, filter_for_free_events, filter_events_on_category, filter_events_on_event_ids_list, filter_for_past_events
from app.main import db
import json
import random

user = Blueprint("user", __name__)

Expand Down Expand Up @@ -44,8 +46,29 @@ def main(filter="all", search=None):
})
dict_of_events_details = filter_events_on_category(events=dict_of_events_details, category=filter)

return render_template("user_main.html", event_data=dict_of_events_details, search=search, filter=filter, filter_tags=FILTERS)
event_data_json = convert_dictionary_to_JSON(dict_of_events_details)

# NOTE: False - Card view and True - Calendar view
# Default is set to Card view

# Get the toggle value stored in the session
# OR set it to False by default (if session doesn't have a value)
toggle = session.get('toggle_value', False)

return render_template("user_main.html", event_data=dict_of_events_details, event_data_json=event_data_json,
search=search, filter=filter, filter_tags=FILTERS, toggle=toggle)

# This function is used to change the 'toggle_value' value in the session
# while preserving the current filter and search parameters
@user.route('/user/toggle', methods=["POST"])
@user.route("/user/toggle/<filter>", methods=["POST"])
@user.route("/user/toggle/<filter>/<search>", methods=["POST"])
def toggle(filter="all", search=None):
# Toggle the value and store it in the session
session['toggle_value'] = not session.get('toggle_value', True)
return redirect(url_for('user.main', filter=filter, search=search))

# Helper functions for the users main functionalities
def get_all_events_from_database():
events_data = EventDetails.query.all()

Expand All @@ -62,6 +85,36 @@ def get_all_events_from_database():

return dict_of_events_details

def convert_dictionary_to_JSON(events):
event_list = []
colors = ['#dc3545', '#007bff', '#28a745', '#ffc107', '#17a2b8']
#right now set to random initialisation, we will modify this to colour dependent on events

for event_id, event_data in events.items():
name = event_data['name']
start_date = event_data['start_date']
end_date = event_data['end_date']
start_time = event_data['start_time']
end_time = event_data['end_time']

background_color = random.choice(colors)
border_color = background_color

event_info = {
'key' : event_id,
'title': name,
'start': f'{start_date}T{start_time}',
'end': f'{end_date}T{end_time}',
'backgroundColor': background_color,
'borderColor': border_color
}

event_list.append(event_info)

event_data_json = json.dumps(event_list)

logging.info(event_data_json)
return event_data_json

@user.route("/user/organizers", methods=["GET"])
@login_required
Expand Down

0 comments on commit dd0ca9a

Please sign in to comment.