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

Componentified form! create and update can use same component

Browse Source
This commit is contained in:
Nisse Lommerde 2023-06-05 17:53:38 +02:00
parent af2bdc3b14
commit 7f496184bf
6 changed files with 104 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,11 @@ 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')
]); ]);
} }
@ -47,6 +51,7 @@ 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();
} }
@ -60,6 +65,7 @@ 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')
]); ]);
@ -67,10 +73,21 @@ 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,6 +66,16 @@ 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);

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

@ -1,13 +1,22 @@
<div> <div>
<form action="{{$route}}" method="{{$method}}"> <form action="{{$update ? route('habits.update', $habit) : route('habits.store')}}" method="post">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
@if ($update)
@method('PUT')
@endif
@csrf @csrf
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
<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" placeholder="Swimming" <x-text-input id="name" class="block mt-1 w-full" type="text" name="name"
required :value="old('name')" required autofocus autocomplete="name"/> placeholder="Swimming" 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>
@ -15,8 +24,9 @@
<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')" placeholder="For how long did I swim?" :value="old('question', $habit->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>
@ -25,7 +35,9 @@
<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')" autocomplete="category"/> :value="old('category', isset($habit->category->name) ? $habit->category->name : '' )"
autocomplete="category"/>
<x-input-error :messages="$errors->get('category')" class="mt-2"/> <x-input-error :messages="$errors->get('category')" class="mt-2"/>
</div> </div>
@ -34,7 +46,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')" autocomplete="tag"/> :value="old('tag', $habit->tagsToString())" 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>
@ -68,7 +80,8 @@ 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')" autocomplete="suffix"/> :value="old('suffix', isset($habit->suffix) ? $habit->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>
@ -78,22 +91,27 @@ 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. Note: this is The recurrence value determines how often you will be inquired about this habit.
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" placeholder="" min="0" value="1" name="schedule_value"
name="schedule_value"/> :value="old('schedule_value', isset($habit->schedule_value) ? $habit->schedule_value : '0')"
/>
<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>
<option value="week">weeks</option> @foreach(['day', 'week', 'month'] as $time_unit)
<option value="month">months</option> <option value="{{$time_unit}}"
@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">
@ -101,8 +119,8 @@ 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="{{$today}}" :value="old('schedule_start', isset($habit->schedule_start) ? $habit->schedule_start : $today)"
required></x-text-input> required/>
</div> </div>
</x-pagecard> </x-pagecard>
@ -113,7 +131,8 @@ 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 goal. If you only want to record the frequency of an activity, you don't need to set a
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"
@ -134,33 +153,39 @@ class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark
<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-6"> <div class="mt-4">
<x-input-label for="goal-schedule-unit" value="Goal Recurrence"></x-input-label> <x-input-label for="goal-schedule-unit" value="Goal Recurrence"/>
<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="1" placeholder="" min="0" disabled required :value="old('goal_value', isset($habit->goal_value) ? $habit->goal_value : '0')"
name="goal_value"/> placeholder="" min="0" disabled
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">
<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->goal_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">
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="{{$today}}" disabled :value="old('goal_start', isset($habit->goal_start) ? $habit->goal_start : $today)" disabled required/>
required></x-text-input>
</div> </div>
</x-pagecard> </x-pagecard>
@ -175,7 +200,13 @@ class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900
</div> </div>
<div class="text-center"> <div class="text-center">
<x-primary-button class="px-20 py-4">Create habit</x-primary-button> <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>
</div> </div>
@ -193,7 +224,7 @@ class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900
const goal_amount = document.getElementById('goal-schedule-amount'); const goal_amount = document.getElementById('goal-schedule-amount');
const goal_unit = document.getElementById('goal-schedule-unit'); const goal_unit = document.getElementById('goal-schedule-unit');
const goal_start = document.getElementById('goal_start'); const goal_start = document.getElementById('goal-start');
function toggleHabitValueSuffix(value) { function toggleHabitValueSuffix(value) {
habit_suffix.disabled = value; habit_suffix.disabled = value;

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

@ -1,17 +1,10 @@
<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"/>
<x-form-habit :today="now()->format('Y-m-d')" :route="route('habits.store')" method="post" />
</div> </div>
</div> </div>
</x-app-layout> </x-app-layout>

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

@ -0,0 +1,10 @@
<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,7 +9,11 @@
<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 }} {{ $habit->name }} <br> <br>
<form action="{{route("habits.edit", $habit)}}" method="get">
<x-primary-button>Edit</x-primary-button>
</form>
</div> </div>
</div> </div>
</div> </div>