JavaScript Using Clone Div Add or Remove

JavaScript Using Clone Div Add or Remove

<div>

                                    <div class="row" id="contentOrBody" >

                                        <div class="col-md-3">

                                            <div class="mb-3" id="eee">

                                                <label for="validationCustom02" class="form-label">Name</label>

                                                <input type="text" required data-row="0" data-name="name"                 name="name" class="form-control" id="name0" placeholder="Enter Name" value="">                                               

                                            </div>

                                        </div>

                                        <div class="col-md-3">

                                            <div class="mb-3" id="eee1">

                                                <label for="validationCustom02" class="form-label">Docx</label>

                                                <input type="file" data-row="0" data-name="formFile" id="formFile"  name="formFile" class="form-control">                                                

                                            </div>

                                        </div>

                                        <div class="col-md-3">

                                            <div class="mb-3" id="eee2">

                                                <label for="validationCustom02" class="form-label">Rollno</label>                  

                                                <select name="rollno" data-row="0" data-name="rollno" id="rollno0" class="form-control" required>

                                                    <option value="">Select</option>

                                                    <option>1</option>

                                                    <option>2</option>

                                                </select>                                              

                                            </div>

                                        </div> 

                                        <div class="col-md-3 mt-4">

                                            <button  class="btn btn-primary btn-sm pull-right" type="button" onclick="addNewRow('contentOrBody');"> + Add Row </button>

                                            <button  class="btn btn-danger btn-sm pull-right" data-row="0" data-name="removebtn" id="removebtn" type="button" onclick="removeNewRow(this);"> + Remove Row </button>                                                                                  

                                        </div>

                                    </div>

                                </div>

<script>

function addNewRow(content_id, label_checkbox = '') {

    var container = $("div#" + content_id+":last");

    container.find("select").each(function(index)

    {

        $(this).select2('destroy');

    });

    var clonedDiv = container.clone().find("input, textarea, select, button, checkbox, radio, label").each(function() {

        var i = $(this).data('row') + 1;

        var id = $(this).data('name') + i;

        var label_for;       

        if (label_checkbox) {

            label_for = $(this).data('name') + i;

            $(this).val('').attr({

                'id': id,

                'data-row': i,

                'for': label_for

            });

        } else {

            $(this).val('').attr({

                'id': id,

                'data-row': i

            });

        }

    }).end(); 

    container.append(clonedDiv);

    $('select').select2();   

}

    function removeNewRow(e)

        {

          if(e.dataset.row != 0){

                $('#passport_number'+e.dataset.row).parent().parent().parent().remove();

          }

        }

</script>

 

Laravel Using Task Mangement and Track Time

 Create  Migration and Model 

Table Names:task,track_task

task:

id,title,description,assigned_to,comment,status,created_by,created_at

track_task:

id,task_id,start_time,end_time,user_id,created_by,created_at

Insert Task :

Route::get('/add-task',[TaskController::class,'addTask']);

public function storeTask(Request $request){

$input=$request->all();       

        $title=$input['summary'];
        $description=$input['description'];       
        $users=$input['users'];
        $status=$input['status'];
        $comment=$input['comment'];
        $userid=Auth::user()->id;

      
            $insertArr=array(
            "title"=>$summary,
            "task_description"=>$description,            
            "status"=>$status,
            "comment"=>$comment,
            "assigned_to"=>$users,
            "created_by"=>$userid,
            "updated_by"=>$userid,
        );
        $insert=Task::create($insertArr);

}

public function getTask($id){

     $task=Task::where('id',$id)->first();     
    return view('task.get-task',compact('task'));

  }

  public function startTask(Request $request){

            $task=new Track;

            $input=$request->all();

            $id=$input['id'];

            $userid=Auth::user()->id;

            $time=date('Y-m-d h:i:s');

            $task->task_id=$id;

            $task->user_id=$userid;

            $task->start_time=$time;

            $task->tracker_on="1";

            $task->save();

            DB::select("Update track set tracker_on='0' WHERE id NOT IN($task->id) AND task_id='$id' AND user_id='$userid'");

  }

  public function endTask(Request $request){

    $input=$request->all();

    $id=$input['id'];

    $task=Track::where('task_id',$id)

                    ->Where('tracker_on','1')->first();

    $task->end_time=date('Y-m-d h:i:s');

    $task->tracker_on='0';

    $task->save();

    $tsk=Track::where('id',$task->id)->first();

    if($tsk){

        $start=$tsk->start_time;

        $end=$tsk->end_time;

        $times=DB::select("SELECT SUM(TIMESTAMPDIFF(SECOND, '$start', '$end')) AS difference");

        if($times){

             $time=$this->convertSecondsToHMS($times[0]->difference);

            if (!$this->taskLog($id,"Tracked Time",$time,Auth::user()->id)) {

            }

        }

    }

}

public function convertSecondsToHMS($seconds) {

    if (!is_numeric($seconds)) {

        return "00:00:00";

    }

    $hours = floor($seconds / 3600);

    $minutes = floor(($seconds % 3600) / 60);

    $seconds = $seconds % 60;

    return sprintf("%02d:%02d:%02d", $hours, $minutes, $seconds);

}

View and start,stop Functionality

<table>

                     <thead>

                            <tr>

                                <th >Sno</th>

                                <th >Title</th>

                                <th >Description</th>                               

                                <th >Assigned</th>

                                <th >Status</th>

                                <th >Comments</th>

                                <th >Action</th>

                            </tr>

                        </thead>

 <tbody>

                            <?php if(isset($taskArr)){

                                $sts=array('','Todo','Allocated','Reallocated','WorkInProgress','Hold','Completed');

                                foreach($taskArr as $row){

                                ?>

                                <tr data-id="<?= $row['id'] ?>">

                                <td><?= $row['id']; ?></td>

                                <td><?= $row['title']; ?></td>

                                <td><?= $row['description']; ?></td>

                               

                                <td><?= isset($row['status']) ? $sts[$row['status']]:'' ?></td>

                                <td><?= $row['comment']; ?></td>

                                <td>

                                    <?php if(Auth::user()->id==$row['user']){ ?>

                                    <button id="on<?= $row['id'] ?>"

                                        style="<?php echo ($row['track']==1) ? 'display:none':'display:block'; ?>"

                                        type="button"

                                        onclick="startTask(<?= $row['id'] ?>,'<?= $row['times'] ?>');showbtn1(<?= $row['id'] ?>);"

                                        class="badge badge-success"><i class="fa fa-play"></i></button>

                                    <button id="off<?= $row['id'] ?>"

                                        style="<?php echo ($row['track']==1) ? 'display:block':'display:none'; ?>"

                                        type="button" onclick="endTask(<?= $row['id'] ?>);showbtn2(<?= $row['id'] ?>);"

                                        class="badge badge-danger"><i class="fa fa-stop"></i></button>

                                    <a href="/show-task/<?= $row['id']?>"><button type="button"

                                            onclick="editTask(<?= $row['id'] ?>);" class="badge badge-info"><i

                                                class="fa fa-edit"></i></button></a>

                                    <button type="button" onclick="deleteTask(<?= $row['id'] ?>);"

                                        class="badge badge-danger"><i class="fa fa-trash"></i></button>

                                    <?php } ?>

                                    <span id="tracking-time<?= $row['id'] ?>">

                                        <?php

                                            echo convertSecondsToHMS($row['times']);

                                            ?>

                                    </span>

                                </td>

                            </tr>

                            <?php } } ?>

                        </tbody>

</table>

<script>

function showbtn1(id) {

    $('#on' + id).hide();

    $('#off' + id).show();

}

function showbtn2(id) {

    $('#on' + id).show();

    $('#off' + id).hide();

}

function formatTime(time) {

    return time < 10 ? '0' + time : time;

}

<?php

if(isset($time_track)){

$from=$time_track->start_time;

$to=date('Y-m-d h:i:s');

$datetime1 = new DateTime($from);

$datetime2 = new DateTime($to);

$diff = $datetime2->diff($datetime1);

$seconds = $diff->s + ($diff->i * 60) + ($diff->h * 3600) + ($diff->days * 86400);

$taskid=$time_track->task_id; ?>

startTimer(0, 0, <?= $seconds ?>, <?= $taskid ?>);

$('#tracking-times').addClass("btn btn-success");

<?php }

?>

var timerInterval;

function startTimer(hours, minutes, seconds, id) {

    var tseconds = hours * 3600 + minutes * 60 + seconds;

    timerInterval = setTimeout(function() {

        var hours = formatTime(Math.floor(tseconds / 3600));

        var minutes = formatTime(Math.floor((tseconds % 3600) / 60));

        var seconds = formatTime(tseconds % 60);

        var timeString = hours + ':' + minutes + ':' + seconds;

        tseconds++;

        $('#tracking-times').text(timeString)

        startTimer(Math.floor(tseconds / 3600), Math.floor((tseconds % 3600) / 60), tseconds % 60);

    }, 1000);

}

function startTask(id, time) {

    $.ajax({

        type: "POST",

        url: "{{ route('task.start-task') }}",

        data: {

            id: id,

            _token: '{{csrf_token()}}'

        },

        success: function(data) {

            startTimer(0, 0, 1, id);

            $('#tracking-times').addClass("btn btn-success");

        },

        error: function(data, textStatus, errorThrown) {},

    });

}

function endTask(id) {

    $.ajax({

        type: "POST",

        url: "{{ route('task.end-task') }}",

        data: {

            id: id,

            _token: '{{csrf_token()}}'

        },

        success: function(data) {

            clearTimeout(timerInterval);

        },

        error: function(data, textStatus, errorThrown) {},

    });

}

</script>

  public function viewTask(){

    $time_track=Track::where('tracker_on','1')

                    ->Where('user_id',Auth::user()->id)

                    ->first();

    $task=Task::WHERE('assigned_to',Auth::user()->id)->get();

    $today=date('Y-m-d');

    $taskArr=array();

    foreach($task as $key=>$row){

        $users=DB::select("select GROUP_CONCAT(u.name) as names from users u WHERE id IN($row->assigned_to)");

        $times=DB::select("SELECT SUM(TIMESTAMPDIFF(SECOND, start_time, end_time)) AS difference,tracker_on FROM `track` WHERE task_id='$row->id'  GROUP BY task_id");

        $track=DB::select("SELECT tracker_on FROM `task_track` WHERE tracker_on='1' AND task_id='$row->id'");

        $taskArr[$key]['due_date']=date('d-m-Y',strtotime($row->due_date));

        if($row->due_date < $today && $row->status<4 ){

            $exp=1;

        }else{ $exp=0;}

        $taskArr[$key]['expired']=$exp;

        $taskArr[$key]['due']=$row->due_time;

        $taskArr[$key]['id']=$row->id;

        $taskArr[$key]['summary']=$row->task_summary;

        $taskArr[$key]['description']=$row->task_description;

        $taskArr[$key]['recurring']=$row->recurring;

        $taskArr[$key]['assigned']=isset($users) ? $users:'N/A';

        $taskArr[$key]['recurring_options']=$row->recurring_options;

        $taskArr[$key]['status']=$row->status;

        $taskArr[$key]['date_recurring']=$row->date_recurring;

        $taskArr[$key]['comment']=$row->comment;

        $taskArr[$key]['user']=$row->assigned_to;

        $taskArr[$key]['times']=isset($times[0]->difference) ? $times[0]->difference:"00:00:00";

        $taskArr[$key]['track']=isset($track[0]->tracker_on) ? $track[0]->tracker_on:0;

    }

    

    return view('task.view-task',compact('taskArr','time_track'));

  }

<style>

#track-btn {

    position: fixed;

    height: 38px;

    bottom: 40px;

    right: 218px;

    background-color: #0C9;

    font-weight: 600;

    border-radius: 6pxpx;

    text-align: center;

    box-shadow: 2px 2px 3px #999;

}

</style>