nisse/habit-statistics
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

Compare commits

base: nisse:23949b86b41d12fdbc10be7c0668c6d4a0c3bc14
Branches Tags
nisse:main
nisse:develop
nisse:form-componentification
..
compare: nisse:1eef3b2301e2c32392fd76a1becd7ab49a609336
Branches Tags
nisse:develop
nisse:form-componentification
nisse:main

No commits in common. "23949b86b41d12fdbc10be7c0668c6d4a0c3bc14" and "1eef3b2301e2c32392fd76a1becd7ab49a609336" have entirely different histories.
23949b86b4 ... 1eef3b2301

10 changed files with 290 additions and 164 deletions
Show Stats Expand all files Collapse all files

17
app/Http/Controllers/HabitController.php
View File

@ -20,11 +20,7 @@ public function index()
public function create() public function create()
{ {
$habit = new Habit;
return view('habits.create', [ return view('habits.create', [
'habit' => $habit,
'update' => 0,
'today' => now()->format('Y-m-d') 'today' => now()->format('Y-m-d')
]); ]);
} }
@ -51,7 +47,6 @@ public function store(HabitsRequest $request)
foreach ($tagsArray as $tag) { foreach ($tagsArray as $tag) {
$tag = Tag::firstOrCreate(['name' => $tag], ['habit_id' => $habit->id]); $tag = Tag::firstOrCreate(['name' => $tag], ['habit_id' => $habit->id]);
$habit->tags()->attach($tag); $habit->tags()->attach($tag);
//Todo: make sure tag isn't already linked
} }
$habit->save(); $habit->save();
} }
@ -65,7 +60,6 @@ public function show($id)
return view('habits.show', [ return view('habits.show', [
'habit' => $habit, 'habit' => $habit,
'update' => 0,
'entries' => $habit->entries->sortByDesc('date') 'entries' => $habit->entries->sortByDesc('date')
]); ]);
@ -73,21 +67,10 @@ public function show($id)
public function edit($id) public function edit($id)
{ {
$habit = Habit::find($id);
return view('habits.edit', [
'habit' => $habit,
'update' => 1
]);
} }
public function update(Request $request, $id) public function update(Request $request, $id)
{ {
$habit = Habit::find($id);
$habit->update($request->safe());
} }
public function destroy($id) public function destroy($id)

10
app/Models/Habit.php
View File

@ -66,16 +66,6 @@ public function isDueToday(): bool
return false; // Test date overshot; isn't due today return false; // Test date overshot; isn't due today
} }
public function tagsToString(): string {
$output = "";
foreach($this->tags as $tag) {
$output = $output . " " . $tag->name;
}
return $output;
}
public function entries(): HasMany public function entries(): HasMany
{ {
return $this->hasMany(Entry::class); return $this->hasMany(Entry::class);

17
app/View/Components/HabitForm.php Normal file
View File

@ -0,0 +1,17 @@
<?php
namespace App\View\Components;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class HabitForm extends Component
{
public $route;
public $method;
public function render(): View
{
return view('components.habit-form');
}
}

129
resources/views/components/habits/createOrUpdate.blade.php → resources/views/components/habit-form.blade.php
View File

@ -1,22 +1,13 @@
<div> <div>
<form action="{{$update ? route('habits.update', $habit) : route('habits.store')}}" method="post"> <form action="{{$route}}" method="{{$method }}">
@if ($update)
@method('PUT')
@endif
@csrf
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
@csrf
<x-pagecard> <x-pagecard>
<!-- Name --> <!-- Name -->
<div> <div>
<x-input-label for="name" :value="__('Name')"/> <x-input-label for="name" :value="__('Name')"/>
<x-text-input id="name" class="block mt-1 w-full" type="text" name="name" <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" placeholder="Swimming"
placeholder="Swimming" required autofocus autocomplete="name" required :value="old('name')" required autofocus autocomplete="name"/>
:value="old('name', $habit->name)"
/>
<x-input-error :messages="$errors->get('name')" class="mt-2"/> <x-input-error :messages="$errors->get('name')" class="mt-2"/>
</div> </div>
@ -24,9 +15,8 @@
<div class="mt-6"> <div class="mt-6">
<x-input-label for="question" value="Question to ask"/> <x-input-label for="question" value="Question to ask"/>
<x-text-input id="question" class="block mt-1 w-full" type="text" name="question" <x-text-input id="question" class="block mt-1 w-full" type="text" name="question"
placeholder="For how long did I swim?" :value="old('question', $habit->question)" placeholder="For how long did I swim?" :value="old('question')"
autocomplete="question"/> autocomplete="question"/>
<x-input-error :messages="$errors->get('question')" class="mt-2"/> <x-input-error :messages="$errors->get('question')" class="mt-2"/>
</div> </div>
@ -35,9 +25,7 @@
<x-input-label for="category" value="Category"/> <x-input-label for="category" value="Category"/>
<x-text-input id="category" class="block mt-1 w-full" type="text" name="category" <x-text-input id="category" class="block mt-1 w-full" type="text" name="category"
placeholder="Exercise" placeholder="Exercise"
:value="old('category', isset($habit->category->name) ? $habit->category->name : '' )" :value="old('category')" autocomplete="category"/>
autocomplete="category"/>
<x-input-error :messages="$errors->get('category')" class="mt-2"/> <x-input-error :messages="$errors->get('category')" class="mt-2"/>
</div> </div>
@ -46,7 +34,7 @@
<x-input-label for="tag" value="Tags"/> <x-input-label for="tag" value="Tags"/>
<x-text-input id="tag" class="block mt-1 w-full" type="text" name="tags" <x-text-input id="tag" class="block mt-1 w-full" type="text" name="tags"
placeholder="Exercise, swimming, health" placeholder="Exercise, swimming, health"
:value="old('tag', $habit->tagsToString())" autocomplete="tag"/> :value="old('tag')" autocomplete="tag"/>
<x-input-error :messages="$errors->get('tag')" class="mt-2"/> <x-input-error :messages="$errors->get('tag')" class="mt-2"/>
</div> </div>
</x-pagecard> </x-pagecard>
@ -80,8 +68,7 @@ class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark
<x-text-input id="habit-suffix-name" class="inline-block mt-1 disabled:opacity-50 w-1/2" <x-text-input id="habit-suffix-name" class="inline-block mt-1 disabled:opacity-50 w-1/2"
type="text" name="suffix" disabled required type="text" name="suffix" disabled required
placeholder="minutes" placeholder="minutes"
:value="old('suffix', isset($habit->suffix) ? $habit->suffix : '')" :value="old('suffix')" autocomplete="suffix"/>
autocomplete="suffix"/>
<x-input-error :messages="$errors->get('suffix')" class="mt-2"/> <x-input-error :messages="$errors->get('suffix')" class="mt-2"/>
</div> </div>
@ -91,27 +78,22 @@ class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark
<div class=""> <div class="">
<x-input-label for="schedule-value" value="Schedule Recurrence"></x-input-label> <x-input-label for="schedule-value" value="Schedule Recurrence"></x-input-label>
<div class="text-sm my-1 text-gray-700 mr-20"> <div class="text-sm my-1 text-gray-700 mr-20">
The recurrence value determines how often you will be inquired about this habit. The recurrence value determines how often you will be inquired about this habit. Note: this is
Note: this is
different from setting a goal. different from setting a goal.
</div> </div>
<div class="inline-block mt-4 pr-1"> <div class="inline-block mt-4 pr-1">
Every Every
</div> </div>
<x-text-input id="schedule-value" class="inline-block mt-1 w-20" type="number" <x-text-input id="schedule-value" class="inline-block mt-1 w-20" type="number"
placeholder="" min="0" value="1" name="schedule_value" placeholder="" min="0" value="1"
:value="old('schedule_value', isset($habit->schedule_value) ? $habit->schedule_value : '0')" name="schedule_value"/>
/>
<x-input-error :messages="$errors->get('schedule_value')" class="mt-2"/> <x-input-error :messages="$errors->get('schedule_value')" class="mt-2"/>
<select name="schedule_unit" id="schedule-unit" <select name="schedule-unit" id="schedule-unit"
class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"> class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm">
<option value="day">days</option>
@foreach(['day', 'week', 'month'] as $time_unit) <option value="week">weeks</option>
<option value="{{$time_unit}}" <option value="month">months</option>
@if($habit->schedule_unit === $time_unit) selected @endif >{{$time_unit}}s
</option>
@endforeach
</select> </select>
<div class="inline-block mt-1 px-1"> <div class="inline-block mt-1 px-1">
@ -119,8 +101,9 @@ class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900
</div> </div>
<x-text-input type="date" class="inline-block mt-1" name="schedule_start" id="schedule_start" <x-text-input type="date" class="inline-block mt-1" name="schedule_start" id="schedule_start"
:value="old('schedule_start', isset($habit->schedule_start) ? $habit->schedule_start : $today)" value="{{$today}}"
required/> required></x-text-input>
</div> </div>
</x-pagecard> </x-pagecard>
@ -130,109 +113,65 @@ class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900
<x-input-label value="Goal Type"></x-input-label> <x-input-label value="Goal Type"></x-input-label>
<div class="text-sm my-2 text-gray-700"> <div class="text-sm my-2 text-gray-700">
Setting a goal will show you how well you're doing, based on the entries made. Setting a goal will show you how well you're doing, based on the entries made.
If you only want to record the frequency of an activity, you don't need to set a If you only want to record the frequency of an activity, you don't need to set a goal.
goal.
</div> </div>
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<input id="goal-type-1" type="radio" value="none" name="goal_type" <input id="goal-type-1" type="radio" value="none" name="goal_type"
onclick="toggleGoalSchedule(true)" @if($habit->goal_type === 'none') checked @elseif(!isset($habit->goal_type)) checked @endif onclick="toggleGoalSchedule(true)" checked
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="goal-type-1" class="ml-2">No goal</label> <label for="goal-type-1" class="ml-2">No goal</label>
</div> </div>
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<input id="goal-type-2" type="radio" value="schedule" name="goal_type" <input id="goal-type-2" type="radio" value="schedule" name="goal_type"
onclick="toggleGoalSchedule(true)" @if($habit->goal_type === 'schedule') checked @endif onclick="toggleGoalSchedule(true)"
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="goal-type-2" class="ml-2 ">Same as schedule</label> <label for="goal-type-2" class="ml-2 ">Same as schedule</label>
</div> </div>
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<input id="goal-type-3" type="radio" value="custom" name="goal_type" <input id="goal-type-3" type="radio" value="custom" name="goal_type"
onclick="toggleGoalSchedule(false)" @if($habit->goal_type === 'custom') checked @endif onclick="toggleGoalSchedule(false)"
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="goal-type-3" class="ml-2 ">Custom schedule</label> <label for="goal-type-3" class="ml-2 ">Custom schedule</label>
</div> </div>
</div> </div>
<hr class="mt-4">
<!-- goal schedule --> <!-- goal schedule -->
<div class="mt-4"> <div class="mt-6">
<x-input-label for="goal-schedule-unit" value="Goal Recurrence"/> <x-input-label for="goal-schedule-unit" value="Goal Recurrence"></x-input-label>
<div class="inline-block mt-1 pr-1"> <div class="inline-block mt-1 pr-1">
Every Every
</div> </div>
<x-text-input id="goal-schedule-amount" class="inline-block mt-1 w-20" type="number" <x-text-input id="goal-schedule-amount" class="inline-block mt-1 w-20" type="number"
:value="old('goal_value', isset($habit->goal_value) ? $habit->goal_value : '0')" value="1" placeholder="" min="0" disabled required
placeholder="" min="0" disabled name="goal_value"/>
required name="goal_value"/>
<x-input-error :messages="$errors->get('goal_value')" class="mt-2"/> <x-input-error :messages="$errors->get('goal_value')" class="mt-2"/>
<select name="goal_unit" id="goal-schedule-unit" <select name="goal_unit" id="goal-schedule-unit"
disabled required disabled required
class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm disabled:opacity-50"> class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm disabled:opacity-50">
@foreach(['day', 'week', 'month'] as $time_unit) <option value="day">days</option>
<option value="{{$time_unit}}" <option value="week">weeks</option>
@if($habit->goal_unit === $time_unit) selected @endif >{{$time_unit}}s <option value="month">months</option>
</option>
@endforeach
</select> </select>
<div class="inline-block mt-1 px-1"> <div class="inline-block mt-1 px-1">
starting starting
</div> </div>
<x-text-input type="date" class="inline-block mt-1" name="goal_start" id="goal-start" <x-text-input type="date" class="inline-block mt-1" name="goal-start" id="goal-start"
:value="old('goal_start', isset($habit->goal_start) ? $habit->goal_start : $today)" disabled required/> value="{{$today}}" disabled
required></x-text-input>
</div> </div>
</x-pagecard> </x-pagecard>
<x-pagecard>
<div class="w-full h-full">
<div class="grid grid-row gap-10 h-full content-center">
<div class="text-7xl text-center">
🚀🌌
</div>
<div>
<hr>
</div>
<div class="text-center">
<x-primary-button class="px-20 py-4 shadow-md">
@if(isset($habit))
Save Changes
@else
Create Habit
@endif
</x-primary-button>
</div> </div>
</div>
</div>
</x-pagecard>
<!-- Submit --> <!-- Submit -->
<div class="w-full"> <div class="w-full">
<div class=" my-6 float-right">
<x-primary-button class="px-20 py-2">Create habit</x-primary-button>
</div> </div>
</div> </div>
</form> </form>
<script>
const habit_suffix = document.getElementById('habit-suffix-name');
const goal_amount = document.getElementById('goal-schedule-amount');
const goal_unit = document.getElementById('goal-schedule-unit');
const goal_start = document.getElementById('goal-start');
function toggleHabitValueSuffix(value) {
habit_suffix.disabled = value;
}
function toggleGoalSchedule(value) {
goal_amount.disabled = value;
goal_unit.disabled = value;
goal_start.disabled = value;
}
</script>
</div> </div>

2
resources/views/components/pagecard.blade.php
View File

@ -1,5 +1,5 @@
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-md sm:rounded-lg "> <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-md sm:rounded-lg ">
<div class="p-6 text-gray-900 dark:text-gray-100 h-full"> <div class="p-6 text-gray-900 dark:text-gray-100">
{{ $slot }} {{ $slot }}

13
resources/views/entries/create.blade.php
View File

@ -40,30 +40,27 @@ class="rounded w-32 h-32 dark:bg-gray-900 border-gray-300 dark:border-gray-700 t
Value Value
@endif @endif
<!-- Note, Date, Submit --> <!-- Note and Date -->
<div class="col-span-2 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg h-full"> <div class="col-span-2 bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg h-full">
<div class="p-6 text-gray-900 dark:text-gray-100 h-full"> <div class="p-6 text-gray-900 dark:text-gray-100">
<div class="grid grid-col content-between h-full"> <div class="">
<div> <div>
<x-input-label for="note">Note</x-input-label> <x-input-label for="note">Note</x-input-label>
<textarea name="note" id="note" rows="3" placeholder="Adding a note is optional." <textarea name="note" id="note" rows="3" placeholder="Adding a note is optional."
class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm disabled:opacity-50"></textarea> class="w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm disabled:opacity-50"></textarea>
</div> </div>
<div class="flex flex-row justify-between content-end">
<div> <div>
<x-input-label for="input-date">Date</x-input-label> <x-input-label for="input-date">Date</x-input-label>
<x-text-input type="date" name="input-date" value="{{today()->format('Y-m-d')}}" <x-text-input type="date" name="input-date" value="{{today()->format('Y-m-d')}}"
max="{{today()->format('Y-m-d')}}"> max="{{today()->format('Y-m-d')}}">
</x-text-input> </x-text-input>
</div> </div>
<div class="self-end"> <div class="">
<input type="hidden" name="habit-id" value="{{$habit->id}}"> <input type="hidden" name="habit-id" value="{{$habit->id}}">
<x-primary-button class="py-3">Insert entry</x-primary-button> <x-primary-button>Insert entry</x-primary-button>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>

216
resources/views/habits/create.blade.php
View File

@ -1,10 +1,224 @@
<x-app-layout> <x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Create new habit
</h2>
</x-slot>
<div class="py-4"> <div class="py-4">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<x-habits.createOrUpdate :today="now()->format('Y-m-d')" :habit="$habit" :update="$update"/>
<form action="{{route('habits.store') }}" method="post">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
@csrf
<x-pagecard>
<!-- Name -->
<div>
<x-input-label for="name" :value="__('Name')"/>
<x-text-input id="name" class="block mt-1 w-full" type="text" name="name"
placeholder="Swimming" required
:value="old('name')" required autofocus autocomplete="name"/>
<x-input-error :messages="$errors->get('name')" class="mt-2"/>
</div>
<div class="mt-6">
<x-input-label for="question" value="Question to ask"/>
<x-text-input id="question" class="block mt-1 w-full" type="text" name="question"
placeholder="For how long did I swim?"
:value="old('question')" autocomplete="question"/>
<x-input-error :messages="$errors->get('question')" class="mt-2"/>
</div>
<!-- Category input -->
<div class="mt-6">
<x-input-label for="category" value="Category"/>
<x-text-input id="category" class="block mt-1 w-full" type="text" name="category"
placeholder="Exercise"
:value="old('category')" autocomplete="category"/>
<x-input-error :messages="$errors->get('category')" class="mt-2"/>
</div>
<!-- tag input -->
<div class="mt-6">
<x-input-label for="tag" value="Tags"/>
<x-text-input id="tag" class="block mt-1 w-full" type="text" name="tags"
placeholder="Exercise, swimming, health"
:value="old('tag')" autocomplete="tag"/>
<x-input-error :messages="$errors->get('tag')" class="mt-2"/>
</div>
</x-pagecard>
<x-pagecard>
<!-- Type -->
<div class="">
<x-input-label for="habit_type" value="Habit Type"></x-input-label>
<div class="flex items-center mb-1 mt-1">
<!-- Radio button: todo-->
<input id="habit-type-1" type="radio" value="todo" name="type"
onclick="toggleHabitValueSuffix(true)" checked
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="habit-type-1" class="ml-2">Todo</label>
</div>
<!-- Radio button: value-->
<div class="flex items-center mb-1">
<input id="habit-type-2" type="radio" value="value" name="type"
onclick="toggleHabitValueSuffix(false)"
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="habit-type-2" class="ml-2 ">Amount and suffix</label>
</div>
<!-- Radio button: barely know her -->
{{-- <div class="flex items-center mb-1">--}}
{{-- <input id="habit-type-3" type="radio" value="track" name="type"--}}
{{-- onclick="toggleTracker()"--}}
{{-- class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">--}}
{{-- <label for="habit-type-3" class="ml-2 ">Trackable</label>--}}
{{-- </div>--}}
<!-- Value / Suffix -->
<x-input-label for="value" value="Suffix" class="mt-4"
id="habit-suffix-label"/>
<x-text-input id="habit-suffix-name" class="inline-block mt-1 disabled:opacity-50 w-1/2"
type="text" name="suffix" disabled required
placeholder="minutes"
:value="old('suffix')" autocomplete="suffix"/>
<x-input-error :messages="$errors->get('suffix')" class="mt-2"/>
</div>
<hr class="my-5">
<!-- Schedule -->
<div class="">
<x-input-label for="schedule-value" value="Schedule Recurrence"></x-input-label>
<div class="text-sm my-1 text-gray-700 mr-20">
The recurrence value determines how often you will be inquired about this habit. Note: this is different from setting a goal.
</div>
<div class="inline-block mt-4 pr-1">
Every
</div>
<x-text-input id="schedule-value" class="inline-block mt-1 w-20" type="number"
placeholder="" min="0" value="1"
name="schedule_value"/>
<x-input-error :messages="$errors->get('schedule_value')" class="mt-2"/>
<select name="schedule-unit" id="schedule-unit"
class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm">
<option value="day">days</option>
<option value="week">weeks</option>
<option value="month">months</option>
</select>
<div class="inline-block mt-1 px-1">
starting
</div>
<x-text-input type="date" class="inline-block mt-1" name="schedule_start" id="schedule_start"
value="{{$today}}"
required></x-text-input>
</div>
</x-pagecard>
<!-- Goal -->
<x-pagecard>
<div class="">
<x-input-label value="Goal Type"></x-input-label>
<div class="text-sm my-2 text-gray-700">
Setting a goal will show you how well you're doing, based on the entries made.
If you only want to record the frequency of an activity, you don't need to set a goal.
</div>
<div class="flex items-center mb-1">
<input id="goal-type-1" type="radio" value="none" name="goal_type"
onclick="toggleGoalSchedule(true)" checked
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="goal-type-1" class="ml-2">No goal</label>
</div>
<div class="flex items-center mb-1">
<input id="goal-type-2" type="radio" value="schedule" name="goal_type"
onclick="toggleGoalSchedule(true)"
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="goal-type-2" class="ml-2 ">Same as schedule</label>
</div>
<div class="flex items-center mb-1">
<input id="goal-type-3" type="radio" value="custom" name="goal_type"
onclick="toggleGoalSchedule(false)"
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="goal-type-3" class="ml-2 ">Custom schedule</label>
</div> </div>
</div> </div>
<!-- goal schedule -->
<div class="mt-6">
<x-input-label for="goal-schedule-unit" value="Goal Recurrence"></x-input-label>
<div class="inline-block mt-1 pr-1">
Every
</div>
<x-text-input id="goal-schedule-amount" class="inline-block mt-1 w-20" type="number"
value="1" placeholder="" min="0" disabled required
name="goal_value"/>
<x-input-error :messages="$errors->get('goal_value')" class="mt-2"/>
<select name="goal_unit" id="goal-schedule-unit"
disabled required
class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm disabled:opacity-50">
<option value="day">days</option>
<option value="week">weeks</option>
<option value="month">months</option>
</select>
<div class="inline-block mt-1 px-1">
starting
</div>
<x-text-input type="date" class="inline-block mt-1" name="goal-start" id="goal-start"
value="{{$today}}" disabled
required></x-text-input>
</div>
<!-- Priority -->
</x-pagecard>
</div>
<!-- Submit -->
<div class="w-full">
<div class=" my-6 float-right">
<x-primary-button class="px-20 py-2">Create habit</x-primary-button>
</div>
</div>
</form>
</div>
</div>
<script>
// const habit_value = document.getElementById('habit-value-amount');
const habit_suffix = document.getElementById('habit-suffix-name');
const goal_amount = document.getElementById('goal-schedule-amount');
const goal_unit = document.getElementById('goal-schedule-unit');
const goal_start = document.getElementById('goal_start');
function toggleHabitValueSuffix(value) {
// habit_value.disabled = value;
habit_suffix.disabled = value;
}
function toggleGoalSchedule(value) {
goal_amount.disabled = value;
goal_unit.disabled = value;
goal_start.disabled = value;
}
// function toggleTracker() {
// habit_value.disabled = true;
// habit_suffix.disabled = !value;
// }
</script>
</x-app-layout> </x-app-layout>

10
resources/views/habits/edit.blade.php
View File

@ -1,10 +0,0 @@
<x-app-layout>
<div class="py-4">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<x-habits.createOrUpdate :today="now()->format('Y-m-d')" :habit="$habit" :update="$update"/>
</div>
</div>
</x-app-layout>

6
resources/views/habits/show.blade.php
View File

@ -9,11 +9,7 @@
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-md sm:rounded-lg"> <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-md sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100"> <div class="p-6 text-gray-900 dark:text-gray-100">
{{ $habit->name }} <br> <br> {{ $habit->name }}
<form action="{{route("habits.edit", $habit)}}" method="get">
<x-primary-button>Edit</x-primary-button>
</form>
</div> </div>
</div> </div>
</div> </div>

12
resources/views/layouts/navigation.blade.php
View File

@ -1,14 +1,14 @@
<nav x-data="{ open: false }" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700 shadow"> <nav x-data="{ open: false }" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700 shadow">
<!-- Primary Navigation Menu --> <!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-12"> <div class="flex justify-between h-16">
<div class="flex"> <div class="flex">
<!-- Logo --> <!-- Logo -->
{{-- <div class="shrink-0 flex items-center">--}} <div class="shrink-0 flex items-center">
{{-- <a href="{{ route('dashboard') }}">--}} <a href="{{ route('dashboard') }}">
{{-- <x-application-logo class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" />--}} <x-application-logo class="block h-9 w-auto fill-current text-gray-800 dark:text-gray-200" />
{{-- </a>--}} </a>
{{-- </div>--}} </div>
<!-- Navigation Links --> <!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex"> <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">