added taskpracticed functionality

app/Http/Controllers/DashboardController.php

@@ -7,6 +7,7 @@
 use App\Models\Skill;
 use App\Models\Task;
 use Auth;
+use Carbon\Carbon;
 
 class DashboardController extends Controller
 {
@@ -63,7 +64,7 @@ public function skill($id){
         }
 
         // get the list of tasks which belongs to this particular skill
-        $tasks = Task::where('skill_id',$current_skill->id)->get();
+        $tasks = Task::where('skill_id',$current_skill->id)->orderby('updated_at',"DESC")->get();
 
         return view('dashboard.skill',[
             'skill' => $current_skill,
@@ -71,4 +72,90 @@ public function skill($id){
         ]);
 
     }
+
+    public function createTask(Request $request,$skill_id){
+        // $request includes title, task_type
+
+        // validate
+        $request->validate([
+            'title' => [
+                'required',
+                'string',
+            ],
+            'task_type' => [
+                'required',
+                'string',
+                'in:basic,sub,app'
+            ],
+        ]);
+
+        //
+        $current_skill = Skill::where(
+                    'belongs_to',
+                    Auth::guard('customuser')->user()->username)->where(
+                    'id',
+                    $skill_id
+        )->first();
+
+        if($current_skill==null){
+        return redirect(route('dashboard.myskills'));   // skill not found
+        }
+
+        // create task
+        $task = new Task();
+        $task->title = $request->title;
+        $task->type = $request->task_type;
+        $task->skill_id = $skill_id;
+
+        $task->save();
+
+        return redirect()->back();
+        // return redirect(route('dashboard.skill',$id));
+    }
+
+    public function taskDetail($task_id){
+        $task = Task::where("id",$task_id)->first();
+        if($task==null){
+            abort(404);
+        }
+        return $task->toArray();
+    }
+    public function taskPracticed(Request $request){
+        // $request includes task_id
+
+        // validate
+        $request->validate([
+            'task_id'=>[
+                'required',
+                'string',
+                'exists:App\Models\Task,id',
+            ]
+        ]);
+
+        // check if it has been a given amount of time since they last practiced
+        $minutes = 2;
+        $task = Task::where('id',$request->task_id);
+        $task = $task->first();
+
+        // do this except the first time
+        if($task->practice_count>0){
+            $task = Task::where('id',$request->task_id);
+            $task = $task->where('updated_at','<=',Carbon::now()->subMinutes($minutes)->toDateTimeString());    // only those who are old
+            $task = $task->first();
+        }
+
+        if($task==null){
+            // try again later in some time
+            return redirect()->back()->withErrors([
+                'message'=>"you can only practice a task again after $minutes minutes",
+            ]);
+        }
+
+        $task->practice_count+=1;
+        $task->save();
+
+
+        return redirect()->back();
+
+    }
 }

database/migrations/2024_01_02_075201_create_tasks_table.php

@@ -15,6 +15,7 @@ public function up(): void
             $table->id();
             $table->string('title');
             $table->string('type');
+            $table->integer('practice_count')->default(0);
             $table->string('skill_id');
             $table->foreign('skill_id')->on('skills')->references('id')->onDelete('cascade');
 

public/css/dashboard/skill.css

@@ -67,12 +67,17 @@ .task{
     margin-left:0;
     width: 18ch;
     cursor: pointer;
+    border:none;
+    display: block;
 }
 .task>span{
     text-align: center;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(90, 90, 90);
 }
 
-#modal{
+#modal,#task_modal{
     position: absolute;
     top:50%;
     left:50%;
@@ -81,17 +86,17 @@ #modal{
     outline: none;
     border-radius: 10px;
     padding:2rem;
-    background-color: #f0f0f0;
+    background-color: #fafafa;
 }
 
-#modal>.close_btn{
+#modal>.close_btn , #task_modal>.close_btn{
     position:absolute;
     top:10px;
     right:10px;
     cursor: pointer;
 }
 
-#modal>.container{
+#modal>.container , #task_modal>.container{
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -130,10 +135,69 @@ #modal .submit_btn{
 }
 
 
-.error_msg{
-    color: red;
-    font-size:0.8rem;
+
+
+#task_modal .title{
+    font-size:2rem;
+    margin-bottom: 1rem;
+}
+
+#task_modal .practice_btn{
+    border-radius: 50px;
+    border: none;
+    outline: none;
+    background-color: #2b60f2;
+    color: #fff;
+    padding:0.7rem 1.5rem;
+    margin-top: 1rem;
+    cursor: pointer;
+}
+
+
+
+#error_container{
+    height:80%;
+    position: fixed;
+    bottom: 40px;
+    right: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    justify-content: end;
+
+}
+
+#error_container>.error{
+    min-width:100px;
+    min-height:50px;
+    width:fit-content;
+    background-color: #fff;
+    box-shadow: 0px 0px 10px -5px #000;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    margin: 6px 0;
 }
+#error_container>.error>i{
+    background-color: red;
+    color:#fafafa;
+
+    padding:0.3rem;
+    margin: 1rem;
 
+    border-radius:50%;
+    width:2rem;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
+#error_container>.error>span{
+    margin-right: 1rem;
 
+}
+.error_msg{
+    color: red;
+    font-size:0.8rem;
+}

public/js/dashboard/skill.js

@@ -0,0 +1,45 @@
+function showTask(task_id){
+    fetch(`${taskdetail_url}/${task_id}`,{
+        method:"GET",
+    }).then(res=>res.json()).then((res)=>{
+        // console.log(res);
+        title_elem = task_modal.querySelector(".title");
+        count_elem = task_modal.querySelector(".count");
+        task_id_elem = task_modal.querySelector('#task_id');
+
+        title_elem.innerText = res['title'];
+        count_elem.innerText = res['practice_count'];
+
+        // task_id_elem.value = "bye";
+        task_id_elem.value = res['id'];
+        // console.log(res['id']);
+
+        task_modal.showModal();
+
+    })
+
+}
+function closeTask(){
+    task_modal.close();
+}
+
+
+function addError(msg){
+    // <div class="error">
+    //     <i class="fa-solid fa-xmark"></i>
+    //     <span>error see</span>
+    // </div>
+
+    var error_elem = document.createElement('div');
+    error_elem.className = 'error';
+    error_elem.innerHTML += `<i class="fa-solid fa-xmark"></i>`;
+    error_elem.innerHTML += `<span>${msg}</span>`;
+
+    error_container.append(error_elem);
+
+    setTimeout(function(){
+        error_elem.remove();    // remove after 7 seconds
+    },1000*7);
+}
+
+

public/js/home.js

@@ -0,0 +1,6 @@
+function showTask(){
+    task_modal.showModal();
+}
+function closeTask(){
+    task_modal.close();
+}

resources/views/dashboard/skill.blade.php

@@ -18,7 +18,13 @@
                 <button class="new_btn" onclick="modal.showModal()">New</button>
             </div>
             <div class="tasks">
-                <div class='task'>
+
+                @foreach ($tasks as $task)
+                    <div class='task' onclick='showTask({{ $task->id }})'>
+                        <span>{{ $task->title }}</span>
+                    </div>
+                @endforeach
+                {{-- <div class='task' onclick='showTask(id)'>
                     <span>learn how fret works</span>
                 </div>
                 <div class='task'>
@@ -26,15 +32,15 @@
                 </div>
                 <div class='task'>
                     <span>learn guitar string names</span>
-                </div>
+                </div> --}}
 
             </div>
         </div>
     </section>
     <dialog id="modal">
         <i onclick="modal.close()" class="fa-solid fa-xmark close_btn"></i>
-        {{-- <form class="container" method="POST" action="{{ route('dashboard.createtask',$skill->id) }}"> --}}
-        <form class="container" method="POST">
+        <form class="container" method="POST" action="{{ route('dashboard.createtask', $skill->id) }}">
+            {{-- <form class="container" method="POST"> --}}
             @csrf
             <p class='title'>
                 New Task
@@ -55,7 +61,7 @@
                     <option value="app">Application</option>
                 </select>
                 <span class='error_msg'>
-                    @error('title')
+                    @error('task_type')
                         {{ $message }}
                     @enderror
                 </span>
@@ -63,10 +69,32 @@
             <input type='submit' class='submit_btn' value='Add'>
         </form>
     </dialog>
-    {{-- if there is any error show the modal --}}
+
+    <dialog id="task_modal">
+        <i onclick="task_modal.close()" class="fa-solid fa-xmark close_btn"></i>
+        <form class="container" method="POST" action="{{ route('dashboard.taskpracticed') }}">
+            @csrf
+            <input type='text' name="task_id" id="task_id" hidden>
+            <span class='title'>Title</span>
+            <span>Practice Count: <span class='count'>0</span></span>
+            <input class="practice_btn" type="submit" value="practiced">
+        </form>
+    </dialog>
+
+    <div id="error_container"></div>
+
+    <script src="{{ asset('js/dashboard/skill.js') }}"></script>
     <script>
-        @if ($errors->any())
-            modal.showModal();
-        @endif
+
+        var taskdetail_url = "{{ route('dashboard.taskdetail', 1) }}";
+        taskdetail_url = taskdetail_url.split('/').slice(0, -1).join("/");
+        var taskdetail_url = "{{ route('dashboard.taskdetail', 1) }}";
+        taskdetail_url = taskdetail_url.split('/').slice(0, -1).join("/");
+
+        // task_modal.showModal();
+        @foreach($errors->all() as $error)
+            addError('{{ $error }}');
+        @endforeach
+
     </script>
 @endsection

routes/web.php

@@ -29,5 +29,8 @@
     Route::get("/myskills",'myskills')->name("dashboard.myskills");
     Route::post("/createskill",'createSkill')->name("dashboard.createskill");
     Route::get("/skill/{id}",'skill')->name("dashboard.skill");
+    Route::post("/createtask/{skill_id}",'createTask')->name("dashboard.createtask");
+    Route::get("/taskdetail/{task_id}",'taskDetail')->name("dashboard.taskdetail");
+    Route::post("/taskpracticed",'taskPracticed')->name("dashboard.taskpracticed");
 
 });