Django Python shift table
I investigated and implemented how to control table scrolling with Html and Css, but there are some things that do not work.
current situation
There is no problem at the time of initial display, but ...
When you scroll
The title part on the upper left has become transparent and the name has been visualized. The date and day of the week are also transparent (laughs) Sites referenced when creating the table Reference source: https://webliker.info/75964/ https://webliker.info/02035/ I saw many others
I've been researching for a few hours due to the problem here, but I didn't understand, so I'll leave it for a moment (laughs)
In addition, we have implemented a display for each facility. I made a schedule to display the whole, so by adding the facility ID to the end of the URL, I made a copy of Views and Html for display for each facility.
This was done immediately
schedule/urls.py
from django.urls import path, include
from .views import monthschedulefunc, homeschedule, scheduleUpdatefunc, kiboulistfunc, KibouCreate, KibouUpdate, KibouDelete, schedulecreatefunc, monthschedulefilterfunc
from django.conf import settings
from django.conf.urls.static import static
app_name = 'schedule'
urlpatterns = [
path('home/', homeschedule, name='homeschedule'),
path('monthschedulefilter/<int:year_num>/<int:month_num>/<int:shisetsu_num>', monthschedulefilterfunc, name='monthschedulefilter'),
path('monthschedule/<int:year_num>/<int:month_num>/', monthschedulefunc, name='monthschedule'),
path('update/<int:pk>', scheduleUpdatefunc, name='update'),
path('schedulecreate/<int:year_num>/<int:month_num>/', schedulecreatefunc, name='schedulecreate'),
path('kiboulist/', kiboulistfunc, name='KibouList' ),
path('kiboucreate/', KibouCreate.as_view(), name='KibouCreate'),
path('kibouupdate/<int:pk>', KibouUpdate.as_view(), name='KibouUpdate'),
path('kiboudelete/<int:pk>', KibouDelete.as_view(), name='kibouDelete'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
/views.py
def monthschedulefilterfunc(request,year_num,month_num,shisetsu_num):
user_list = User.objects.all()
profile_list = Profile.objects.select_related().values().order_by('hyoujijyun')
year, month, shisetsu = int(year_num), int(month_num), int(shisetsu_num)
shisetsu_object = Shisetsu.objects.filter(id = shisetsu)
shisetsu_all_object = Shisetsu.objects.all()
shift_object = Shift.objects.all()
object_list = Schedule.objects.filter(year = year, month = month).order_by('user', 'date')
month_total = Schedule.objects.select_related('User').filter(year = year, month = month).values("user").order_by("user").annotate(month_total_worktime = Sum("day_total_worktime"))
#Get the number of days in the shift range
enddate = datetime.date(year,month,20)
startdate = enddate + relativedelta(months=-1)
kaisu = enddate - startdate
kaisu = int(kaisu.days)
kikan = str(startdate) +"～"+ str(enddate)
#Create a list of dates and days of the week
hiduke = str(startdate)
date_format = "%Y-%m-%d"
hiduke = dt.strptime(hiduke, date_format)
weekdays = ["Month","fire","water","wood","Money","soil","Day"]
calender_object = []
youbi_object = []
for i in range(kaisu):
hiduke = hiduke + timedelta(days=1)
calender_object.append(hiduke)
youbi = weekdays[hiduke.weekday()]
youbi_object.append(youbi)
kaisu = str(kaisu)
context = {
'year': year,
'month': month,
'kikan': kikan,
'object_list': object_list,
'user_list': user_list,
'shift_object': shift_object,
'calender_object': calender_object,
'youbi_object': youbi_object,
'kaisu': kaisu,
'shisetsu_object': shisetsu_object,
'month_total' : month_total,
'profile_list' : profile_list,
'shisetsu_all_object' : shisetsu_all_object,
}
return render(request,'schedule/monthfilter.html', context)
schedule/monthfileter.html
{% extends 'schedule/base.html' %}
{% load static %}
{% block customcss %}
<link rel="stylesheet" href="{% static 'schedule/month.css' %}">
{% endblock customcss %}
{% block header %}
<ul class="page">
{% ifnotequal month 1 %}
<a href="{% url 'schedule:monthschedule' year month|add:'-1' %}" class="btn-info btn active">last month</a>
{% else %}
<a href="{% url 'schedule:monthschedule' year|add:'-1' 12 %}" class="btn-info btn active">last month</a>
{% endifnotequal %}
{% ifnotequal month 12 %}
<a href="{% url 'schedule:monthschedule' year month|add:'1' %}" class="btn-info btn active">Next month</a>
{% else %}
<a href="{% url 'schedule:monthschedule' year|add:'1' 1 %}" class="btn-info btn active">Next month</a>
{% endifnotequal %}
<a href="{% url 'schedule:schedulecreate' year month %}" class="btn-info btn active">Shift creation</a>
</ul>
<p>
<a href="{% url 'schedule:monthschedule' year month %}" button type="button" class="btn btn-outline-dark">all</a>
{% for shisetsu_all in shisetsu_all_object %}
<a href="{% url 'schedule:monthschedulefilter' year month shisetsu_all.pk %}" button type="button" class="btn btn-outline-dark" span style="background-color:{{ shisetsu_all.color }}">{{ shisetsu_all.name }}</span></a>
{% endfor %}
</p>
{{ kikan }}
{% for shift in shift_object %}
{% if shift.name != "Closed" and shift.name != "Yes" %}
{{ shift.name }} : {{ shift.start_time | date:"G"}}～{{ shift.end_time | date:"G"}}
{% endif %}
{% endfor %}
{% endblock header %}
{% block content %}
<table class="table">
<thead>
<tr> <!--date-->
<th class ="fixed00" rowspan="2"></th>
{% for item in calender_object %}
<th class ="fixed01">{{ item.date | date:"d" }}</th>
{% endfor %}
<tr> <!--Day of the week-->
{% for item in youbi_object %}
<th class ="fixed02">{{ item }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for profile in profile_list %}
{% for staff in user_list %}
{% if profile.user_id == staff.id %}
<tr align="center">
<th class ="fixed03" >{{ staff.last_name }}{{ staff.first_name }}</th> <!--staff_id element used in js-->
{% for item in object_list %}
{% if item.user|stringformat:"s" == staff.username|stringformat:"s" %}<!--If the username is the same-->
<td class="meisai">
{% if item.shift_name_1 != None %}
{% if item.shift_name_1|stringformat:"s" == "Yes" or item.shift_name_1|stringformat:"s" == "Closed" %}
{{ item.shift_name_1 }}
{% else %}
{% for shisetsu in shisetsu_object %}
{% if item.shisetsu_name_1|stringformat:"s" == shisetsu.name|stringformat:"s" %}
<span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_1 }}</span>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% if item.shift_name_2 != None %}
{% if item.shift_name_2|stringformat:"s" == "Yes" or item.shift_name_2|stringformat:"s" == "Closed" %}
{{ item.shift_name_2 }}
{% else %}
{% for shisetsu in shisetsu_object %}
{% if item.shisetsu_name_2|stringformat:"s" == shisetsu.name|stringformat:"s" %}
<span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_2 }}</span>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% if item.shift_name_3 != None %}
{% if item.shift_name_3|stringformat:"s" == "Yes" or item.shift_name_3|stringformat:"s" == "Closed" %}
{{ item.shift_name_3 }}
{% else %}
{% for shisetsu in shisetsu_object %}
{% if item.shisetsu_name_3|stringformat:"s" == shisetsu.name|stringformat:"s" %}
<span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_3 }}</span>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% if item.shift_name_4 != None %}
{% if item.shift_name_4|stringformat:"s" == "Yes" or item.shift_name_4|stringformat:"s" == "Closed" %}
{{ item.shift_name_4 }}
{% else %}
{% for shisetsu in shisetsu_object %}
{% if item.shisetsu_name_4|stringformat:"s" == shisetsu.name|stringformat:"s" %}
<span style="background-color:{{ shisetsu.color }}">{{ item.shift_name_4 }}</span>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</td>
<tr align="center">
{% for month in month_total %}
{% if month.user == staff.id %}<!--If the username is the same-->
<td class="fixed04"><b>{{ month.month_total_worktime }}</b></td>
{% endif %}
{% endfor %}
{% for item in object_list %}
{% if item.user|stringformat:"s" == staff.username|stringformat:"s" %}<!--If the username is the same-->
<td class="meisai" id="s{{ staff.id }}d{{ item.date }}">
<a href="{% url 'schedule:update' item.pk %}">{{ item.day_total_worktime }} </a>
</td>
{% endif %}
{% endfor %}
</tr>
{% endif %}
{% endfor %}
{% endfor %}
</tbody>
</table>
</div>
{% endblock content %}
schedule/month.css
.table {
/*Fixed when scrolling vertically*/
position: -webkit-sticky;
position: sticky;
/*Do not break lines so that the height does not change*/
white-space: nowrap;
border-collapse: collapse;
}
.fixed00{
position: sticky;
white-space: nowrap;
top: 0px;
left: 0px;
width:300px;
height:100px;
z-index: 1;
color: #fff;
padding: 8px 15px;
background: #258;
background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
font-weight: bold;
border-left:1px solid #258;
border-top:1px solid #258;
border-bottom:1px solid #258;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.fixed01{
position: sticky;
top: 0;
color: #fff;
padding: 8px 15px;
background: #258;
background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
font-weight: bold;
border-left:1px solid #258;
border-top:1px solid #258;
border-bottom:1px solid #258;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.fixed02{
position: sticky;
top: 36px;
color: #fff;
padding: 8px 15px;
background: #258;
background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
font-weight: bold;
border-left:1px solid #258;
border-top:1px solid #258;
border-bottom:1px solid #258;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.fixed03 {
/*Fixed when scrolling sideways*/
text-align: center;
width: 200px;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
top: 0;
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
background:-moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.9)));
padding: 8px 15px;
font-weight: bold;
border-left: 1px solid#258;
border-top:none;
border-bottom: 1px solid #a8b7c5;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px -3px 5px 1px #eee inset;
}
.fixed04 {
/*Fixed when scrolling sideways*/
text-align: center;
width: 200px;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
position: sticky;
top: 0;
color: rgb(0, 0, 0);
background: rgb(255, 255, 255);
background:-moz-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.9)));
padding: 8px 15px;
font-weight: bold;
border-left: 1px solid #258;
border-top:none;
border-bottom: 1px solid#258;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px -3px 5px 1px #eee inset;
}
.meisai{
border-left: 1px solid #258;
border-top:none;
border-bottom: 1px solid#258;
line-height: 120%;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px -3px 5px 1px #eee inset;
}
I will implement it after listening to the opinions of the users as to whether to display the holidays.
Somehow, I feel that the entire schedule and the table for each facility can be combined into one, but I'm thinking of proceeding without being too particular about it.
First of all, I think that there are many things that can be remembered by completing it (laugh) The reality is that users don't care if the code on the back is clean.
Even so, programming is interesting! There are many times when it doesn't go well, but I'll do my best if it's convenient to use this (⌒∇⌒)
Recommended Posts