Home Explore Help
Register Sign In
subDesTagesMitExtraKaese
/
Zitap
1
1
Fork 0
Files Issues 13 Pull Requests 0 Wiki
Browse Source

add date picker

subDesTagesMitExtraKaese 1 year ago
parent
0b5cc7f9a8
commit
183ccda48a
12 changed files with 229 additions and 2 deletions
Unified View Show Diff Stats
  1. 9 0
      zitap/forms.py
  2. 52 0
      zitap/static/zitap/css/date-picker.css
  3. 11 0
      zitap/static/zitap/css/style.css
  4. 0 0
      zitap/static/zitap/js/date-picker.js
  5. 0 0
      zitap/static/zitap/js/main.js
  6. 19 0
      zitap/templates/widgets/date-picker.html
  7. 9 0
      zitap/templates/zitap/about.html
  8. 17 0
      zitap/templates/zitap/create-event.html
  9. 29 1
      zitap/templates/zitap/index.html
  10. 2 0
      zitap/urls.py
  11. 18 1
      zitap/views.py
  12. 63 0
      zitap/widgets.py

+ 9 - 0
zitap/forms.py
View File 

@@ -0,0 +1,9 @@
 
+import datetime
 
+
 
+from django import forms
 
+
 
+from .widgets import DatePickerWidget
 
+
 
+class CreateEventForm(forms.Form):
 
+  event_name = forms.CharField(label='Event name', max_length=100)
 
+  event_date = forms.Field(label='Event date', widget=DatePickerWidget)

+ 52 - 0
zitap/static/zitap/css/date-picker.css
View File 

@@ -0,0 +1,52 @@
 
+.date-picker {
 
+    display: grid;
 
+    grid-template-columns: repeat(9, 1fr);
 
+    grid-template-rows: repeat(6, 1fr);
 
+    grid-gap: 1px;
 
+    width: 8mm;
 
+    justify-items: center;
 
+    align-items: center;
 
+    user-select: none;
 
+}
 
+.date-picker .month {
 
+    font-weight: bold;
 
+    padding: 3px;
 
+}
 
+.date-picker .year {
 
+    font-weight: bold;
 
+    padding: 3px;
 
+}
 
+.date-picker .day.hidden {
 
+  visibility: hidden;
 
+}
 
+.date-picker .day.today {
 
+  font-weight: bold;
 
+}
 
+.date-picker .day {
 
+  border: 1px solid #000;
 
+  background-color: rgb(240, 223, 223);
 
+  transition: all .5s ease;
 
+  cursor: pointer;
 
+  position: relative;
 
+}
 
+.date-picker .day input[type=checkbox] {
 
+  visibility: hidden;
 
+  position: absolute;
 
+}
 
+.date-picker .day-number {
 
+    font-size: 10pt;
 
+    width: 20pt;
 
+    height: 20pt;
 
+    z-index: 10;
 
+    transition: background-color .2s ease;
 
+    display: grid;
 
+    align-items: center;
 
+    justify-items: center;
 
+}
 
+.date-picker .day:hover {
 
+    background-color: rgb(255, 255, 255);
 
+    cursor: pointer;
 
+}
 
+.date-picker input[type=checkbox]:checked + label {
 
+    background-color: rgb(52, 185, 52);
 
+}

+ 11 - 0
zitap/static/zitap/css/style.css
View File 

@@ -0,0 +1,11 @@
 
+body {
 
+    background-color: #f5f5f5;
 
+    font-family: 'Open Sans', sans-serif;
 
+    font-size: 14px;
 
+    line-height: 1.42857143;
 
+    color: #333;
 
+    margin: 0;
 
+    padding: 0;
 
+    font-weight: 400;
 
+    overflow-x: hidden;
 
+}

+ 0 - 0
zitap/static/zitap/main.js → zitap/static/zitap/js/date-picker.js
View File


+ 0 - 0
zitap/static/zitap/stylesheet.css → zitap/static/zitap/js/main.js
View File


+ 19 - 0
zitap/templates/widgets/date-picker.html
View File 

@@ -0,0 +1,19 @@
 
+
 
+<div class="date-picker" id="{{ widget.attrs.id }}">
 
+    <div></div>
 
+    {% for weekday in widget.weekdays %}
 
+        <div class="weekday">{{ weekday }}</div>
 
+    {% endfor %}
 
+    <div></div>
 
+
 
+    {% for week in widget.weeks %}
 
+        <div class="month">{{ week.month }}</div>
 
+        {% for day in week.days %}
 
+            <div class="day{% if day.date == widget.today %} today{% endif %}{% if day.date < widget.today %} hidden{% endif %}">
 
+                <input type="checkbox" id="date_{{ day.date|date:"Y-m-d" }}" name="date_{{ day.date|date:"Y-m-d" }}" />
 
+                <label class="day-number" for="date_{{ day.date|date:"Y-m-d" }}">{{ day.day }}</label>
 
+            </div>
 
+        {% endfor %}
 
+        <div class="year">{{ week.year }}</div>
 
+    {% endfor %}
 
+</div>

+ 9 - 0
zitap/templates/zitap/about.html
View File 

@@ -0,0 +1,9 @@
 
+{% extends "zitap/index.html" %}
 
+{% load static %}
 
+{% load i18n %}
 
+
 
+{% block title %}About{% endblock %}
 
+
 
+{% block content %}
 
+About page
 
+{% endblock %}

+ 17 - 0
zitap/templates/zitap/create-event.html
View File 

@@ -0,0 +1,17 @@
 
+{% extends "zitap/index.html" %}
 
+{% load static %}
 
+{% load i18n %}
 
+
 
+{% block title %}{% trans "Create Event" %}{% endblock %}
 
+
 
+{% block content %}
 
+<h1>Create Event</h1>
 
+<form action="{% url 'create-event' %}" method="post">
 
+    {% csrf_token %}
 
+    <table>
 
+        {{ form.as_table }}
 
+    </table>
 
+    {{ form.non_field_errors }}
 
+    <input type="submit" value="Create Event">
 
+</form>
 
+{% endblock %}

+ 29 - 1
zitap/templates/zitap/index.html
View File 

@@ -1 +1,29 @@
 
-Hello World!
 
+{% load static %}
 
+{% load i18n %}
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <title>{% block title %}Zitap{% endblock %}</title>
 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
+    <link rel="stylesheet" href="{% static 'zitap/css/style.css' %}">
 
+    <link rel="stylesheet" href="{% static 'zitap/css/date-picker.css' %}">
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <header class="main-head">Zitap</header>
 
+      <nav class="main-nav">
 
+        <ul>
 
+          <li><a href="{% url 'index' %}">{% trans "Home" %}</a></li>
 
+          <li><a href="{% url 'about' %}">{% trans "About" %}</a></li>
 
+        </ul>
 
+      </nav>
 
+      <main class="main-content">
 
+        {% block content %}
 
+        <button class="create-event" onclick="location.href='{% url 'create-event' %}'">
 
+          {% trans "Create Event" %}
 
+        </button>
 
+        {% endblock %}
 
+      </main>
 
+    </div>
 
+  </body>
 
+</html>

+ 2 - 0
zitap/urls.py
View File 

@@ -4,4 +4,6 @@ from . import views
 
 
 
 urlpatterns = [
 
 urlpatterns = [
 
   path('', views.index, name='index'),
 
   path('', views.index, name='index'),
 
+  path('about', views.about, name='about'),
 
+  path('create-event', views.create_event, name='create-event'),
 
 ]
 
 ]

+ 18 - 1
zitap/views.py
View File 

@@ -1,4 +1,21 @@
 
+from django.http import HttpResponseRedirect
 
 from django.shortcuts import render
 
 from django.shortcuts import render
 
 
 
+from .forms import CreateEventForm
 
+
 
 def index(request):
 
 def index(request):
 
-  return render(request, 'zitap/index.html')
 
+  return render(request, 'zitap/index.html')
 
+
 
+def about(request):
 
+  return render(request, 'zitap/about.html')
 
+
 
+def create_event(request):
 
+  if request.method == 'POST':
 
+    form = CreateEventForm(request.POST)
 
+    if form.is_valid():
 
+      data = form.cleaned_data
 
+      print(data)
 
+      #return HttpResponseRedirect('/edit-event')
 
+  else:
 
+    form = CreateEventForm()
 
+  return render(request, 'zitap/create-event.html', {'form': form})

+ 63 - 0
zitap/widgets.py
View File 

@@ -0,0 +1,63 @@
 
+import datetime
 
+
 
+from django.forms.widgets import Widget
 
+
 
+class DatePickerWidget(Widget):
 
+    template_name = 'widgets/date-picker.html'
 
+
 
+    n_weeks = 5
 
+
 
+    def get_context(self, name, value, attrs):
 
+        context = super().get_context(name, value, attrs)
 
+
 
+        # get first day of the week
 
+        today = datetime.date.today()
 
+        context['widget']['today'] = today
 
+        first_day_of_week = today - datetime.timedelta(days=today.weekday())
 
+        
+        # get the weekdays
 
+        weekdays = []
 
+        for i in range(7):
 
+            weekdays.append((first_day_of_week + datetime.timedelta(days=i)).strftime('%A')[0])
 
+        context['widget']['weekdays'] = weekdays
 
+
 
+        # for the next weeks
 
+        weeks = []
 
+        for i in range(self.n_weeks):
 
+                date = first_day_of_week + datetime.timedelta(days=i*7)
 
+                week = {
 
+                    'days': [],
 
+                    'month': date.strftime('%b'),
 
+                    'year': date.strftime('%Y'),
 
+                }
 
+                for j in range(7):
 
+                    day = {
 
+                        'date': date + datetime.timedelta(days=j),
 
+                        'day': (date + datetime.timedelta(days=j)).strftime('%d'),
 
+                    }
 
+                    week['days'].append(day)
 
+                weeks.append(week)
 
+
 
+        context['widget']['weeks'] = weeks
 
+
 
+        return context
 
+    
+    def value_from_datadict(self, data, files, name):
 
+        dates = []
 
+        for day in self.GetValidDates():
 
+            if data.get(f"date_{day.strftime('%Y-%m-%d')}") == "on":
 
+                dates.append(day)
 
+        return dates
 
+
 
+    def value_omitted_from_data(self, data, files, name):
 
+        return not any(
 
+            (data.get(f"date_{day.strftime('%Y-%m-%d')}") == "on")
 
+            for day in self.GetValidDates()
 
+        )
 
+
 
+    def GetValidDates(self):
 
+        today = datetime.date.today()
 
+        return [
 
+            (today + datetime.timedelta(days=i))
 
+            for i in range(7*self.n_weeks)
 
+        ]