Add overtime notification

examples/tapme/css/components/index.css

@@ -15,3 +15,4 @@
 @import "change-language.component.css";
 @import "summary-badge.css";
 @import "list-of-days.css";
+@import "overtime-notification.css";

examples/tapme/css/components/overtime-notification.css

@@ -0,0 +1,50 @@
+.overtime-notification {
+    position: absolute;
+    right: 15px;
+    top: 70px;
+    border-radius: 30px;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+}
+
+body:has(.tags-settings-panel-active) .overtime-notification {
+    right: 515px;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+}
+
+.overtime-notification:hover {
+    transition-duration: 0.5s;
+    width: 60px;
+    height: 60px;
+    right: 5px;
+    top: 60px;
+}
+
+.overtime-notification__color {
+    fill: #df4343;
+}
+
+.overtime-notification:hover .overtime-notification__color {
+    fill: #b22b2b
+}
+
+.overtime-notification-animation svg {
+    animation: overtime-notification-animation 1s infinite;
+    animation-timing-function: ease-in-out;
+}
+
+@-webkit-keyframes overtime-notification-animation {
+    0% {
+        transform: scale(1, 1);
+    }
+    50% {
+        transform: scale(1.2, 1.2);
+    }
+    100% {
+        transform: scale(1, 1);
+    }
+}

examples/tapme/index.html

@@ -56,10 +56,12 @@
 
         <!-- import page model-->
         <script src="./js/pages/tracker/model/tracker.page.model.js"></script>
+        <script src="./js/shared/models/overtime.notification.model.js"></script>
 
         <!-- import shared components-->
         <script src="./js/shared/components/updates-modal-window.component.js"></script>
         <script src="./js/shared/components/updates-notifier.component.js"></script>
+        <script src="./js/shared/components/overtime-notification.component.js"></script>
         <script src="./js/shared/components/movable-list.component.js"></script>
         <script src="./js/shared/components/error.modal.component.js"></script>
         <script src="./js/shared/components/range.component.js"></script>

examples/tapme/js/pages/tracker/components/tracker-page.component.js

@@ -34,6 +34,7 @@ class TrackerPageComponent extends Component {
                 ${TrackerPageInnerComponent}
                 ${TagsSettingsPanelComponent}
                 ${UpdatesNotifierComponent}
+                ${OvertimeNotificationComponent}
             </div>
         `;
     }

examples/tapme/js/pages/tracker/model/tracker.page.model.js

@@ -29,6 +29,14 @@ class TrackerPageModel extends BaseModel {
         return new Date(Math.min(...startedTasks)).toLocaleTimeString();
     }
 
+    hasActiveTask() {
+        return this.tasks.some((task) => task.isActive);
+    }
+
+    getTotalTimeInSeconds() {
+        return this.tasks.reduce((result, task) => result + task.durationInSeconds, 0);
+    }
+
     getTotalTimeFormatted() {
         const durationInSeconds = this.tasks.reduce((result, task) => result + task.durationInSeconds, 0);
 

examples/tapme/js/shared/components/overtime-notification.component.js

@@ -0,0 +1,27 @@
+class OvertimeNotificationComponent extends AutoSubscribeComponent {
+    constructor() {
+        super();
+
+        this.subscribe(trackerPageModel.tasks).redrawOnChange();
+        this.subscribe(overtimeNotificationModel.isOvertime).redrawOnChange();
+    }
+
+    toHtml() {
+        if (!overtimeNotificationModel.getIsOvertime()) {
+            return t`<div></div>`;
+        }
+
+        const containerClass = overtimeNotificationModel.shouldNotify
+            ? 'overtime-notification overtime-notification-animation'
+            : 'overtime-notification';
+
+        return t`
+            <div
+                class="${containerClass}"
+                onclick="${() => overtimeNotificationModel.openNotificationModalWindow()}"
+            >
+                <svg viewBox="0 0 24 24" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>ic_fluent_important_24_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-System-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_important_24_filled" class="overtime-notification__color" fill-rule="nonzero"> <path d="M12,17.0015 C13.3813,17.0015 14.5011,18.1213 14.5011,19.5026 C14.5011,20.8839 13.3813,22.0037 12,22.0037 C10.6187,22.0037 9.49888,20.8839 9.49888,19.5026 C9.49888,18.1213 10.6187,17.0015 12,17.0015 Z M11.999,2.00244 C14.1393,2.00244 15.8744,3.7375 15.8744,5.87781 C15.8744,8.71128 14.8844,12.4318 14.339,14.2756 C14.0294,15.322 13.0657,16.0039 12.0006,16.0039 C10.9332,16.0039 9.96846,15.3191 9.65995,14.2708 L9.43749451,13.4935787 C8.88270062,11.4994608 8.12366,8.3311 8.12366,5.87781 C8.12366,3.7375 9.85872,2.00244 11.999,2.00244 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
+            </div>
+        `;
+    }
+}

examples/tapme/js/shared/models/overtime.notification.model.js

@@ -0,0 +1,77 @@
+class OvertimeNotificationModel extends BaseModel {
+    constructor() {
+        super();
+
+        this.showIntervalInMilliseconds = 10 * 60 * 60 * 1000;
+        this.checkIntervalInMilliseconds = 5 * 60 * 1000;
+        // TODO: Брать на основе среднего рабочего времени, если таких дней более 10
+        this.overtimeTresholdInMilliseconds = 6 * 60 * 60 * 1000;
+
+        this.lastShowedDateStorageKey = 'time-tracker-local-storage-key:overtime-notification:last-showed-date';
+
+        this.shouldNotify = this.createObservable(this._getShouldNotify(), 'shouldNotify');
+        this.isOvertime = this.createObservable(this.getIsOvertime(), 'isOvertime');
+
+        setInterval(() => {
+            this.isOvertime = this.getIsOvertime();
+            this.shouldNotify = this._getShouldNotify();
+        }, this.checkIntervalInMilliseconds);
+    }
+
+    openNotificationModalWindow() {
+        if (this.shouldNotify) {
+            this.markAsViewed();
+        }
+
+        // TODO: Сделать нормальное модальное окно с локализаций
+        alert('You work too much');
+    }
+
+    markAsViewed() {
+        try {
+            localStorage.setItem(this.lastShowedDateStorageKey, new Date().toISOString());
+
+            this.shouldNotify = false;
+        } catch (e) {}
+    }
+
+    getIsOvertime() {
+        return (trackerPageModel.getTotalTimeInSeconds() * 1000) > this.overtimeTresholdInMilliseconds;
+    }
+
+    _getShouldNotify() {
+        if (!this.getIsOvertime()) {
+            return false;
+        }
+
+        const hasActiveTask = trackerPageModel.hasActiveTask();
+
+        const lastShowedDate = this._loadLastShowedDate();
+        if (!lastShowedDate) {
+            return hasActiveTask;
+        }
+
+        const diff = Date.now() - lastShowedDate.getTime();
+
+        return diff > this.showIntervalInMilliseconds && hasActiveTask;
+    }
+
+    /**
+     * @return {undefined|Date}
+     * @private
+     */
+    _loadLastShowedDate() {
+        try {
+            const result = localStorage.getItem(this.lastShowedDateStorageKey);
+            if (!result) {
+                return undefined;
+            }
+
+            return new Date(result);
+        } catch (e) {
+            return undefined;
+        }
+    }
+}
+
+const overtimeNotificationModel = new OvertimeNotificationModel();