habits.andr33v.ru/app/pages/habits.vue

<template>
  <div class="habits-container">
    <h3>My Habits</h3>

    <!-- Create Habit Form -->
    <form @submit.prevent="createHabit" class="create-habit-form">
      <h4>Create a New Habit</h4>
      <div v-if="error" class="error-message">{{ error }}</div>
      <input v-model="newHabitName" type="text" placeholder="e.g., Read for 15 minutes" required />
      <div class="days-selector">
        <label v-for="day in daysOfWeek" :key="day" class="day-label">
          <input type="checkbox" :value="day" v-model="newHabitDays" />
          <span>{{ day }}</span>
        </label>
      </div>
      <button type="submit" :disabled="loading.create">
        {{ loading.create ? 'Adding...' : 'Add Habit' }}
      </button>
    </form>

    <!-- Habits List -->
    <div class="habits-list">
      <p v-if="loading.fetch">Loading habits...</p>
      <div v-for="habit in habits" :key="habit.id" class="habit-card">
        <div class="habit-info">
          <h4>{{ habit.name }}</h4>
          <div class="habit-days">
            <span v-for="day in habit.daysOfWeek" :key="day" class="day-chip">{{ day }}</span>
          </div>
        </div>
        <div class="habit-actions">
          <button 
            v-if="isActiveToday(habit) && !isCompleteToday(habit)" 
            @click="completeHabit(habit.id)"
            :disabled="loading.complete === habit.id"
            class="complete-btn">
            {{ loading.complete === habit.id ? '...' : 'Complete' }}
          </button>
          <span v-if="isCompleteToday(habit)" class="completed-text">Done! ✅</span>
        </div>
      </div>
      <p v-if="!loading.fetch && habits.length === 0">No habits yet. Add one above!</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// --- Type Definitions ---
interface Habit {
  id: number;
  name: string;
  daysOfWeek: string[];
  completions: { id: number; date: string }[];
}

// --- Composables ---
const api = useApi();

// --- State ---
const habits = ref<Habit[]>([]);
const newHabitName = ref('');
const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const newHabitDays = ref<string[]>([]);
const error = ref<string | null>(null);
const loading = ref({
  fetch: false,
  create: false,
  complete: null as number | null,
});

// --- Helper Functions ---
const getTodayString = () => new Date().toISOString().split('T')[0];
const getTodayDay = () => {
  const dayIndex = new Date().getDay(); // Sunday is 0
  return daysOfWeek[(dayIndex + 6) % 7]; // Adjust to Mon = 0, Sun = 6 -> then map to our array
};

const isCompleteToday = (habit: Habit) => {
  const today = getTodayString();
  return habit.completions.some(c => c.date.startsWith(today));
};

const isActiveToday = (habit: Habit) => {
  const today = getTodayDay();
  return habit.daysOfWeek.includes(today);
};

// --- API Functions ---
const fetchHabits = async () => {
  loading.value.fetch = true;
  error.value = null;
  try {
    const data = await api<Habit[]>('/habits');
    habits.value = data;
  } catch (err: any) {
    console.error('Failed to fetch habits:', err);
    error.value = 'Could not load habits.';
  } finally {
    loading.value.fetch = false;
  }
};

const createHabit = async () => {
  if (!newHabitName.value || newHabitDays.value.length === 0) {
    error.value = 'Please provide a name and select at least one day.';
    return;
  }
  loading.value.create = true;
  error.value = null;
  try {
    const newHabit = await api<Habit>('/habits', {
      method: 'POST',
      body: {
        name: newHabitName.value,
        daysOfWeek: newHabitDays.value,
      },
    });
    habits.value.push(newHabit); // Optimistic update
    // Reset form
    newHabitName.value = '';
    newHabitDays.value = [];
  } catch (err: any) {
    console.error('Failed to create habit:', err);
    error.value = err.data?.message || 'Could not create habit.';
  } finally {
    loading.value.create = false;
  }
};

const completeHabit = async (habitId: number) => {
  loading.value.complete = habitId;
  error.value = null;
  try {
    const completion = await api<{ id: number; date: string }>(`/habits/${habitId}/complete`, {
      method: 'POST',
    });
    // Optimistic update
    const habit = habits.value.find(h => h.id === habitId);
    if (habit) {
      habit.completions.push(completion);
    }
  } catch (err: any) {
    console.error(`Failed to complete habit ${habitId}:`, err);
    error.value = err.data?.message || 'Could not complete habit.';
  } finally {
    loading.value.complete = null;
  }
};

// --- Lifecycle Hooks ---
onMounted(fetchHabits);
</script>

<style scoped>
.habits-container {
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 40px; /* Space for form */
}

h3 {
  text-align: center;
  margin-bottom: 20px;
}

/* Create Form */
.create-habit-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 30px;
}

.create-habit-form h4 {
  margin-top: 0;
  text-align: center;
}

.create-habit-form input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 15px;
}

.days-selector {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.day-label {
  cursor: pointer;
  text-align: center;
}

.day-label input {
  display: none;
}

.day-label span {
  display: inline-block;
  width: 35px;
  line-height: 35px;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 0.9em;
}

.day-label input:checked + span {
  background-color: #81a1c1;
  color: white;
  border-color: #81a1c1;
}

.create-habit-form button {
  width: 100%;
  padding: 10px;
  background-color: #5e81ac;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

/* Habits List */
.habits-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.habit-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.habit-info h4 {
  margin: 0 0 10px 0;
}

.habit-days {
  display: flex;
  gap: 5px;
}

.day-chip {
  background-color: #eceff4;
  color: #4c566a;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.8em;
}

.complete-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  background-color: #88c0d0;
  color: #2e3440;
  cursor: pointer;
}

.completed-text {
  color: #a3be8c;
  font-weight: bold;
}

.error-message {
  color: #bf616a;
  background-color: #fbe2e5;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
  text-align: center;
}
</style>