add task deadline.

Database/Task.h

@@ -12,6 +12,7 @@ class Task {
 public:
     bool finished = false;
     std::chrono::system_clock::time_point createTime;
+    std::chrono::system_clock::time_point deadline;
     std::string content;
     std::string remark;
 
@@ -21,6 +22,7 @@ public:
     template <class Action>
     void persist(Action &a) {
         Wt::Dbo::field(a, content, "content");
+        Wt::Dbo::field(a, deadline, "deadline");
         Wt::Dbo::field(a, remark, "remark");
         Wt::Dbo::field(a, finished, "finished");
         Wt::Dbo::field(a, createTime, "create_time");

WebApplication/TaskPage.cpp

@@ -4,12 +4,14 @@
 #include "Database/Session.h"
 #include <Wt/WCheckBox.h>
 #include <Wt/WContainerWidget.h>
+#include <Wt/WDateEdit.h>
 #include <Wt/WDialog.h>
 #include <Wt/WLineEdit.h>
 #include <Wt/WMessageBox.h>
 #include <Wt/WPushButton.h>
 #include <Wt/WTemplateFormView.h>
 #include <Wt/WTextArea.h>
+#include <Wt/WTimeEdit.h>
 
 TaskPage::TaskPage() : Wt::WTemplate(tr("Wt.Task.Home")) {
     using namespace Wt;
@@ -23,9 +25,6 @@ TaskPage::TaskPage() : Wt::WTemplate(tr("Wt.Task.Home")) {
 std::unique_ptr<Wt::WTemplate> TaskPage::createTask(const Wt::Dbo::ptr<Task> &task) {
     auto ret = std::make_unique<Wt::WTemplate>(tr("Wt.Task.Item"));
     auto app = dynamic_cast<WebToolkit::Application *>(Wt::WApplication::instance());
-    if (app->inDocusaurus()) {
-        ret->addStyleClass("li-none-style");
-    }
     ret->bindString("content", task->content);
     ret->bindString("remark", task->remark);
     ret->setHtmlTagName("li");
@@ -90,10 +89,18 @@ std::unique_ptr<Wt::WTemplate> TaskPage::createTask(const Wt::Dbo::ptr<Task> &ta
 class AddTaskModel : public Wt::WFormModel {
 public:
     static constexpr Field ContentField = "task-content";
+    static constexpr Field DeadlineDateField = "task-deadlinedate";
+    static constexpr Field DeadlineTimeField = "task-deadlinetime";
     static constexpr Field RemarkField = "task-remark";
     AddTaskModel() : Wt::WFormModel() {
         addField(ContentField);
+        addField(DeadlineDateField);
+        addField(DeadlineTimeField);
         addField(RemarkField);
+
+        setValidator(DeadlineDateField, createDeadlineValidator());
+
+        setValue(DeadlineDateField, Wt::WDate{});
     }
     Task task() {
         Task t;
@@ -101,6 +108,17 @@ public:
         t.remark = Wt::asString(value(RemarkField)).toUTF8();
         return t;
     }
+
+protected:
+    std::shared_ptr<Wt::WValidator> createDeadlineValidator() {
+        auto v = std::make_shared<Wt::WDateValidator>();
+        auto current = Wt::WDate::currentDate();
+        v->setBottom(current);
+        v->setTop(current.addYears(1));
+        v->setFormat("yyyy/MM/dd");
+        v->setMandatory(true);
+        return v;
+    }
 };
 
 class AddTaskView : public Wt::WTemplateFormView {
@@ -113,6 +131,32 @@ public:
         remark->setRows(5);
         setFormWidget(AddTaskModel::RemarkField, std::move(remark));
 
+        auto dateEdit = std::make_unique<Wt::WDateEdit>();
+        auto dateEdit_ = dateEdit.get();
+        setFormWidget(
+            AddTaskModel::DeadlineDateField, std::move(dateEdit),
+            [this, dateEdit_] { // updateViewValue()
+                Wt::WDate date = Wt::cpp17::any_cast<Wt::WDate>(m_model->value(AddTaskModel::DeadlineDateField));
+                dateEdit_->setDate(date);
+            },
+            [this, dateEdit_] { // updateModelValue()
+                Wt::WDate date = dateEdit_->date();
+                m_model->setValue(AddTaskModel::DeadlineDateField, date);
+            });
+
+        auto timeEdit = std::make_unique<Wt::WTimeEdit>();
+        auto timeEdit_ = timeEdit.get();
+        setFormWidget(
+            AddTaskModel::DeadlineTimeField, std::move(timeEdit),
+            [this, timeEdit_] { // updateViewValue()
+                // Wt::WDate date = Wt::cpp17::any_cast<Wt::WDate>(m_model->value(AddTaskModel::DeadlineTimeField));
+                // dateEdit_->setDate(date);
+            },
+            [this, timeEdit_] { // updateModelValue()
+                // Wt::WDate date = dateEdit_->date();
+                // m_model->setValue(AddTaskModel::DeadlineTimeField, date);
+            });
+
         auto button = bindWidget("submit-button", std::make_unique<Wt::WPushButton>("确定"));
         button->clicked().connect(this, &AddTaskView::process);
 
@@ -180,7 +224,10 @@ void TaskPage::update() {
     } else {
         auto list = bindNew<Wt::WContainerWidget>("tasks");
         list->setList(true);
-
+        auto app = dynamic_cast<WebToolkit::Application *>(Wt::WApplication::instance());
+        if (app->inDocusaurus()) {
+            list->addStyleClass("bulma-is-list-style-none");
+        }
         for (auto &task : tasks) {
             list->addWidget(createTask(task));
         }

resources/app.css

@@ -7,12 +7,6 @@ ul li ul li {
     margin-left: 2.5rem
 }
 
-.li-none-style {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
 .Wt-itemview .Wt-headerdiv {
     overflow: hidden;
     -webkit-user-select: none;
@@ -117,4 +111,93 @@ ul li ul li {
 
 .is-pointer-cursor {
     cursor: pointer !important;
+}
+
+.Wt-cal table.d1 {
+    width: 170px
+}
+
+.Wt-cal table.d3 {
+    width: 300px
+}
+
+.Wt-cal table.dlong {
+    width: 560px
+}
+
+.Wt-cal .Wt-cal-navbutton {
+    display: block
+}
+
+.Wt-cal .Wt-cal-now {
+    background-color: #d3d3d3
+}
+
+.Wt-cal .days.d1 td {
+    width: 20px
+}
+
+.Wt-cal .days.d3 td {
+    width: 35px
+}
+
+.Wt-cal .days.dlong td {
+    width: 80px
+}
+
+.Wt-cal td,
+.Wt-cal td>div,
+.Wt-cal th {
+    border-radius: 4px;
+    height: 28px;
+    text-align: center
+}
+
+.Wt-cal tr:first-child th {
+    cursor: pointer
+}
+
+.Wt-cal tr:first-child th:hover {
+    background: #eee
+}
+
+.Wt-cal tr:first-child th select {
+    margin: 0;
+    width: 125px
+}
+
+.Wt-cal tr:first-child th input {
+    margin: 0;
+    width: 60px
+}
+
+.Wt-cal .days td:hover {
+    background: #eee;
+    cursor: pointer
+}
+
+.Wt-cal .days td .Wt-cal-oom,
+.Wt-cal .days td .Wt-cal-oor {
+    color: #999
+}
+
+.Wt-cal .days td .Wt-cal-sel,
+.Wt-cal .days td .Wt-cal-sel:hover {
+    background-color: #0d6efd;
+    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .15), hsla(0, 0%, 100%, 0));
+    color: #fff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
+}
+
+.Wt-cal .form-select {
+    display: inline-block !important
+}
+
+.Wt-cal-year .form-control {
+    min-height: 1.5em !important;
+    padding: 0 .2em !important
+}
+
+.Wt-calendar .form-control {
+    display: initial;
 }

resources/webrtc.xml

@@ -34,12 +34,12 @@
         ${tasks}
     </message>
     <message id="Wt.Task.Item">
-        <div class="bulma-is-flex bulma-has-background-black-ter bulma-p-5 bulma-mb-1">
+        <div class="bulma-is-flex bulma-has-background-black-ter bulma-p-2 bulma-mb-1">
             ${finished-checkbox}
-            <div class="bulma-is-flex-grow-1 bulma-ml-5">
+            <div class="bulma-is-flex-grow-1 bulma-ml-2 bulma-is-flex bulma-is-align-items-center">
-                <div>${content}</div>
+                <span>${content}</span>
-                <div>${remark}</div>
             </div>
+            <!-- <div>${remark}</div> -->
             <div class="bulma-buttons">
                 ${remove-button class="bulma-button bulma-is-danger"}
                 ${add-child class="bulma-button bulma-is-success"}
@@ -61,6 +61,32 @@
             </div>
             ${task-content-info class="Wt-info bulma-help"}
         </div>
+        <div class="bulma-is-flex">
+            <div class="bulma-field bulma-is-flex-grow-1 bulma-mr-1"> 
+                <label for="${id:task-deadlinedate}" class="bulma-label">
+                    ${task-deadlinedate-label}
+                </label>
+                <div class="bulma-control bulma-has-icons-right">
+                    ${task-deadlinedate class="bulma-input" type="text"}
+                    <span class="bulma-icon bulma-is-small bulma-is-right">
+                        <i class="fa-solid fa-calendar-days"></i>
+                    </span>
+                </div>
+                ${task-deadlinedate-info class="Wt-info bulma-help"}
+            </div>
+            <div class="bulma-field bulma-is-flex-grow-1 bulma-ml-1"> 
+                <label for="${id:task-deadlinetime}" class="bulma-label">
+                    ${task-deadlinetime-label}
+                </label>
+                <div class="bulma-control bulma-has-icons-right">
+                    ${task-deadlinetime class="bulma-input" type="text"}
+                    <span class="bulma-icon bulma-is-small bulma-is-right">
+                        <i class="fa-regular fa-clock"></i>
+                    </span>
+                </div>
+                ${task-deadlinetime-info class="Wt-info bulma-help"}
+            </div>
+        </div>
         <div class="bulma-field"> 
             <label for="${id:task-remark}" class="bulma-label">
                 ${task-remark-label}
@@ -70,9 +96,13 @@
             </div>
             ${task-remark-info class="Wt-info bulma-help"}
         </div>
-        <div>
+        <div class="bulma-field bulma-is-grouped bulma-is-grouped-right">
-            ${submit-button class="bulma-button"}
+            <div class="bulma-control">
-            ${cancel-button class="bulma-button"}
+                ${submit-button class="bulma-button bulma-is-link"}
+            </div>
+            <div class="bulma-control">
+                ${cancel-button class="bulma-button bulma-is-link bulma-is-light"}
+            </div>
         </div>
     </message>
     <message id="Wt.Icon.Expand">
@@ -97,6 +127,8 @@
     </message>
     <message id="task-content">内容</message>
     <message id="task-remark">备注</message>
+    <message id="task-deadlinedate">完成日期</message>
+    <message id="task-deadlinetime">&ensp;</message>
     <message id="Wt.VisitorRecords.Home">
         <h2 class="bulma-subtitle bulma-has-text-centered">访客数据统计</h2>
         <div class="bulma-is-flex bulma-is-justify-content-space-between">

resources/wt_zh.xml

@@ -22,37 +22,37 @@
   <message id="Wt.WDate.Friday">Friday</message>
   <message id="Wt.WDate.Saturday">Saturday</message>
   <message id="Wt.WDate.Sunday">Sunday</message>
-  <message id="Wt.WDate.3.Mon">Mon</message>
+  <message id="Wt.WDate.3.Mon">一</message>
-  <message id="Wt.WDate.3.Tue">Tue</message>
+  <message id="Wt.WDate.3.Tue">二</message>
-  <message id="Wt.WDate.3.Wed">Wed</message>
+  <message id="Wt.WDate.3.Wed">三</message>
-  <message id="Wt.WDate.3.Thu">Thu</message>
+  <message id="Wt.WDate.3.Thu">四</message>
-  <message id="Wt.WDate.3.Fri">Fri</message>
+  <message id="Wt.WDate.3.Fri">五</message>
-  <message id="Wt.WDate.3.Sat">Sat</message>
+  <message id="Wt.WDate.3.Sat">六</message>
-  <message id="Wt.WDate.3.Sun">Sun</message>
+  <message id="Wt.WDate.3.Sun">日</message>
-  <message id="Wt.WDate.January">January</message>
+  <message id="Wt.WDate.January">一月</message>
-  <message id="Wt.WDate.February">February</message>
+  <message id="Wt.WDate.February">二月</message>
-  <message id="Wt.WDate.March">March</message>
+  <message id="Wt.WDate.March">三月</message>
-  <message id="Wt.WDate.April">April</message>
+  <message id="Wt.WDate.April">四月</message>
-  <message id="Wt.WDate.May">May</message>
+  <message id="Wt.WDate.May">五月</message>
-  <message id="Wt.WDate.June">June</message>
+  <message id="Wt.WDate.June">六月</message>
-  <message id="Wt.WDate.July">July</message>
+  <message id="Wt.WDate.July">七月</message>
-  <message id="Wt.WDate.August">August</message>
+  <message id="Wt.WDate.August">八月</message>
-  <message id="Wt.WDate.September">September</message>
+  <message id="Wt.WDate.September">九月</message>
-  <message id="Wt.WDate.October">October</message>
+  <message id="Wt.WDate.October">十月</message>
-  <message id="Wt.WDate.November">November</message>
+  <message id="Wt.WDate.November">十一月</message>
-  <message id="Wt.WDate.December">December</message>
+  <message id="Wt.WDate.December">十二月</message>
-  <message id="Wt.WDate.3.Jan">Jan</message>
+  <message id="Wt.WDate.3.Jan">一</message>
-  <message id="Wt.WDate.3.Feb">Feb</message>
+  <message id="Wt.WDate.3.Feb">二</message>
-  <message id="Wt.WDate.3.Mar">Mar</message>
+  <message id="Wt.WDate.3.Mar">三</message>
-  <message id="Wt.WDate.3.Apr">Apr</message>
+  <message id="Wt.WDate.3.Apr">四</message>
-  <message id="Wt.WDate.3.May">May</message>
+  <message id="Wt.WDate.3.May">五</message>
-  <message id="Wt.WDate.3.Jun">Jun</message>
+  <message id="Wt.WDate.3.Jun">六</message>
-  <message id="Wt.WDate.3.Jul">Jul</message>
+  <message id="Wt.WDate.3.Jul">七</message>
-  <message id="Wt.WDate.3.Aug">Aug</message>
+  <message id="Wt.WDate.3.Aug">八</message>
-  <message id="Wt.WDate.3.Sep">Sep</message>
+  <message id="Wt.WDate.3.Sep">九</message>
-  <message id="Wt.WDate.3.Oct">Oct</message>
+  <message id="Wt.WDate.3.Oct">十</message>
-  <message id="Wt.WDate.3.Nov">Nov</message>
+  <message id="Wt.WDate.3.Nov">十一</message>
-  <message id="Wt.WDate.3.Dec">Dec</message>
+  <message id="Wt.WDate.3.Dec">十二</message>
 
   <message id="Wt.WDatePicker.Close">Close</message>