From 7a9199ef8a29293ef6a5e6a75c9c299dff62f6b7 Mon Sep 17 00:00:00 2001 From: kouta Date: Mon, 2 Dec 2024 07:37:07 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=81=A5=E5=BA=B7=E9=A3=B2=E9=85=92?= =?UTF-8?q?=E7=8E=87=E3=82=922=E4=BB=A5=E4=B8=8B=E3=81=AB=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/Dashboard.css | 4 + client/src/Dashboard.jsx | 29 +- .../DrinkingState/DrinkingState.css | 24 +- .../DrinkingState/DrinkingState.jsx | 6 +- .../LimitDrinkingAmountCalc.css} | 0 .../LimitDrinkingAmountCalc.jsx | 269 ++++++++++++++++++ .../LimitDrinkingAmountJudge.jsx | 117 -------- server/cookie.txt | 1 - 8 files changed, 311 insertions(+), 139 deletions(-) create mode 100644 client/src/Dashboard.css rename client/src/components/{LimitDrinkingAmountJudge/LimitDrinkingAmountJudge.css => LimitDrinkingAmountCalc/LimitDrinkingAmountCalc.css} (100%) create mode 100644 client/src/components/LimitDrinkingAmountCalc/LimitDrinkingAmountCalc.jsx delete mode 100644 client/src/components/LimitDrinkingAmountJudge/LimitDrinkingAmountJudge.jsx diff --git a/client/src/Dashboard.css b/client/src/Dashboard.css new file mode 100644 index 0000000..cc44744 --- /dev/null +++ b/client/src/Dashboard.css @@ -0,0 +1,4 @@ +.left-top-container { + display: flex; +} + diff --git a/client/src/Dashboard.jsx b/client/src/Dashboard.jsx index d7a9641..17937d3 100644 --- a/client/src/Dashboard.jsx +++ b/client/src/Dashboard.jsx @@ -3,7 +3,8 @@ import DrinkingAmountGraph from "./components/DrinkingAmountGraph/DrinkingAmount import ConditionAvg from "./components/ConditionAvg/ConditionAvg"; import ConditionDist from "./components/ConditionDist/ConditionDist"; import DrinkingState from "./components/DrinkingState/DrinkingState"; -import LimitDrinkingAmountJudge from "./components/LimitDrinkingAmountJudge/LimitDrinkingAmountJudge"; +import LimitDrinkingAmountCalc from "./components/LimitDrinkingAmountCalc/LimitDrinkingAmountCalc"; +import "./Dashboard.css"; function Dashboard() { const now = new Date(); @@ -68,21 +69,23 @@ function Dashboard() { {Number(displayMonth) + 2 === 13 ? 1 : Number(displayMonth) + 2}月 {Array.isArray(fetchedData) ? ( -
-
+
+
+
+
+ + +
+ +
- - +
- -
-
-
- +
) : (

データ取得に失敗しました。

diff --git a/client/src/components/DrinkingState/DrinkingState.css b/client/src/components/DrinkingState/DrinkingState.css index 1247a01..664c350 100644 --- a/client/src/components/DrinkingState/DrinkingState.css +++ b/client/src/components/DrinkingState/DrinkingState.css @@ -1,19 +1,24 @@ -l.drinking-state-container { +.drinking-state-container { background-color: white; border-radius: 20px; display: flex; + justify-content: center; + align-items: center; width: 300px; height: 100px; + padding: 0; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); } .drinking-count-container { - margin: 0; - background-color: green; + padding: 0; + width: 50%; } .healthy-drinking-rate-container { - margin: 0; - background-color: blue; + padding: 0; + width: 50%; + border-left: 2px solid gray; } .drinking-count-container h1 { @@ -21,7 +26,16 @@ l.drinking-state-container { font-weight: normal; } +.drinking-count-container span { + font-size: 30px; +} + .healthy-drinking-rate-container h1 { font-size: 15px; font-weight: normal; } + +.healthy-drinking-rate-container span { + font-size: 30px; +} + diff --git a/client/src/components/DrinkingState/DrinkingState.jsx b/client/src/components/DrinkingState/DrinkingState.jsx index d28a77a..7f71e17 100644 --- a/client/src/components/DrinkingState/DrinkingState.jsx +++ b/client/src/components/DrinkingState/DrinkingState.jsx @@ -16,7 +16,7 @@ function DrinkingCount({ fetchedData }) { useEffect(() => { const healthyDrinkingNum = fetchedData.filter( - (data) => data.condition <= 3, + (data) => data.condition <= 2, ).length; setHealthyDrinkingRate( ((healthyDrinkingNum / fetchedData.length) * 100 || 0).toFixed(0), @@ -27,11 +27,11 @@ function DrinkingCount({ fetchedData }) {

飲酒回数

-

{drinkingCount}

+

{drinkingCount}回

健康飲酒率

-

{healthyDrinkingRate}%

+

{healthyDrinkingRate}%

); diff --git a/client/src/components/LimitDrinkingAmountJudge/LimitDrinkingAmountJudge.css b/client/src/components/LimitDrinkingAmountCalc/LimitDrinkingAmountCalc.css similarity index 100% rename from client/src/components/LimitDrinkingAmountJudge/LimitDrinkingAmountJudge.css rename to client/src/components/LimitDrinkingAmountCalc/LimitDrinkingAmountCalc.css diff --git a/client/src/components/LimitDrinkingAmountCalc/LimitDrinkingAmountCalc.jsx b/client/src/components/LimitDrinkingAmountCalc/LimitDrinkingAmountCalc.jsx new file mode 100644 index 0000000..44f60b9 --- /dev/null +++ b/client/src/components/LimitDrinkingAmountCalc/LimitDrinkingAmountCalc.jsx @@ -0,0 +1,269 @@ +import "./LimitDrinkingAmountCalc.css"; +import { useState } from "react"; + +function LimitDrinkingAmountCalc() { + // 状態管理 + const [selectedCondition, setSelectedCondition] = useState(null); + const [selectedDate, setSelectedDate] = useState(""); + const [isDateValid, setIsDateValid] = useState(false); + const [conditionError, setConditionError] = useState(false); + + // エラーメッセージの状態を追加 + const [errorMessage, setErrorMessage] = useState(""); + + // アルコール数量の状態を管理するstate + const [alcoholQuantities, setAlcoholQuantities] = useState({ + beer350: 0, + beer500: 0, + highball350: 0, + highball500: 0, + wine: 0, + sake: 0, + shochu: 0, + whiskey: 0, + }); + + // 体調ボタンがクリックされたときの処理 + const handleConditionClick = (value) => { + setSelectedCondition(value); + setConditionError(false); + }; + + // アルコール量を計算する関数 + const computeTotalAlcohol = () => { + const alcoholData = [ + { quantity: alcoholQuantities.beer350, volume: 350, percentage: 0.05 }, + { quantity: alcoholQuantities.beer500, volume: 500, percentage: 0.05 }, + { + quantity: alcoholQuantities.highball350, + volume: 350, + percentage: 0.07, + }, + { + quantity: alcoholQuantities.highball500, + volume: 500, + percentage: 0.07, + }, + { quantity: alcoholQuantities.wine, volume: 120, percentage: 0.12 }, + { quantity: alcoholQuantities.sake, volume: 180, percentage: 0.15 }, + { quantity: alcoholQuantities.shochu, volume: 100, percentage: 0.25 }, + { quantity: alcoholQuantities.whiskey, volume: 30, percentage: 0.4 }, + ]; + const total = alcoholData.reduce( + (acc, { quantity, volume, percentage }) => { + return acc + quantity * volume * percentage; + }, + 0, + ); + return total; + }; + + // ボタンの無効化 + const isButtonDisabled = !isDateValid || selectedCondition === null; + + return ( +
+ {/* 酒の数量登録 */} +
+

アルコール数量登録

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
お酒アルコール度数数量
+ ビール・発泡酒・チューハイなど +
+ ※1缶＝350mlとして + 		5% + + setAlcoholQuantities({ + ...alcoholQuantities, + beer350: Number(e.target.value), + }) + } + />{" "} + 缶 +
+ ビール・発泡酒・チューハイなど +
+ ※1缶＝500mlとして + 		5% + + setAlcoholQuantities({ + ...alcoholQuantities, + beer500: Number(e.target.value), + }) + } + />{" "} + 缶 +
+ ハイボールなど +
+ ※1缶＝350mlとして + 		7% + + setAlcoholQuantities({ + ...alcoholQuantities, + highball350: Number(e.target.value), + }) + } + />{" "} + 缶 +
+ ハイボールなど +
+ ※1缶＝500mlとして + 		7% + + setAlcoholQuantities({ + ...alcoholQuantities, + highball500: Number(e.target.value), + }) + } + />{" "} + 缶 +
+ ワインなど +
+ ※1杯＝120mlとして + 		12% + + setAlcoholQuantities({ + ...alcoholQuantities, + wine: Number(e.target.value), + }) + } + />{" "} + 杯 +
+ 清酒など +
+ ※1合＝180mlとして + 		15% + + setAlcoholQuantities({ + ...alcoholQuantities, + sake: Number(e.target.value), + }) + } + />{" "} + 合 +
+ 焼酎など +
+ ※コップ1杯＝100mlとして + 		25% + + setAlcoholQuantities({ + ...alcoholQuantities, + shochu: Number(e.target.value), + }) + } + />{" "} + 杯 +
+ ウイスキー、ブランデーなど +
+ ※シングル1杯＝30mlとして + 		40% + + setAlcoholQuantities({ + ...alcoholQuantities, + whiskey: Number(e.target.value), + }) + } + />{" "} + 杯 +
+
+
+ ); +} + +export default LimitDrinkingAmountCalc; diff --git a/client/src/components/LimitDrinkingAmountJudge/LimitDrinkingAmountJudge.jsx b/client/src/components/LimitDrinkingAmountJudge/LimitDrinkingAmountJudge.jsx deleted file mode 100644 index 7aa1cc8..0000000 --- a/client/src/components/LimitDrinkingAmountJudge/LimitDrinkingAmountJudge.jsx +++ /dev/null @@ -1,117 +0,0 @@ -import "./LimitDrinkingAmountJudge.css"; -import { useState } from "react"; - -function LimitDrinkingAmountJudge() { - // 状態管理 - const [selectedCondition, setSelectedCondition] = useState(null); - - return ( -
- {/* 酒の数量登録 */} -
-

アルコール数量登録

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
お酒アルコール度数数量
- ビール・発泡酒・チューハイなど -
- ※1缶＝350mlとして - 		5% - 缶 -
- ビール・発泡酒・チューハイなど -
- ※1缶＝500mlとして - 		5% - 缶 -
- ハイボールなど -
- ※1缶＝350mlとして - 		7% - 缶 -
- ハイボールなど -
- ※1缶＝500mlとして - 		7% - 缶 -
- ワインなど -
- ※1杯＝120mlとして - 		12% - 杯 -
- 清酒など -
- ※1合＝180mlとして - 		15% - 合 -
- 焼酎など -
- ※コップ1杯＝100mlとして - 		25% - 杯 -
- ウイスキー、ブランデーなど -
- ※シングル1杯＝30mlとして - 		40% - 杯 -
-
-
- ); -} - -export default LimitDrinkingAmountJudge; diff --git a/server/cookie.txt b/server/cookie.txt index 77dc47c..c31d989 100644 --- a/server/cookie.txt +++ b/server/cookie.txt @@ -2,4 +2,3 @@ # https://curl.se/docs/http-cookies.html # This file was generated by libcurl! Edit at your own risk. -#HttpOnly_localhost FALSE / TRUE 1732962286 token eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjEsImlhdCI6MTczMjk1NTA4NiwiZXhwIjoxNzMyOTYyMjg2fQ.9Z0UOV8Uo4DcNxVEhZYjoYKzG2VDKkEArENqSkeJ3TM