feat: added fronted for timers_list, added urls for cors

2025-12-29 18:02:18 +03:00
parent 5501e7a632
commit 3df6f3a47d
24 changed files with 501 additions and 894 deletions
--- a/client/capacitor.config.json
+++ b/client/capacitor.config.json
@@ -0,0 +1,8 @@
+{
+  "appId": "com.kawai.focus",
+  "appName": "Kawai-Focus",
+  "webDir": "dist",
+  "server": {
+    "androidScheme": "https"
+  }
+}
--- a/client/capacitor.config.ts
+++ b/client/capacitor.config.ts
@@ -1,9 +0,0 @@
-import type { CapacitorConfig } from '@capacitor/cli';
-
-const config: CapacitorConfig = {
-  appId: 'io.ionic.starter',
-  appName: 'client',
-  webDir: 'dist'
-};
-
-export default config;
--- a/client/cypress.config.js
+++ b/client/cypress.config.js
@@ -2,14 +2,13 @@ import { defineConfig } from 'cypress';

 export default defineConfig({
  e2e: {
-    supportFile: 'tests/e2e/support/e2e.{js,jsx,ts,tsx}',
-    specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:5173',
+    supportFile: 'tests/e2e/support/e2e.js',
+    specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx}',
    videosFolder: 'tests/e2e/videos',
    screenshotsFolder: 'tests/e2e/screenshots',
-    baseUrl: 'http://localhost:5173',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    setupNodeEvents(on, config) {
-      // implement node event listeners here
+      // Пока пусто — можно не трогать
    },
  },
 });
--- a/client/index.html
+++ b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <title>Ionic App</title>
+    <title>Kawai-Focus</title>

    <base href="/" />

@@ -18,13 +18,13 @@

    <!-- add to homescreen for ios -->
    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-title" content="Ionic App" />
+    <meta name="apple-mobile-web-app-title" content="Kawai-Focus" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  </head>

  <body>
    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/main.js"></script>
  </body>

 </html>
--- a/client/ionic.config.json
+++ b/client/ionic.config.json
@@ -3,5 +3,8 @@
  "integrations": {
    "capacitor": {}
  },
-  "type": "vue-vite"
+  "type": "vue-vite",
+  "ionic": {
+    "routerOutlet": false
+  }
 }
--- a/client/package.json
+++ b/client/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "client",
+  "name": "kawai-focus",
  "private": true,
  "version": "0.0.1",
  "type": "module",
@@ -39,5 +39,5 @@
    "vitest": "^0.34.6",
    "vue-tsc": "^2.1.10"
  },
-  "description": "An Ionic project"
+  "description": "Kawai-Focus - приложение для фокусировки внимания на основе таймера Pomodoro."
 }
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -4,6 +4,14 @@
  </ion-app>
 </template>

-<script setup lang="ts">
+<script>
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
+
+export default {
+  name: 'App',
+  components: {
+    IonApp,
+    IonRouterOutlet
+  }
+};
 </script>
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -12,7 +12,7 @@ import '@ionic/vue/css/normalize.css';
 import '@ionic/vue/css/structure.css';
 import '@ionic/vue/css/typography.css';

-/* Optional CSS utils that can be commented out */
+/* Optional CSS utils */
 import '@ionic/vue/css/padding.css';
 import '@ionic/vue/css/float-elements.css';
 import '@ionic/vue/css/text-alignment.css';
@@ -20,17 +20,6 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';

-/**
- * Ionic Dark Mode
- * -----------------------------------------------------
- * For more info, please see:
- * https://ionicframework.com/docs/theming/dark-mode
- */
-
-/* @import '@ionic/vue/css/palettes/dark.always.css'; */
-/* @import '@ionic/vue/css/palettes/dark.class.css'; */
-import '@ionic/vue/css/palettes/dark.system.css';
-
 /* Theme variables */
 import './theme/variables.css';

--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import TimersList from '../views/TimersList/TimersList.vue';
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/timers'
+  },
+  {
+    path: '/timers',
+    name: 'Timers',
+    component: TimersList
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+});
+
+export default router;
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,22 +0,0 @@
-import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import HomePage from '../views/HomePage.vue'
-
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    redirect: '/home'
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: HomePage
-  }
-]
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes
-})
-
-export default router
--- a/client/src/views/HomePage.vue
+++ b/client/src/views/HomePage.vue
@@ -1,56 +0,0 @@
-<template>
-  <ion-page>
-    <ion-header :translucent="true">
-      <ion-toolbar>
-        <ion-title>Blank</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Blank</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <div id="container">
-        <strong>Ready to create an app?</strong>
-        <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-      </div>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script setup lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-</script>
-
-<style scoped>
-#container {
-  text-align: center;
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
-
-  color: #8c8c8c;
-
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}
-</style>
--- a/client/src/views/TimersList/TimersList.css
+++ b/client/src/views/TimersList/TimersList.css
@@ -0,0 +1,277 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.timers-container {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.page-header {
+  background-color: #ffffff;
+  padding: 16px 16px;
+  border-bottom: 1px solid #e0e0e0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.page-header h1 {
+  font-size: 32px;
+  font-weight: 400;
+  color: #212121;
+  letter-spacing: -0.5px;
+}
+
+.timers-list {
+  padding: 16px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.loading,
+.error-message,
+.empty-state {
+  background-color: #ffffff;
+  border-radius: 4px;
+  padding: 24px;
+  text-align: center;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.loading p,
+.empty-state p {
+  color: #666;
+  font-size: 14px;
+}
+
+.error-message {
+  background-color: #ffebee;
+  border-left: 4px solid #f44336;
+}
+
+.error-message p {
+  color: #c62828;
+}
+
+.timer-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.timer-card {
+  background-color: #ffffff;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.timer-card:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+}
+
+.timer-card.expanded {
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease;
+}
+
+.card-header:hover {
+  background-color: #fafafa;
+}
+
+.timer-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 16px;
+  color: #1976d2;
+  font-size: 24px;
+}
+
+.timer-info {
+  flex: 1;
+}
+
+.timer-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #212121;
+  margin: 0 0 4px 0;
+  line-height: 1.4;
+}
+
+.timer-subtitle {
+  font-size: 13px;
+  color: #757575;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.expand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: #999;
+  font-size: 24px;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.timer-card.expanded .expand-icon {
+  transform: rotate(180deg);
+}
+
+.card-content {
+  border-top: 1px solid #e0e0e0;
+  padding: 16px;
+  background-color: #fafafa;
+  animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 500px;
+  }
+}
+
+.timer-details {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  font-size: 14px;
+}
+
+.detail-label {
+  color: #666;
+  font-weight: 500;
+}
+
+.detail-value {
+  color: #212121;
+  font-weight: 400;
+}
+
+.card-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 8px;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-height: 36px;
+}
+
+.btn ion-icon {
+  font-size: 18px;
+}
+
+.btn-primary {
+  background-color: #1976d2;
+  color: #ffffff;
+}
+
+.btn-primary:hover {
+  background-color: #1565c0;
+  box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
+}
+
+.btn-primary:active {
+  background-color: #0d47a1;
+}
+
+.btn-secondary {
+  background-color: #e0e0e0;
+  color: #212121;
+}
+
+.btn-secondary:hover {
+  background-color: #d0d0d0;
+}
+
+.btn-secondary:active {
+  background-color: #c0c0c0;
+}
+
+.btn-danger {
+  background-color: #fff3e0;
+  color: #e65100;
+}
+
+.btn-danger:hover {
+  background-color: #ffe0b2;
+}
+
+.btn-danger:active {
+  background-color: #ffcc80;
+}
+
+@media (max-width: 600px) {
+  .page-header {
+    padding: 12px 16px;
+  }
+  .page-header h1 {
+    font-size: 24px;
+  }
+  .timers-list {
+    padding: 8px;
+  }
+  .card-header {
+    padding: 12px;
+  }
+  .timer-icon {
+    width: 36px;
+    height: 36px;
+    margin-right: 12px;
+  }
+  .card-content {
+    padding: 12px;
+  }
+  .card-actions {
+    grid-template-columns: 1fr 1fr;
+  }
+  .btn {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+}
--- a/client/src/views/TimersList/TimersList.html
+++ b/client/src/views/TimersList/TimersList.html
@@ -0,0 +1,81 @@
+<div class="timers-container">
+  <div class="page-header">
+    <h1>Таймеры</h1>
+  </div>
+
+  <div class="timers-list">
+    <!-- Loading state -->
+    <div v-if="loading" class="loading">
+      <p>Загрузка таймеров...</p>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="error-message">
+      <p>{{ error }}</p>
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="timers.length === 0" class="empty-state">
+      <p>Нет таймеров</p>
+    </div>
+
+    <!-- Timers list -->
+    <div v-else class="timer-cards">
+      <div
+        v-for="timer in timers"
+        :key="timer.id"
+        class="timer-card"
+        :class="{ expanded: expandedId === timer.id }"
+      >
+        <!-- Card header -->
+        <div class="card-header" @click="toggleExpand(timer.id)">
+          <div class="timer-icon">
+            <ion-icon :icon="timerOutline"></ion-icon>
+          </div>
+          <div class="timer-info">
+            <h3 class="timer-title">{{ timer.title }}</h3>
+            <p class="timer-subtitle">{{ timer.count_pomodoro }} помидоров по {{ timer.pomodoro_time }} минут</p>
+          </div>
+          <div class="expand-icon">
+            <ion-icon
+              :icon="expandedId === timer.id ? chevronUp : chevronDown"
+            ></ion-icon>
+          </div>
+        </div>
+
+        <!-- Card content -->
+        <div v-show="expandedId === timer.id" class="card-content">
+          <div class="timer-details">
+            <div class="detail-row">
+              <span class="detail-label">Название:</span>
+              <span class="detail-value">{{ timer.title }}</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Длительность помидора:</span>
+              <span class="detail-value">{{ timer.pomodoro_time }} минут</span>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">Количество помидоров:</span>
+              <span class="detail-value">{{ timer.count_pomodoro }}</span>
+            </div>
+          </div>
+
+          <div class="card-actions">
+            <button class="btn btn-primary">
+              <ion-icon :icon="playCircleOutline"></ion-icon>
+              Открыть
+            </button>
+            <button class="btn btn-secondary">
+              <ion-icon :icon="pencilOutline"></ion-icon>
+              Редактировать
+            </button>
+            <button class="btn btn-danger">
+              <ion-icon :icon="trashOutline"></ion-icon>
+              Удалить
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/client/src/views/TimersList/TimersList.js
+++ b/client/src/views/TimersList/TimersList.js
@@ -0,0 +1,67 @@
+import { IonIcon } from '@ionic/vue';
+import {
+  timerOutline,
+  chevronUp,
+  chevronDown,
+  playCircleOutline,
+  pencilOutline,
+  trashOutline
+} from 'ionicons/icons';
+
+export default {
+  name: 'TimersList',
+  components: {
+    IonIcon,
+  },
+  setup() {
+    // Возвращаем иконки, чтобы они были доступны в шаблоне
+    return {
+      timerOutline,
+      chevronUp,
+      chevronDown,
+      playCircleOutline,
+      pencilOutline,
+      trashOutline,
+    };
+  },
+  data() {
+    return {
+      timers: [],
+      expandedId: null,
+      loading: true,
+      error: null,
+      apiUrl: 'http://127.0.0.1:8090/api/timers'
+    };
+  },
+  mounted() {
+    this.fetchTimers();
+  },
+  methods: {
+    async fetchTimers() {
+      try {
+        this.loading = true;
+        this.error = null;
+
+        // Для Tauri invoke (раскомментировать при необходимости)
+        // const { invoke } = window.__TAURI__.tauri;
+        // this.timers = await invoke('list_timers');
+
+        const response = await fetch(`${this.apiUrl}/`);
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        this.timers = await response.json();
+        this.loading = false;
+      } catch (err) {
+        this.error = `Ошибка загрузки таймеров: ${err.message}`;
+        this.loading = false;
+        console.error('Fetch error:', err);
+      }
+    },
+    toggleExpand(timerId) {
+      this.expandedId = this.expandedId === timerId ? null : timerId;
+    }
+  },
+};
--- a/client/src/views/TimersList/TimersList.vue
+++ b/client/src/views/TimersList/TimersList.vue
@@ -0,0 +1,4 @@
+<!-- TimersList.vue -->
+<template src="./TimersList.html"></template>
+<script src="./TimersList.js"></script>
+<style src="./TimersList.css" scoped></style>
--- a/client/src/vite-env.d.ts
+++ b/client/src/vite-env.d.ts
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "strict": true,
-    "jsx": "preserve",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true,
-    "noEmit": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
--- a/client/tsconfig.node.json
+++ b/client/tsconfig.node.json
@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -1,23 +1,15 @@
-/// <reference types="vitest" />
-
-import legacy from '@vitejs/plugin-legacy'
+import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
-import { defineConfig } from 'vite'

 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [
    vue(),
-    legacy()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
-  },
-  test: {
-    globals: true,
-    environment: 'jsdom'
  }
 })