Commit

2026-04-06 15:36:51 +09:00
parent 1081ea1074
commit 2e9e100178
10 changed files with 216 additions and 20 deletions
--- a/backend/server.js
+++ b/backend/server.js
@@ -64,6 +64,7 @@ if (!carCols.includes('has_etc')) {
 if (!carCols.includes('tire_type')) {
  db.exec("ALTER TABLE cars ADD COLUMN tire_type TEXT DEFAULT 'ノーマル'");
 }
+db.prepare("UPDATE cars SET tire_type = 'スタッドレス' WHERE tire_type = 'スタットレス'").run();

 // Seed some initial cars if none exist
 const carCount = db.prepare('SELECT COUNT(*) as cnt FROM cars').get();
@@ -86,13 +87,27 @@ function broadcast(message) {
  });
 }

+function normalizeTireType(value) {
+  return value === 'スタットレス' ? 'スタッドレス' : value;
+}
+
+function normalizeCar(car) {
+  if (!car) {
+    return car;
+  }
+  return {
+    ...car,
+    tire_type: normalizeTireType(car.tire_type),
+  };
+}
+
 wss.on('connection', (ws) => {
  ws.on('error', () => {}); // suppress unhandled error events
 });

 // --- Cars API ---
 app.get('/api/cars', (req, res) => {
-  const cars = db.prepare('SELECT * FROM cars ORDER BY id').all();
+  const cars = db.prepare('SELECT * FROM cars ORDER BY id').all().map(normalizeCar);
  res.json(cars);
 });

@@ -104,7 +119,7 @@ app.post('/api/cars', (req, res) => {
  const result = db.prepare(
    'INSERT INTO cars (name, description, inspection_expiry, has_etc, tire_type) VALUES (?, ?, ?, ?, ?)'
  ).run(name.trim(), description, inspection_expiry, has_etc ? 1 : 0, tire_type);
-  const car = db.prepare('SELECT * FROM cars WHERE id = ?').get(result.lastInsertRowid);
+  const car = normalizeCar(db.prepare('SELECT * FROM cars WHERE id = ?').get(result.lastInsertRowid));
  broadcast({ type: 'data_changed', entity: 'cars' });
  res.status(201).json(car);
 });
@@ -120,7 +135,7 @@ app.put('/api/cars/:id', (req, res) => {
  if (result.changes === 0) {
    return res.status(404).json({ error: '車が見つかりません' });
  }
-  const car = db.prepare('SELECT * FROM cars WHERE id = ?').get(req.params.id);
+  const car = normalizeCar(db.prepare('SELECT * FROM cars WHERE id = ?').get(req.params.id));
  broadcast({ type: 'data_changed', entity: 'cars' });
  res.json(car);
 });
--- a/car-login.html
+++ b/car-login.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html> <!-- Gemini ありがとう -->
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ログイン</title>
+    <style>
+        /* CSS（見た目）の設定 */
+        body {
+            font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', sans-serif;
+            background-color: #f3f4f6;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .login-box {
+            background-color: #ffffff;
+            padding: 40px;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 320px;
+            text-align: center;
+        }
+        .login-box h2 {
+            margin: 0 0 20px;
+            color: #333;
+        }
+        .input-group {
+            margin-bottom: 20px;
+            text-align: left;
+        }
+        .input-group label {
+            display: block;
+            font-size: 14px;
+            color: #666;
+            margin-bottom: 8px;
+        }
+        .input-group input {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font-size: 16px;
+        }
+        .login-btn {
+            width: 100%;
+            padding: 12px;
+            background-color: #2563eb;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .login-btn:hover {
+            background-color: #1d4ed8;
+        }
+        .error-msg {
+            color: #ef4444;
+            font-size: 14px;
+            margin-top: 15px;
+            display: none; /* 初期状態は隠しておく */
+        }
+    </style>
+</head>
+<body>
+
+<div class="login-box">
+    <h2>システムログイン</h2>
+    <form id="loginForm">
+        <div class="input-group">
+            <label for="password">パスワード</label>
+            <input type="password" id="password" required placeholder="パスワードを入力">
+        </div>
+        <button type="submit" class="login-btn">ログイン</button>
+        <div id="errorMsg" class="error-msg">パスワードが違います</div>
+    </form>
+</div>
+
+<script>
+    // 【おまけのUX向上】
+    // もしログイン画面を開いた時点で「site_auth」クッキーが残っている場合、
+    // それは「Nginxにパスワードが違うと弾かれて戻ってきた」証拠です。
+    // エラーメッセージを出して、間違ったクッキーはお掃除しておきます。
+    if (document.cookie.includes('site_auth=')) {
+        document.getElementById('errorMsg').style.display = 'block';
+        document.cookie = "site_auth=; path=/; max-age=0"; // クッキーを削除
+    }
+
+    // フォーム送信時の処理
+    document.getElementById('loginForm').addEventListener('submit', function(e) {
+        e.preventDefault(); 
+
+        // 入力されたパスワードを取得
+        const passwordInput = document.getElementById('password').value;
+
+        // 入力値をそのままCookie（site_auth）としてセットする
+        // encodeURIComponent を挟むことで、記号などが入力されても安全にCookie化します
+        document.cookie = "site_auth=" + encodeURIComponent(passwordInput) + "; path=/; max-age=86400";
+        
+        // Nginx（トップページ）へリクエストを送る
+        window.location.href = "/";
+    });
+</script>
+
+</body>
+</html>
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -1,8 +1,13 @@
 const API_BASE = (import.meta.env.VITE_API_BASE_URL ?? '') + '/api';

 async function request(path, options = {}) {
+  const hasBody = options.body !== undefined;
  const res = await fetch(`${API_BASE}${path}`, {
-    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    headers: {
+      ...(hasBody ? { 'Content-Type': 'application/json' } : {}),
+      ...(options.headers ?? {}),
+    },
    ...options,
  });
  if (!res.ok) {
--- a/frontend/src/components/CarManagement.jsx
+++ b/frontend/src/components/CarManagement.jsx
@@ -169,7 +169,7 @@ export default function CarManagement({ reloadKey = 0 }) {
                onChange={(e) => setNewCarTire(e.target.value)}
              >
                <option value="ノーマル">ノーマル</option>
-                <option value="スタットレス">スタットレス</option>
+                <option value="スタッドレス">スタッドレス</option>
              </select>
            </label>
            <button type="submit" className={styles.btnPrimary} disabled={submitting || !newCarName.trim()}>
@@ -248,7 +248,7 @@ export default function CarManagement({ reloadKey = 0 }) {
                          onChange={(e) => setEditTire(e.target.value)}
                        >
                          <option value="ノーマル">ノーマル</option>
-                          <option value="スタットレス">スタットレス</option>
+                          <option value="スタッドレス">スタッドレス</option>
                        </select>
                      </td>
                      <td className={styles.actions}>
@@ -276,7 +276,7 @@ export default function CarManagement({ reloadKey = 0 }) {
                          : '-'}
                      </td>
                      <td>{car.has_etc ? <span className={styles.badgeEtc}>ETC</span> : 'なし'}</td>
-                      <td>{car.tire_type === 'スタットレス' ? <span className={styles.badgeStudless}>スタッドレス</span> : 'ノーマル'}</td>
+                      <td>{car.tire_type === 'スタッドレス' ? <span className={styles.badgeStudless}>スタッドレス</span> : 'ノーマル'}</td>
                      <td className={styles.actions}>
                        <button className={styles.btnEdit} onClick={() => startEdit(car)}>
                          編集
--- a/frontend/src/components/ScheduleView.jsx
+++ b/frontend/src/components/ScheduleView.jsx
@@ -373,7 +373,6 @@ export default function ScheduleView({ reloadKey = 0 }) {
      </div>

      {error && <div className={styles.error}>エラー: {error}</div>}
-      {loading && <div className={styles.loading}>読み込み中...</div>}

      {/* Grid */}
      <div
@@ -383,6 +382,14 @@ export default function ScheduleView({ reloadKey = 0 }) {
          // don't cancel on leave — handled by global events
        }}
      >
+        {loading && (
+          <div
+            className={styles.loadingOverlay}
+            style={{ height: HEADER_HEIGHT }}
+          >
+            読み込み中...
+          </div>
+        )}
        <div
          className={styles.grid}
          style={{ width: LABEL_WIDTH + DAYS_SHOWN * CELL_WIDTH }}
@@ -448,10 +455,15 @@ export default function ScheduleView({ reloadKey = 0 }) {
                    <span className={styles.carBadges}>
                      {car.has_etc ? <span className={styles.badgeEtc}>ETC</span> : null}
                      {car.tire_type === 'スタッドレス' ? <span className={styles.badgeStudless}>スタッドレス</span> : null}
-                      {isInspectionExpirySoon(car.inspection_expiry) ? (
-                        <span className={styles.badgeWarn} title={`車検満了日: ${car.inspection_expiry}（まもなく期限切れ）`}>車検</span>
-                      ) : null}
                    </span>
+                    {isInspectionExpirySoon(car.inspection_expiry) ? (
+                      <span
+                        className={`${styles.badgeWarn} ${styles.badgeWarnWide}`}
+                        title={`車検満了日: ${car.inspection_expiry}（まもなく期限切れ）`}
+                      >
+                        ⚠️ 車検
+                      </span>
+                    ) : null}
                  </span>
                </div>

--- a/frontend/src/components/ScheduleView.module.css
+++ b/frontend/src/components/ScheduleView.module.css
@@ -74,6 +74,23 @@
  font-size: 14px;
 }

+.loadingOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #4b5563;
+  font-size: 14px;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.92);
+  border-bottom: 2px solid #d1d5db;
+  pointer-events: none;
+}
+
 /* Grid wrapper - scrollable */
 .gridWrapper {
  flex: 1;
@@ -157,9 +174,9 @@
 .carLabel {
  flex-shrink: 0;
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  gap: 8px;
-  padding: 0 12px;
+  padding: 6px 12px;
  border-right: 2px solid #d1d5db;
  background: white;
  position: sticky;
@@ -173,12 +190,13 @@
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
+  align-self: center;
 }

 .carLabelContent {
  display: flex;
  flex-direction: column;
-  gap: 3px;
+  gap: 2px;
  min-width: 0;
  flex: 1;
 }
@@ -187,9 +205,11 @@
  font-size: 13px;
  font-weight: 600;
  color: #374151;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.2;
 }

 .carBadges {
@@ -232,6 +252,13 @@
  cursor: default;
 }

+.badgeWarnWide {
+  display: flex;
+  width: 108%;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
 /* Cell area */
 .cellArea {
  display: flex;
--- a/frontend/src/components/TimelineView.jsx
+++ b/frontend/src/components/TimelineView.jsx
@@ -190,10 +190,17 @@ export default function TimelineView({ reloadKey = 0 }) {
      </div>

      {error && <div className={styles.error}>エラー: {error}</div>}
-      {loading && <div className={styles.loading}>読み込み中...</div>}

      {/* Timeline grid */}
      <div className={styles.gridWrapper} ref={gridRef}>
+        {loading && (
+          <div
+            className={styles.loadingOverlay}
+            style={{ height: HEADER_HEIGHT }}
+          >
+            読み込み中...
+          </div>
+        )}
        <div className={styles.grid} style={{ width: totalWidth }}>
          {/* Sticky header: month/day labels */}
          <div className={styles.headerRow} style={{ height: HEADER_HEIGHT }}>
--- a/frontend/src/components/TimelineView.module.css
+++ b/frontend/src/components/TimelineView.module.css
@@ -81,6 +81,23 @@
  font-size: 14px;
 }

+.loadingOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #4b5563;
+  font-size: 14px;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.92);
+  border-bottom: 2px solid #d1d5db;
+  pointer-events: none;
+}
+
 /* Grid */
 .gridWrapper {
  flex: 1;
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -49,6 +49,7 @@ export default defineConfig({
  plugins: [react(), wsProxyPlugin()],
  server: {
    port: 5173,
+    allowedHosts: ["car.33-4.party"],
    proxy: {
      '/api': {
        target: backendOrigin,
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
  "description": "代車スケジュール管理システム",
  "private": true,
  "scripts": {
-    "dev:backend": "cd backend && node server.js",
-    "dev:frontend": "cd frontend && npx vite",
+    "dev:backend": "cd backend && node server.js --port 3007",
+    "dev:frontend": "cd frontend && npx vite --port 3006",
    "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
    "build": "cd frontend && npx vite build"
  },