Applied css styling to Calendar pages via bootstrap

parent 47d664cb
......@@ -7,7 +7,7 @@ class Course(models.Model):
section = models.CharField(max_length=3)
def __str__(self):
return '{} {}'.format(self.code, self.section)
return '{}-{}'.format(self.code, self.section)
class Assignment(models.Model):
......
from django import forms
from .models import Event
class EventForm(forms.ModelForm):
class Meta:
model = Event
fields = '__all__'
\ No newline at end of file
# Generated by Django 4.1.7 on 2023-05-04 09:30
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('widget_calendar', '0008_alter_event_course'),
]
operations = [
migrations.AlterField(
model_name='location',
name='mode',
field=models.CharField(choices=[('Onsite', 'Onsite'), ('Online', 'Online'), ('Hybrid', 'Hybrid')], default='Onsite', max_length=6),
),
]
# Generated by Django 4.1.7 on 2023-05-04 09:33
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('widget_calendar', '0009_alter_location_mode'),
]
operations = [
migrations.AlterField(
model_name='location',
name='mode',
field=models.CharField(choices=[('onsite', 'Onsite'), ('online', 'Online'), ('hybrid', 'Hybrid')], default='onsite', max_length=6),
),
]
# Generated by Django 4.1.7 on 2023-05-10 06:28
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('widget_calendar', '0010_alter_location_mode'),
]
operations = [
migrations.AlterField(
model_name='event',
name='activity',
field=models.CharField(default='', max_length=255),
),
]
from django.db import models
from django.utils.translation import gettext_lazy as _
from assignments import models as assignments_models
from django.urls import reverse
class Location(models.Model):
......@@ -17,11 +18,11 @@ class Location(models.Model):
venue = models.TextField(default='')
def __str__(self):
return '{} ({})'.format(self.venue, self.mode)
return '{} - {}'.format(self.mode, self.venue)
class Event(models.Model):
activity = models.CharField(default='', max_length=255)
target_datetime = models.DateTimeField(default='')
activity = models.TextField(default='')
estimated_hours = models.FloatField(default='')
location = models.ForeignKey(Location, on_delete=models.CASCADE)
course = models.ForeignKey(assignments_models.Course, on_delete=models.CASCADE)
......@@ -31,4 +32,16 @@ class Event(models.Model):
self.activity,
self.target_datetime.strftime("%m/%d/%y"),
self.target_datetime.strftime("%I:%M %p"),
)
\ No newline at end of file
)
def formatted_course(self):
return '{} {}-{}'.format(self.course.code, self.course.title, self.course.section)
def formatted_date(self):
return '{}'.format(self.target_datetime.strftime("%m/%d/%y"))
def formatted_time(self):
return '{}'.format(self.target_datetime.strftime("%I:%M %p"))
def get_absolute_url(self):
return reverse('widget_calendar:event-details', kwargs={'pk': self.pk})
\ No newline at end of file
......@@ -2,5 +2,47 @@
{% load static %}
{% block title %}Widget's Calendar of Activities{% endblock %}
{% block content %}
<h1>Widget's Calendar of Activities</h1>
<div class="row">
<div class="col-3 text-center text-white" style="background-color:#052c65">
<br>
<br>
<img src="{% static 'calendar_icon.png'%}" class="img-fluid" width="100" height="100">
<br>
<br>
<h2>Calendar</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>© Jenica e-Sports</p>
</div>
<div class="col-9 text-center">
<div class="row p-5 text-center" style="background-color:#e3e4e6">
<h1 class="display-3"style="font-size:60px; color:#052c65">Widget's Calendar of Activities</h1>
</div>
<br>
<br>
{% for object in activities %}
<a href="{{ object.get_absolute_url }}" class="link-dark; display-3" style="font-size:18px; color:#052c65">
{{ object.activity }}</a>
<br>
{% endfor %}
<br><br>
<button type="button" class="btn btn-dark" style="background-color:#e3e4e6">
<a href="/calendar/events/add/" class="link-dark">New Activity</a>
</button>
<br>
<br>
<br>
<button type="button" class="btn" style="background-color:#052c65">
<a href="/dashboard/" class="link-light">Dashboard</a>
</button> &nbsp;
<button type="button" class="btn" style="background-color:#334277">
<a href="/announcements/" class="link-light">Announcement Board</a>
</button> &nbsp;
<button type="button" class="btn" style="background-color:#425086">
<a href="/forum/" class="link-light">Forum</a>
</button> &nbsp;
<button type="button" class="btn" style="background-color:#515e96">
<a href="/assignments/" class="link-light">Assignments</a>
</button>
</div>
</div>
{% endblock %}s
\ No newline at end of file
{% extends 'base.html' %}
{% load static %}
{% block title %}This is the page title{% endblock %}
{% block title %}Add Activity{% endblock %}
{% block content %}
<h1>Add Event</h1>
<div class="row">
<div class="col-3 text-center text-white" style="background-color:#052c65">
<br>
<br>
<img src="{% static 'calendar_icon.png'%}" class="img-fluid" width="100" height="100">
<br>
<br>
<h2>Calendar</h2>
<h4 class="display-6" style="font-size:20px">Add New Activity</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>© Jenica e-Sports</p>
</div>
<div class="col-9 text-center">
<div class="row p-5 text-center" style="background-color:#e3e4e6">
<h1 class="display-3" style="font-size:50px; color:#052c65">Add a new activity:</h1>
</div>
<br>
<div class="row"></div>
<form method="post">
{% csrf_token %}
{% for field in form %}
<div class="row">
<div class="col-5" style="text-align:right">
<h5 class="display-3" style="font-size:25px">{{field.label}}:</h4>
</div>
<div class="col-7" style="text-align:left">
{{field}}
</div>
</div>
<br>
{% endfor %}
<input type="submit" class="btn btn-dark" value="Save New Activity" style="background-color:#052c65">
</form>
<br><br>
</div>
</div>
{% endblock %}
\ No newline at end of file
{% extends 'base.html' %}
{% load static %}
{% block title %}This is the page title{% endblock %}
{% block title %}{{ object.activity }}{% endblock %}
{% block content %}
<h1>Event Details</h1>
<div class="row">
<div class="col-3 text-center text-white" style="background-color:#052c65">
<br>
<br>
<img src="{% static 'calendar_icon.png'%}" class="img-fluid" width="100" height="100">
<br>
<br>
<h2>Calendar</h2>
<h4 class="display-6" style="font-size:20px">Activity Details</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>© Jenica e-Sports</p>
</div>
<div class="col-9 text-center">
<div class="row p-5 text-center" style="background-color:#e3e4e6">
<h1 class="display-3" style="font-size:50px; color:#052c65">{{ object.activity }}</h1>
</div>
<br>
<div class="row">
<div class="col-5" style="text-align:right">
<h4 style="font-size:25px">Date and Time:</h4>
<h4 style="font-size:25px">Estimated Hours:</h4>
</div>
<div class="col-7" style="text-align:left">
<h5 class="display-3" style="font-size:25px">{{ object.formatted_date }}, {{ object.formatted_time }}</h5>
<h5 class="display-3" style="font-size:25px">{{ object.estimated_hours }}</h5>
</div>
</div>
<br>
<div class="row p-2" style="background-color:#e3e4e6">
<h5 class="display-3" style="font-size:25px">{{ object.formatted_course }}</h5>
</div>
<br>
<div class="row">
<div class="col-5" style="text-align:right">
<h4 style="font-size:25px">Mode:</h4>
<h4 style="font-size:25px">Venue:</h4>
</div>
<div class="col-7" style="text-align:left">
<h5 class="display-3" style="font-size:25px">{{ object.location.mode }}</h5>
<h5 class="display-3" style="font-size:25px">{{ object.location.venue }}</h5>
</div>
</div>
<br><br>
<button type="button" class="btn" style="background-color:#e3e4e6">
<a href="/calendar/events/{{object.pk}}/edit" class="link-dark">Edit Activity</a>
</button> &nbsp; &nbsp;
<button type="button" class="btn" style="background-color:#052c65">
<a href="/calendar/" class="link-light">Back to Calendar</a>
</button>
</div>
</div>
{% endblock %}
\ No newline at end of file
{% extends 'base.html' %}
{% load static %}
{% block title %}This is the page title{% endblock %}
{% block title %}Edit Activity{% endblock %}
{% block content %}
<h1>Event Edit</h1>
<div class="row">
<div class="col-3 text-center text-white" style="background-color:#052c65">
<br>
<br>
<img src="{% static 'calendar_icon.png'%}" class="img-fluid" width="100" height="100">
<br>
<br>
<h2>Calendar</h2>
<h4 class="display-6" style="font-size:20px">Edit Activity</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>© Jenica e-Sports</p>
</div>
<div class="col-9 text-center">
<div class="row p-5 text-center" style="background-color:#e3e4e6">
<h1 class="display-3" style="font-size:50px; color:#052c65">Edit activity:</h1>
</div>
<br>
<div class="row"></div>
<form method="post">
{% csrf_token %}
{% for field in form %}
<div class="row">
<div class="col-5" style="text-align:right">
<h5 class="display-3" style="font-size:25px">{{field.label}}:</h4>
</div>
<div class="col-7" style="text-align:left">
{{field}}
</div>
</div>
<br>
{% endfor %}
<input type="submit" class="btn btn-dark" value="Save New Activity" style="background-color:#052c65">
</form>
<br><br>
</div>
</div>
{% endblock %}
\ No newline at end of file
......@@ -4,8 +4,12 @@ from django.views.generic.detail import DetailView
from django.views.generic.edit import CreateView, UpdateView
from .models import Event
def calendar(request):
return render(request, 'widget_calendar/calendar.html', {'name': 'Calendar Page'})
def calendar(request):
activities = Event.objects.all()
context = {
'activities': activities
}
return render(request, 'widget_calendar/calendar.html', context)
class EventDetailsView(DetailView):
model = Event
......
......@@ -125,7 +125,8 @@ USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/
STATIC_URL = 'static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment