From 7d83efed7f12277c79d1e489e02b4034456e43c5 Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Fri, 12 Apr 2024 22:26:17 -0500
Subject: [PATCH] Change date time picker widget

---
 judge/widgets/datetime.py             | 29 +++++++++++----------------
 resources/blog.scss                   |  7 +++++++
 resources/widgets.scss                |  2 +-
 templates/blog/content.html           |  2 +-
 templates/blog/list.html              |  6 ------
 templates/widgets/datetimepicker.html | 21 -------------------
 6 files changed, 21 insertions(+), 46 deletions(-)
 delete mode 100644 templates/widgets/datetimepicker.html

diff --git a/judge/widgets/datetime.py b/judge/widgets/datetime.py
index 15bb383..7b95d4e 100644
--- a/judge/widgets/datetime.py
+++ b/judge/widgets/datetime.py
@@ -1,24 +1,19 @@
 from django import forms
+from django.templatetags.static import static
+from django.utils.html import format_html
+from django.forms.utils import flatatt
 
 
 class DateTimePickerWidget(forms.DateTimeInput):
-    template_name = "widgets/datetimepicker.html"
+    input_type = "datetime-local"
 
-    def get_context(self, name, value, attrs):
-        datetimepicker_id = "datetimepicker_{name}".format(name=name)
-        if attrs is None:
-            attrs = dict()
-        attrs["data-target"] = "#{id}".format(id=datetimepicker_id)
-        attrs["class"] = "form-control datetimepicker-input"
-        context = super().get_context(name, value, attrs)
-        context["widget"]["datetimepicker_id"] = datetimepicker_id
-        return context
+    def render(self, name, value, attrs=None, renderer=None):
+        if value is None:
+            value = ""
+        else:
+            value = value.strftime("%Y-%m-%dT%H:%M")
 
-    @property
-    def media(self):
-        css_url = "/static/datetime-picker/datetimepicker.min.css"
-        js_url = "/static/datetime-picker/datetimepicker.full.min.js"
-        return forms.Media(
-            js=[js_url],
-            css={"screen": [css_url]},
+        final_attrs = self.build_attrs(
+            attrs, {"type": self.input_type, "name": name, "value": value}
         )
+        return format_html("<input{}>", flatatt(final_attrs))
diff --git a/resources/blog.scss b/resources/blog.scss
index 265ebb9..ea3ac14 100644
--- a/resources/blog.scss
+++ b/resources/blog.scss
@@ -262,6 +262,13 @@
     border-radius: 1em;
 }
 
+.post-content-header {
+    margin-left: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2em;
+}
+
 
 @media (max-width: 799px) {
     .blog-sidebar,
diff --git a/resources/widgets.scss b/resources/widgets.scss
index c52c991..d6400b8 100644
--- a/resources/widgets.scss
+++ b/resources/widgets.scss
@@ -143,7 +143,7 @@
 }
 
 input {
-    &[type=text], &[type=password], &[type=email], &[type=number] {
+    &[type=text], &[type=password], &[type=email], &[type=number], &[type=datetime-local] {
         padding: 4px 8px;
         color: #555;
         background: #FFF none;
diff --git a/templates/blog/content.html b/templates/blog/content.html
index 04b10f3..6d36fc8 100644
--- a/templates/blog/content.html
+++ b/templates/blog/content.html
@@ -1,7 +1,7 @@
 {% for post in posts%}
   <section class="{% if post.sticky %}sticky {% endif %}blog-box">
     <div style="margin-bottom: 0.5em">
-      <span class="item-header time">
+      <span class="post-content-header time">
         {% with authors=post.authors.all() %}
           {%- if authors -%}
             <span class="user-img" style="width: 1.5em; height: 1.5em">
diff --git a/templates/blog/list.html b/templates/blog/list.html
index 6a1e4d6..7380f4b 100644
--- a/templates/blog/list.html
+++ b/templates/blog/list.html
@@ -7,12 +7,6 @@
         clear: both;
       }
     }
-    .item-header {
-      margin-left: 0;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.2em;
-    }
 
     .no-clarifications-message {
       font-style: italic;
diff --git a/templates/widgets/datetimepicker.html b/templates/widgets/datetimepicker.html
deleted file mode 100644
index 012cc73..0000000
--- a/templates/widgets/datetimepicker.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<input
-  autocomplete="off"
-  type="{{ widget.type }}"
-  name="{{ widget.name }}"
-  {% if widget.value != None %}
-    value="{{ widget.value }}"
-  {% endif %}
-  {% for name, value in widget.attrs.items() %}
-    {% if value %}
-      {{ name }}{% if not value %}="{{ value }}"{% endif %}
-    {% endif %}
-  {% endfor %}
-/>
-
-<script>
-  $(function () {
-    $("input[name='{{ widget.name }}']").datetimepicker({
-      format: 'Y-m-d H:i:s',
-    });
-  });
-</script>
\ No newline at end of file