fix(0.0.2) refactoring, fixed autoscale, created DB class

alterfo · Aug 13, 2024 · cfe2cf9 · cfe2cf9
1 parent becc04e
commit cfe2cf9
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 90 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@
 
 Стек: electron, sqlite, vite, vanillajs =)
 
+В `yarn dev` режиме консоль приложения можно открыть **шорткатом как в браузере (command+option+I)
+
 Всё хранится во вшитой sqlite, с сервером приложение не общается.
 
 В планах:

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="bg-gray-900 bg-[url(/bg/body-bg.png)] bg-repeat">
+<html lang="en" class="font-serif bg-gray-900 bg-[url(/bg/body-bg.png)] bg-repeat">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/package.json b/package.json
@@ -1,12 +1,11 @@
 {
   "name": "wordly-x",
   "private": true,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build && electron-builder",
-    "preview": "vite preview"
+    "build": "tsc && vite build && electron-builder"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.20",

diff --git a/src/main.ts b/src/main.ts
@@ -4,27 +4,78 @@ import {Temporal} from "@js-temporal/polyfill";
 import {dateUtils} from "./date-utils.ts";
 import {DayData} from "./types.ts";
 
+class DB {
+    constructor() {
+        this.db = new SQLocal('database.sqlite3')
+    }
 
-export const db = new SQLocal('database.sqlite3')
+    db: SQLocal
 
-await db.sql`
-CREATE TABLE IF NOT EXISTS diaries (
-    uuid TEXT PRIMARY KEY NOT NULL,
-    text TEXT NOT NULL,
-    date DATE NOT NULL UNIQUE,
-    word_count INTEGER NOT NULL DEFAULT 0
-)
-`
+    async init() {
+        await this.db.sql`
+            CREATE TABLE IF NOT EXISTS diaries (
+                uuid TEXT PRIMARY KEY NOT NULL,
+                text TEXT NOT NULL,
+                date DATE NOT NULL UNIQUE,
+                word_count INTEGER NOT NULL DEFAULT 0
+            )
+        `
+        await this.db.sql`
+            INSERT INTO diaries (uuid, text, date, word_count) VALUES (
+                ${crypto.randomUUID()},
+                ${""},
+                ${dateUtils.getTodayString()},
+                ${0}
+            )
+            ON CONFLICT(date) DO NOTHING;
+        `
+    }
+    async today() {
+        return await this.db.sql`SELECT * FROM diaries WHERE date = ${dateUtils.getTodayString()}`
+    }
+    async timeline(yyyymm: Temporal.PlainYearMonth) {
+        const timeline: DayData[] = []
+        const isCurrentMonth: boolean = dateUtils.nowInCurrentMonth(yyyymm)
+        const todayDayNumber: number = Temporal.Now.plainDateISO().day - 1
+        const timelineData = await this.db.sql`SELECT date, word_count FROM diaries WHERE date >= ${dateUtils.getFirstDateOfMonth(yyyymm)} AND date <= ${dateUtils.getLastDateOfMonth(yyyymm)}`
+
+        for (let i = 0; i < yyyymm.daysInMonth; i++) {
+            timeline[i] = {
+                day: i,
+                word_count: 0
+            };
+        }
+
+        if (isCurrentMonth) {
+            for (let i = todayDayNumber; i < yyyymm.daysInMonth; i++) {
+                timeline[i].word_count = -1;
+            }
+        }
+
+        timelineData.forEach(({date, word_count}) => {
+            const day = Temporal.PlainDate.from(date).day - 1
+
+            timeline[timeline.findIndex((tlDay) => (tlDay.day === day))] = {
+                day,
+                word_count,
+                is_today: todayDayNumber === day
+            }
+        })
+
+        return timeline
+    }
+    async day(yyyymmdd: string) {
+        return await this.db.sql`SELECT * FROM diaries WHERE date = ${yyyymmdd}`
+    }
+    async updateText(text: string) {
+        await this.db.sql`UPDATE diaries SET text = ${text}, word_count = ${getWordCount(text)} WHERE date = ${dateUtils.getTodayString()}`
+
+    }
+}
+
+const db = new DB()
+await db.init()
 
-await db.sql`
-INSERT INTO diaries (uuid, text, date, word_count) VALUES (
-    ${crypto.randomUUID()},
-    ${""},
-    ${dateUtils.getTodayString()},
-    ${0}
-)
-ON CONFLICT(date) DO NOTHING;
-`
 
 const session = {
     currentDate: dateUtils.getTodayString(),
@@ -34,19 +85,9 @@ const session = {
     set currentViewDate(yyyymmdd: string) {
         this.currentDate = yyyymmdd
     },
-    saving: false,
+    monthString: dateUtils.getMonthStringCapitalized(dateUtils.getYYYYMMfromYYYYMMDD(dateUtils.getTodayString())),
+    isCurrentMonth: dateUtils.nowInCurrentMonth(dateUtils.getYYYYMMfromYYYYMMDD(dateUtils.getTodayString()))
 }
-Object.defineProperty(window, "currentViewDate", {
-    get() {
-    },
-    set(yyyymmdd: string) {
-        this.currentViewDate = yyyymmdd
-    }
-})
-
-const [today] = await db.sql`SELECT * FROM diaries WHERE date = ${dateUtils.getTodayString()}`
-
-console.log(today)
 
 function getWordCount(text: string): number {
     const wordsArr = text.trim().split(/[\s,.;]+/);
@@ -56,39 +97,6 @@ function getWordCount(text: string): number {
     return wordsArr.length;
 }
 
-async function getTimeline(yyyymm: Temporal.PlainYearMonth) {
-    const timeline: DayData[] = []
-    const isCurrentMonth: boolean = dateUtils.nowInCurrentMonth(yyyymm)
-    const todayDayNumber: number = Temporal.Now.plainDateISO().day - 1
-
-    const timelineData = await db.sql`SELECT date, word_count FROM diaries WHERE date >= ${dateUtils.getFirstDateOfMonth(yyyymm)} AND date <= ${dateUtils.getLastDateOfMonth(yyyymm)}`
-
-    for (let i = 0; i < yyyymm.daysInMonth; i++) {
-        timeline[i] = {
-            day: i,
-            word_count: 0
-        };
-    }
-
-    if (isCurrentMonth) {
-        for (let i = todayDayNumber; i < yyyymm.daysInMonth; i++) {
-            timeline[i].word_count = -1;
-        }
-    }
-
-    timelineData.forEach(({date, word_count}) => {
-        const day = Temporal.PlainDate.from(date).day - 1
-
-        timeline[timeline.findIndex((tlDay) => (tlDay.day === day))] = {
-            day,
-            word_count,
-            is_today: todayDayNumber === day
-        }
-    })
-
-    return timeline
-}
-
 function generateTimelineHTML(timeline: DayData[]) {
     let timelineHTML = `
             <div class="grid grid-cols-[repeat(auto-fill,_minmax(1.7em,_1fr))] grid-rows-[50px] gap-2">
@@ -119,10 +127,11 @@ async function generateTextView(yyyymmdd: string) {
     let output = ''
 
     if (dateUtils.isToday(yyyymmdd)) {
+        const [today] = await db.today()
         output += `
             <h2 class="text-blue-50 text-3xl self-start w-full">Автор, жги!</h2>
             <textarea
-                class="custom-paper overflow-hidden w-full text-gray-800 mt-5
+                class="custom-paper overflow-hidden scroll-smooth w-full text-gray-800 mt-5
                 text-2xl leading-10 pt-[50px] px-24 pb-9 mb-16 bg-local bg-blue-300
                 rounded-xl shadow-lg border-t-2 border-b-2 border-white max-w-screen-xl"
                 title="write something"
@@ -133,49 +142,61 @@ async function generateTextView(yyyymmdd: string) {
                 autoFocus>${today.text}</textarea>
         `
     } else {
-        const [entry] = await db.sql`SELECT * FROM diaries WHERE date = ${yyyymmdd}`
-        console.log(entry, yyyymmdd)
+        const [entry] = await db.day(yyyymmdd)
         output = `<pre class="whitespace-pre bg-zinc-300 rounded p-10 m-10">${entry.text}</pre>}`
     }
     return output
 }
 
+
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
         <div class="grid grid-cols-3 text-blue-50 align-middle justify-center items-center h-20">
-            <button><<</button>
-            <h2 class="text-3xl font-bold text-blue-50 text-center">${dateUtils.getMonthStringCapitalized(dateUtils.getYYYYMMfromYYYYMMDD(dateUtils.getTodayString()))}</h2>
-            <button>>></button>
+            <button>
+                <<
+            </button>
+            
+            <h2 class="text-3xl font-bold text-blue-50 text-center">${session.monthString}</h2>
+            
+            <button 
+                disabled="${session.isCurrentMonth}"
+            >
+                >>
+            </button>
         </div>
         
-        <div id="timeline">
-        
-        </div>
+        <div id="timeline"></div>
         <div id="area">
             ${await generateTextView(session.currentViewDate)}
         </div>
 `
 
-generateTimelineHTML(await getTimeline(dateUtils.getYYYYMMfromYYYYMMDD(dateUtils.getTodayString())))
+
+function autosize(this: HTMLTextAreaElement) {
+    const scrollLeft = window.scrollX;
+    const scrollTop = window.scrollY;
+    if (this) {
+        this.style.overflow = 'hidden';
+        this.style.height = "auto";
+        this.style.height = `${Math.max(
+            this.scrollHeight,
+            160
+        )}px`;
+    }
+    window.scrollTo(scrollLeft, scrollTop);
+}
+
+generateTimelineHTML(await db.timeline(dateUtils.getYYYYMMfromYYYYMMDD(dateUtils.getTodayString())))
+autosize.call(document.querySelector<HTMLTextAreaElement>("#textarea")!)
 
 document.querySelector<HTMLTextAreaElement>("#textarea")!
     .addEventListener('input', async function () {
         const text = this.value
 
-        await db.sql`UPDATE diaries SET text = ${text}, word_count = ${getWordCount(text)} WHERE date = ${dateUtils.getTodayString()}`
+        await db.updateText(text)
 
-        generateTimelineHTML(await getTimeline(dateUtils.getYYYYMMfromYYYYMMDD(dateUtils.getTodayString())))
+        generateTimelineHTML(await db.timeline(dateUtils.getYYYYMMfromYYYYMMDD(dateUtils.getTodayString())))
 
-        const scrollLeft = window.scrollX;
-        const scrollTop = window.scrollY;
-        if (this) {
-            this.style.overflow = 'hidden';
-            this.style.height = "auto";
-            this.style.height = `${Math.max(
-                this.scrollHeight,
-                160
-            )}px`;
-        }
-        window.scrollTo(scrollLeft, scrollTop);
+        autosize.call(this);
     })
 
 document.querySelector<HTMLTextAreaElement>("#textarea")!