From f5c9723f780b791575f4e6da02515fb88067c7d6 Mon Sep 17 00:00:00 2001 From: Pk11 Date: Fri, 10 May 2024 09:04:05 +0000 Subject: [PATCH] Revamp into todo list I never really ended up finding a use for this before, now I want a shared grocerly list and Google ToDo is BS and doesn't support sharing so... I did it myself --- README.md | 12 ++- assets/css/style.css | 145 ++++++++++++++++++++++++++++++ assets/images/bg.gif | Bin 0 -> 80 bytes index.php | 209 +++++++++++++++++++------------------------ 4 files changed, 242 insertions(+), 124 deletions(-) create mode 100644 assets/css/style.css create mode 100644 assets/images/bg.gif diff --git a/README.md b/README.md index c53e17b..d176baa 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,20 @@ -# count.ピケ.コム +# list.ピケ.コム -シンプルなアイテム数トラッカーページです。 +シンプルなTo-Doリスト ## ホスト 1. これをインストール： - PHP (7.3.31を使う) - PostgreSQL (11.14を使う) -2. このリポジトリをクローン、`git clone https://git.xn--rck9c.xn--tckwe/pk11/count.git` +2. このリポジトリをクローン、`git clone https://git.xn--rck9c.xn--tckwe/pk11/list.git` 3. `vars.php.example`を`vars.php`にコピー 4. `vars.php`を返照 5. 以下のテーブルを指定のデータベースに作成： ```sql CREATE TABLE items ( item_id INT GENERATED ALWAYS AS IDENTITY PRIMARY KEY, - priority INT, - count INT, - dec_amount INT, - inc_amount INT, + priority INT DEFAULT 0, + done BOOL DEFAULT FALSE, description VARCHAR(2048), key VARCHAR(64) ); diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..e743dfa --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,145 @@ +* { box-sizing: border-box; } + +@keyframes rainbow { + from { backdrop-filter: hue-rotate(0deg); -webkit-backdrop-filter: hue-rotate(0deg); } + to { backdrop-filter: hue-rotate(360deg); -webkit-backdrop-filter: hue-rotate(360deg); } +} + +body { + background-color: #ebc; + background: url(/assets/images/bg.gif); + background-attachment: fixed; + min-height: 100vh; + color: #201; + margin: 0; + padding: 1px 0.5rem 1rem 0.5rem; + animation: 10s linear 0 rainbow; + animation-iteration-count: infinite; +} + +header { + margin-bottom: 1rem; +} + +kbd { + background: #fde; + border: 2px outset #fde; + padding: 0 2px; +} + +form { + margin-bottom: 0.25rem; +} + +hr { + border-top: 1px solid #c99; + border-bottom: 0; + margin: 0.5rem 2rem; +} + +h1, h2, h3 { + margin-bottom: 0; +} + +h1:first-child, h2:first-child, h3:first-child { + margin-top: 0; +} + +h2 > small, h3 > small { + font-size: 16px; +} + +input:not(:last-child), +button:not(:last-child), +label:not(:last-child) { + margin-right: 0.25rem; +} + +input, button { + color: black; + border: 2px outset #fde; + background-color: #fde; +} + +input:not(:disabled):active, button:not(:disabled):active, +input[type=text], input:not([type]), input[type=number] { + border-style: inset; +} + +input:disabled, button:disabled { + opacity: 50%; +} + +.container { + max-width: 640px; +} + +.center { + margin-left: auto; + margin-right: auto; + display: block; +} + +.block { + background-color: #fcd; + border: 5px outset #dab; + margin-bottom: 10px; + padding: 0 5px; +} + +footer { + background-color: #ebc; + border: 5px inset #dab; + padding: 10px; +} + +footer p:first-of-type { + margin-top: 0; +} +footer p:last-of-type { + margin-bottom: 0; +} + +img.btn { + margin: 0 2px; +} + +.fl { + float: left; +} + +.list-unstyled { + list-style: none; + padding: 0; + margin: 0; +} + +.alert { + border: 3px inset #fde; + margin: 1rem; + padding: 0 0.25rem; +} + +.bg-green { + background-color: #cfc; + border-color: #dfd; +} + +.bg-blue { + background-color: #ccf; + border-color: #ddf; +} + +.bg-red { + background-color: #faa; + border-color: #fbb; +} + +.width-90 { width: 90% } +.d-flex { display: flex } +.flex-fill { flex: 1 1 auto !important } +.text-left { text-align: left } + +.mb-1 { margin-bottom: 0.25rem } +.mb-2 { margin-bottom: 0.5rem } +.mb-3 { margin-bottom: 1rem } diff --git a/assets/images/bg.gif b/assets/images/bg.gif new file mode 100644 index 0000000000000000000000000000000000000000..4cb49d49b7689d7da90a546a763fffb2c7300eef GIT binary patch literal 80 zcmZ?wbh9u|6krfwXkcVGGjr9u-Dh+dfB+=Iz@*Po)R}#&?Lp_H*4uhZ1MJ_|o(xXB jx@E=+XTL>HGbGMzk - アイテム数トラッカー + To-Doリスト - - + + -
- +
+

To-Doリスト

+ [home] + [key] + [source] + [back]
-
+
アイテムの' . ($itemEdit ? '編集' : '追加') . ''; + echo '

アイテムの編集/edit item

'; echo '
'; - echo '
'; - echo ''; - echo ''; + echo '
'; + echo ''; + echo ''; echo '
'; - echo '
'; - echo ''; - echo ''; - echo '
'; - - echo '
'; - echo ''; - echo ''; - echo '
'; - - echo '
'; - echo ''; - echo ''; - echo '
'; - - echo '
'; - echo ''; - echo ''; + echo '
'; + echo ''; + echo ''; echo '
'; echo ''; - echo ''; - if($itemEdit) - echo ''; + echo ''; + echo ''; echo ''; } else if($keyMenu) { //キーを設定 - echo '

キーの設定

'; + echo '

キーの設定/set key

'; echo '
'; - echo '
'; - echo ''; - echo ''; - echo ''; - echo '
'; + echo ''; + echo ''; + echo ''; echo '
'; - echo '

アプリを使用するには、キーを設定する必要があります。キーを持つ誰でもあなたのアイテムを見ることができますので、秘密にしておきましょう。

'; + echo '

アプリを使用するには、キーを設定する必要がありま一覧を見ることができますので、秘密にしておきましょう。

'; } else { //　HPを表示 if(!empty($key)) { if(isset($itemRemove)) { // アイテムを削除 @@ -187,47 +145,30 @@ $desc = $row['description']; $query = 'DELETE FROM items WHERE item_id=$1'; pg_query_params($query, [$itemRemove]); - echo "
{$desc}は削除しました。
"; - } else { - echo "
アイテムはありません。
"; - } - } else if(isset($itemInc)) { // アイテムを増加する - $query = 'SELECT description, inc_amount, count FROM items WHERE items.key=$1 AND item_id=$2'; - $res = pg_query_params($query, [$key, $itemInc]) or die('Query failed: ' . pg_last_error()); - $row = pg_fetch_array($res); - if($row) { - $desc = $row['description']; - $count = $row['count'] + $row['inc_amount']; - $query = 'UPDATE items SET count=$1 WHERE item_id=$2'; - pg_query_params($query, [$count, $itemInc]) or die('Query failed: ' . pg_last_error()); - echo "
{$desc}は{$count}に増加しました。
"; + echo "
{$desc}は削除しました。
"; } else { - echo "
アイテムはありません。
"; + echo "
アイテムはありません。
"; } - } else if(isset($itemDec)) { // アイテムを減少する - $query = 'SELECT description, dec_amount, count FROM items WHERE items.key=$1 AND item_id=$2'; - $res = pg_query_params($query, [$key, $itemDec]) or die('Query failed: ' . pg_last_error()); + } else if(isset($itemDone)) { // アイテム完了 + $query = 'SELECT description, done FROM items WHERE items.key=$1 AND item_id=$2'; + $res = pg_query_params($query, [$key, $itemDone]) or die('Query failed: ' . pg_last_error()); $row = pg_fetch_array($res); if($row) { $desc = $row['description']; - $count = $row['count'] - $row['dec_amount']; - $query = 'UPDATE items SET count=$1 WHERE item_id=$2'; - pg_query_params($query, [$count, $itemDec]) or die('Query failed: ' . pg_last_error()); - echo "
{$desc}は{$count}に減少しました。
"; + $query = 'UPDATE items SET done = NOT done WHERE item_id=$1'; + pg_query_params($query, [$itemDone]) or die('Query failed: ' . pg_last_error()); + $doneText = $row['done'] == 'f' ? '完了しました' : '完了にしませんでした'; + echo "
{$desc}が{$doneText}。
"; } else { - echo "
アイテムはありません。
"; + echo "
アイテムはありません。
"; } + } else if(isset($keySet)) { if(!empty($keySet)) { - echo "
ようこそ、{$shortKey}さん。
"; - } else { - echo "
さようなら、{$shortKey}さん。
"; + echo "
リスト{$shortKey}に変更しました。
"; } } else if(isset($setDescription)) { // アイテムを編集・追加する $itemId = $_POST['item-id']; - $setCount = $_POST['set-count']; - $setInc = $_POST['set-inc']; - $setDec = $_POST['set-dec']; $setPriority = $_POST['set-priority']; if($itemId) { @@ -235,24 +176,24 @@ $res = pg_query_params($query, [$key, $itemId]) or die('Query failed: ' . pg_last_error()); } - if(pg_num_rows($res) == 0) { - $query = 'INSERT INTO items (priority, count, dec_amount, inc_amount, description, key) VALUES ($1, $2, $3, $4, $5, $6)'; - pg_query_params($query, [$setPriority, $setCount, $setDec, $setInc, $setDescription, $key]); - echo "
{$setDescription}は追加しました。
"; + if(!$res || pg_num_rows($res) == 0) { + $query = 'INSERT INTO items (description, key) VALUES ($1, $2)'; + pg_query_params($query, [$setDescription, $key]); + echo "
{$setDescription}は追加しました。
"; } else { - $query = 'UPDATE items SET priority=$1, count=$2, dec_amount=$3, inc_amount=$4, description=$5 WHERE items.key=$6 AND item_id=$7'; - pg_query_params($query, [$setPriority, $setCount, $setDec, $setInc, $setDescription, $key, $itemId]); - echo "
{$setDescription}は更新しました。
"; + $query = 'UPDATE items SET priority=$1, description=$2 WHERE items.key=$3 AND item_id=$4'; + pg_query_params($query, [$setPriority, $setDescription, $key, $itemId]); + echo "
{$setDescription}は更新しました。
"; } } // アイテム一覧 - $query = 'SELECT item_id, count, description, priority FROM items WHERE items.key=$1 ORDER BY items.priority DESC, items.description ASC'; + $query = 'SELECT item_id, description, priority FROM items WHERE items.key=$1 AND done=FALSE ORDER BY items.priority DESC, items.description ASC'; $res = pg_query_params($query, [$key]) or die('Query failed: ' . pg_last_error()); - echo '

アイテム一覧

'; + echo '

アイテム一覧/item list

'; if(pg_num_rows($res) > 0) { - echo '
'; + echo ''; echo '
    '; $priority = -1; while($row = pg_fetch_array($res)) { @@ -261,16 +202,50 @@ $priority = $row['priority']; echo '
  • '; - echo ''; - echo ''; - echo ''; + echo ''; + echo ''; + echo ''; echo '
    • '; } + echo '
'; echo '
'; } + + // 追加ボタン + echo '
'; + echo ''; + echo ''; + echo ''; + echo '
'; + + // 完了一覧 + $query = 'SELECT item_id, description FROM items WHERE items.key=$1 AND done=TRUE ORDER BY items.description ASC'; + $res = pg_query_params($query, [$key]) or die('Query failed: ' . pg_last_error()); + + echo '

完了されたアイテム/completed items

'; + if(pg_num_rows($res) > 0) { + echo '
'; + echo '
    '; + $priority = -1; + while($row = pg_fetch_array($res)) { + if($priority != $row['priority'] && $priority != -1) + echo '
    '; + $priority = $row['priority']; + + echo '
  • '; + echo ''; + echo ''; + echo ''; + echo '
    • '; + } + + echo '
'; + echo '
'; + } + } else { - echo '
キーを設定してください。
'; + echo '
キーを設定してください。
'; } }