routes정리+delete 습관기능+chart구현-part1

app.py

@@ -1,3 +1,4 @@
+from bson import ObjectId
 from flask import Flask, render_template, jsonify, request
 
 app = Flask(__name__)
@@ -27,6 +28,7 @@ def listing():
 
     return render_template("habits.html", username=username, email=current_email, habits=user_habit_list)
 
+
 @app.route('/habits', methods=['POST'])
 def saving():
     email_receive = request.form['email']
@@ -43,12 +45,23 @@ def saving():
 
     return jsonify({'result': 'success', 'current_email': current_email})
 
+
 @app.route('/habits-date', methods=['GET'])
 def listingEvents():
-    events_list = list(db.calendars.find({}, {'_id': 0}))
+    events_list = list(db.calendars.aggregate([{
+        '$project': {
+            '_id': {
+                '$toString': "$_id"
+            },
+            'date': 1,
+            'title': 1,
+            'email': 1
+        }
+    }]))
 
     return jsonify({'result': 'success', 'events_list': events_list})
 
+
 @app.route('/habits-date', methods=['POST'])
 def savingEvents():
     date_receive = request.form['date']
@@ -60,5 +73,15 @@ def savingEvents():
 
     return jsonify({'result': 'success'})
 
+
+@app.route('/habits-delete', methods=['POST'])
+def deleteEvents():
+    target_event = request.form['targetId_give']
+
+    db.calendars.delete_one({'_id': ObjectId(target_event)})
+
+    return jsonify({'result': 'success'})
+
+
 if __name__ == '__main__':
     app.run('0.0.0.0', port=5000, debug=True)

static/css/calendar.css

@@ -14,6 +14,7 @@ h1 {
 #external-events .fc-event {
     margin: 10px 0;
     cursor: pointer;
+    background: "#4d638c";
 }
 #calendar {
     max-width: 900px;

static/js/calendar.js

@@ -0,0 +1,99 @@
+document.addEventListener("DOMContentLoaded", function () {
+    let Calendar = FullCalendar.Calendar;
+    let Draggable = FullCalendarInteraction.Draggable;
+
+    let containerEl = document.getElementById("external-events");
+    let calendarEl = document.getElementById("calendar");
+
+    // initialize the external events
+    new Draggable(containerEl, {
+        itemSelector: ".fc-event",
+        eventData: function (eventEl) {
+            return {
+                title: eventEl.innerText,
+            };
+        },
+    });
+
+    // initialize the calendar
+    let calendar = new Calendar(calendarEl, {
+        plugins: ["interaction", "dayGrid"],
+        header: { left: "prev", center: "title", right: "next" },
+        editable: true,
+        droppable: true,
+        displayEventTime: false,
+        eventReceive: function (event, _) {
+            saveEvent(event);
+        },
+        eventClick: function (info) {
+            const target = info.event;
+            // console.log(target);
+            const targetId = target.extendedProps._id;
+            const targetName = target.title;
+            const deleteMsg = confirm(`정말로 "${targetName}" 습관을 삭제하시겠습니까?`);
+            if (deleteMsg) {
+                target.remove();
+                $.ajax({
+                    url: "/habits-delete",
+                    type: "POST",
+                    data: { targetId_give: targetId },
+                    success: function (response) {
+                        if (response["result"] == "success") {
+                            alert("삭제 성공!");
+                            window.location.reload();
+                        }
+                    },
+                });
+            }
+        },
+        eventSources: [
+            {
+                events: function (_, successCallback, __) {
+                    const currentEmail = location.search.split("=")[1];
+                    $.ajax({
+                        url: "/habits-date",
+                        type: "GET",
+                        dataType: "json",
+                        data: {},
+                        success: function (response) {
+                            const eventsList = response["events_list"];
+                            // console.log(eventsList);
+                            let event = [];
+                            for (let i = 0; i < eventsList.length; i++) {
+                                if (eventsList[i].email === currentEmail) {
+                                    event.push(eventsList[i]);
+                                }
+                            }
+                            // console.log(event);
+                            successCallback(event);
+                        },
+                    });
+                },
+            },
+        ],
+        eventColor: "#4d638c",
+    });
+
+    calendar.render();
+});
+
+function saveEvent(event) {
+    const email = location.search.split("=")[1];
+    $.ajax({
+        type: "POST",
+        url: "/habits-date",
+        data: {
+            date: moment(event.event.start).format("YYYY-MM-DDThh:mm"),
+            title: event.event.title,
+            email: email,
+        },
+        dataType: "json",
+        success: function (response) {
+            if (response["result"] == "success") {
+                alert("저장 성공!");
+            } else {
+                alert("서버 오류!");
+            }
+        },
+    });
+}