added progress bar for tasks

app/Http/Controllers/DashboardController.php

@@ -133,7 +133,7 @@ public function taskPracticed(Request $request){
         ]);
 
         // check if it has been a given amount of time since they last practiced
-        $minutes = 2;
+        $minutes = 60*6;
         $task = Task::where('id',$request->task_id);
         $task = $task->first();
 

public/css/dashboard/home.css

@@ -39,6 +39,10 @@ #get_started_btn{
 
 
 @media screen and (max-width: 550px) {
+    section{
+        min-height:400px;
+        padding:1rem 1rem;
+    }
     #new_user_section{
         flex-direction: column-reverse;
     }

public/css/dashboard/myskills.css

@@ -117,3 +117,18 @@ .error_msg{
 
 
 
+@media screen and (max-width: 550px) {
+    #main_section {
+        margin: 1rem;
+        margin-top: 2rem;
+        padding: 1rem;
+    }
+    .skill{
+        padding:3rem;
+        background-color: #fff;
+        border-radius: 10px;
+        margin:1rem;
+        margin-top:0;
+        margin-left:0;
+    }
+}

public/css/dashboard/skill.css

@@ -26,7 +26,7 @@ .new_btn {
     color: #fff;
     padding: 0.7rem 1rem;
     border-radius: 50px;
-    border:none;
+    border: none;
     cursor: pointer;
 }
 
@@ -37,100 +37,107 @@ .line {
     border-bottom: 2px solid black;
 }
 
-.task_container{
-    width:100%;
-    display:flex;
+.task_container {
+    width: 100%;
+    display: flex;
     flex-direction: column;
     align-items: center;
     background-color: #fff;
     border-radius: 10px;
-    margin:1rem;
-    padding:1rem;
+    margin: 1rem;
+    padding: 1rem;
 }
-.tasks{
-    width:100%;
-    margin-top:2rem;
-    display:flex;
+
+.tasks {
+    width: 100%;
+    margin-top: 2rem;
+    display: flex;
     flex-direction: row;
-    flex-wrap:wrap;
+    flex-wrap: wrap;
     align-items: center;
     background-color: #fff;
     border-radius: 10px;
-    min-height:200px;
+    min-height: 200px;
 }
-.task{
-    box-shadow:0px 0px 10px -6px #000;
-    padding:3rem 2rem;
+
+.task {
+    box-shadow: 0px 0px 10px -6px #000;
+    padding: 3rem 2rem;
     background-color: #fff;
     border-radius: 10px;
-    margin:2rem;
-    margin-top:0;
-    margin-left:0;
-    width: 18ch;
+    margin: 2rem;
+    margin-top: 0;
+    margin-left: 0;
+    width: fit-content;
     cursor: pointer;
-    border:none;
+    border: none;
     display: block;
 }
-.task>span{
+
+.task>span {
     text-align: center;
     font-size: 1rem;
     font-weight: 600;
     color: rgb(90, 90, 90);
 }
 
-#createtask_modal,#task_modal{
-    position: absolute;
-    top:50%;
-    left:50%;
-    transform: translate(-50%,-50%);
-    border:none;
+#createtask_modal,
+#task_modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: none;
     outline: none;
     border-radius: 10px;
-    padding:2rem;
+    padding: 2rem;
     background-color: #fafafa;
+
 }
 
-#createtask_modal>.close_btn , #task_modal>.close_btn{
-    position:absolute;
-    top:10px;
-    right:10px;
+#createtask_modal>.close_btn,
+#task_modal>.close_btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
     cursor: pointer;
 }
 
-#createtask_modal>.container , #task_modal>.container{
+#createtask_modal>.container,
+#task_modal>.container {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-#createtask_modal>.container>.title{
+#createtask_modal>.container>.title {
     font-size: 2rem;
     margin-bottom: 1rem;
 }
 
-#createtask_modal .field{
+#createtask_modal .field {
     display: flex;
     flex-direction: column;
     margin-top: 1rem;
 }
 
-#createtask_modal .task_input{
+#createtask_modal .task_input {
     border-radius: 10px;
     border: none;
     outline: none;
     font-size: 1rem;
-    padding:1rem 2rem;
+    padding: 1rem 2rem;
     background-color: #fff;
     box-shadow: 0px 0px 10px -8px;
 }
 
-#createtask_modal .submit_btn{
+#createtask_modal .submit_btn {
     border-radius: 50px;
     border: none;
     outline: none;
     background-color: #2b60f2;
     color: #fff;
-    padding:0.7rem 1.5rem;
+    padding: 0.7rem 1.5rem;
     margin-top: 2rem;
     cursor: pointer;
 }
@@ -138,26 +145,94 @@ #createtask_modal .submit_btn{
 
 
 
-#task_modal .title{
-    font-size:2rem;
+#task_modal .title {
+    font-size: 2rem;
     margin-bottom: 1rem;
 }
 
-#task_modal .practice_btn{
+#task_modal .practice_btn {
     border-radius: 50px;
     border: none;
     outline: none;
     background-color: #2b60f2;
     color: #fff;
-    padding:0.7rem 1.5rem;
+    padding: 0.7rem 1.5rem;
     margin-top: 1rem;
     cursor: pointer;
 }
 
+.progress_bar_container {
+    width: 500px;
+    display: flex;
+    overflow-x: auto;
+}
+
+.progress_bar {
+    /* background:linear-gradient(-45deg, rgb(197, 137, 126) ,rgb(218, 151, 162)); */
+    background-color: transparent;
+    height: 120px;
+    /* width:400px; */
+
+    /* color:#fafafa; */
+    border-radius: 50px;
+    padding: 0.8rem 1.2rem;
+    padding-right: 4rem;
+
+    display: flex;
+    align-items: center;
+
 
+}
+
+.progress_bar>.milestone {
 
-#error_container{
-    height:80%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    position: relative;
+}
+
+.progress_bar .circle {
+    background-color: #cbcbcb;
+    /* border: 1px solid #000; */
+    border-radius: 50%;
+    /* height:50%; */
+    aspect-ratio: 1;
+    width: 40px;
+}
+
+.progress_bar .text {
+    /* display: hidden; */
+    position: absolute;
+    /* bottom:0; */
+    bottom: -10px;
+    left: 0;
+    width: 100px;
+}
+
+.progress_bar .line {
+    /* display: none; */
+    background: linear-gradient(-45deg, rgb(224, 69, 2), rgb(255, 191, 0));
+    border: none;
+    height: 5px;
+    width: 100px;
+}
+
+
+.progress_bar .circle.learn {
+    background: linear-gradient(-45deg, rgb(237, 129, 20), lightgreen, transparent);
+    box-shadow: 0px 0px 20px -5px rgb(116, 121, 110);
+}
+
+.progress_bar .circle.practice {
+    background: linear-gradient(-75deg, rgb(217, 108, 133), rgb(220, 157, 75), transparent);
+    box-shadow: 0px 0px 20px -5px #a9e085;
+}
+
+#error_container {
+    height: 80%;
     position: fixed;
     bottom: 40px;
     right: 30px;
@@ -168,10 +243,10 @@ #error_container{
 
 }
 
-#error_container>.error{
-    min-width:100px;
-    min-height:50px;
-    width:fit-content;
+#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;
@@ -179,26 +254,58 @@ #error_container>.error{
     align-items: center;
     margin: 6px 0;
 }
-#error_container>.error>i{
+
+#error_container>.error>i {
     background-color: red;
-    color:#fafafa;
+    color: #fafafa;
 
-    padding:0.3rem;
+    padding: 0.3rem;
     margin: 1rem;
 
-    border-radius:50%;
-    width:2rem;
+    border-radius: 50%;
+    width: 2rem;
     aspect-ratio: 1;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-#error_container>.error>span{
+#error_container>.error>span {
     margin-right: 1rem;
 
 }
-.error_msg{
+
+.error_msg {
     color: red;
-    font-size:0.8rem;
+    font-size: 0.8rem;
+}
+
+
+
+@media screen and (max-width: 550px) {
+    #main_section {
+        margin: 1rem;
+        margin-top: 2rem;
+        padding: 1rem;
+    }
+
+    .task {
+
+        padding: 2rem;
+        margin: 1rem;
+        margin-top: 0;
+        margin-left: 0;
+
+        width: fit-content;
+    }
+
+    dialog {
+        width: 100%;
+    }
+
+    .progress_bar_container {
+        width: 100%;
+    }
+
+
 }

public/css/home.css

@@ -10,6 +10,7 @@ #info_container {
     flex-direction: row;
     align-items: center;
     justify-content: space-evenly;
+
 }
 
 #info_container>p {
@@ -21,10 +22,11 @@ #info_container>p {
 #info_container>img {
     max-width: 550px;
     width: 50%;
+
 }
 
 #topdown_container {
-    background-image:linear-gradient(-45deg, white, pink, purple);
+    background-image:linear-gradient(-45deg, white, pink, transparent);
 }
 
 #topdown_container>.heading,
@@ -35,6 +37,7 @@ #bottomup_container>.heading {
 
 #bottomup_container>.heading {
     text-align: right;
+    background-image:linear-gradient(-45deg, white, pink, transparent);
 }
 
 #topdown_container>.main_section,
@@ -74,6 +77,7 @@ @media screen and (max-width: 768px) {
 
         >img {
             width: 80%;
+
         }
     }
 

public/js/dashboard/skill.js

@@ -1,38 +1,55 @@
-function showCreateTask(task_type){
+function showCreateTask(task_type) {
     var task_type_elem = createtask_modal.querySelector("#task_type");
     task_type_elem.value = task_type;
     createtask_modal.showModal();
 }
-function closeCreateTask(){
+function closeCreateTask() {
     createtask_modal.close();
 }
-function showTask(task_id){
-    fetch(`${taskdetail_url}/${task_id}`,{
-        method:"GET",
-    }).then(res=>res.json()).then((res)=>{
+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');
+        // count_elem = task_modal.querySelector(".count");
 
         title_elem.innerText = res['title'];
-        count_elem.innerText = res['practice_count'];
+        // count_elem.innerText = res['practice_count'];
+        var total_count = res['practice_count']; // goal count
+        if(total_count==0)  total_count=4;  // learn + 3 practice
+        else    total_count = Math.floor((total_count-1)/3)*3+4;    // formula to give 3 new practice everytime we reach the goal
+        createMilestones(document.querySelector('#task_modal .progress_bar'),res['practice_count'],total_count);
+
+
 
-        // task_id_elem.value = "bye";
         task_id_elem.value = res['id'];
-        // console.log(res['id']);
+
 
         task_modal.showModal();
 
+
+        // scroll to the end
+        var progressbar_container = document.querySelector("#task_modal .progress_bar_container");
+        var scrollWidth = progressbar_container.scrollWidth;
+        scrollWidth/=total_count;
+        scrollWidth*=res['practice_count']-1;   // -1 to scroll it a little less than the last completed one
+        // scrollWidth=0;
+        // scrollWidth
+        console.log(scrollWidth);
+        progressbar_container.scrollTo(scrollWidth, 0);   // x,y
+
+
     })
 
 }
-function closeTask(){
+function closeTask() {
     task_modal.close();
 }
 
 
-function addError(msg){
+function addError(msg) {
     // <div class="error">
     //     <i class="fa-solid fa-xmark"></i>
     //     <span>error see</span>
@@ -45,9 +62,62 @@ function addError(msg){
 
     error_container.append(error_elem);
 
-    setTimeout(function(){
+    setTimeout(function () {
         error_elem.remove();    // remove after 7 seconds
-    },1000*7);
+    }, 1000 * 7);
 }
 
 
+
+function createMilestones(progress_bar,practice_count,total_count) {
+
+    // <div class="milestone">
+    //     <div class="circle learn"></div>
+    //     <span class='text'>Learn</span>
+    // </div>
+    // <div class="line"></div>
+    // <div class="milestone">
+    //     <div class="circle practice"></div>
+    //     <span class='text'>Practice 1</span>
+    // </div>
+    // total_count+=1;
+    progress_bar.innerHTML = " ";
+
+    for (var i = 1; i <= total_count; i++) {
+
+
+        var milestone = document.createElement("div");
+        milestone.className = "milestone";
+
+        circle = document.createElement('div');
+        circle.className = "circle";
+
+        var text = document.createElement("span");
+        text.className = "text";
+
+        if(i<= practice_count){
+            if(i == 1)  circle.classList.add("learn");
+            else    circle.classList.add("practice");
+        }
+
+        if(i == 1)  text.innerText = "learn";
+        else    text.innerText = `practice ${i-1}`;
+
+
+
+        milestone.appendChild(circle);
+        milestone.appendChild(text);
+
+        var line = document.createElement('div');
+        line.className = "line";
+
+        progress_bar.appendChild(milestone);
+        if(i<total_count)   progress_bar.appendChild(line);
+    }
+
+
+}
+
+// createMilestones(document.querySelector('#task_modal .progress_bar'), ['learn', null, null])
+createMilestones(document.querySelector('#task_modal .progress_bar'),2,4);
+// createMilestones(document.querySelector('#task_modal .progress_bar'),4,15);

resources/views/components/progressbar.blade.php

@@ -0,0 +1,23 @@
+<div class="progress_bar">
+    <div class="circles">
+        <div class="circle_container">
+            <div class="circle learn"></div>
+        </div>
+        <div class="line"></div>
+        <div class="circle_container">
+            <div class="circle practice"></div>
+        </div>
+        <div class="line"></div>
+        <div class="circle_container">
+            <div class="circle practice"></div>
+        </div>
+    </div>
+
+    <div class="texts">
+        <div class="text">Learn</div>
+        <div class="line"></div>
+        <div class="text">Practice 1</div>
+        <div class="line"></div>
+        <div class="text">Practice 2</div>
+    </div>
+</div>

resources/views/dashboard/skill.blade.php

@@ -100,7 +100,12 @@
             @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>
+            {{-- <span>Practice Count: <span class='count'>0</span></span> --}}
+            <div class="progress_bar_container">
+
+                <div class="progress_bar"></div>
+
+            </div>
             <input class="practice_btn" type="submit" value="practiced">
         </form>
     </dialog>
@@ -114,9 +119,10 @@
         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 }}');
+        addError('{{ $error }}');
         @endforeach
+
+        // task_modal.showModal();
     </script>
 @endsection