EVOLUTION-NINJA

Edit File: cpd_activity_v.php

<?php
    echo view('includes/flow-header');    
?>
<section class="spec-main last_body">
    <div class="row">
        <div class="col-sm-3 anaslefbox">
            <div class="spec-left specunderline mob_height">
                <ul>
                    <li><a href="">CPD Activity</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9">

<a href="<?php echo base_url('cpd-dashboard');?>"><span><button type="button" class="form-control" id="dash-button-1"><img class="avc-img" src="public/assets/cpdimage/Dashboard 1.png">Dashboard</button></a></span>
                                
                            </div>
                            <div class="col-sm-3 mob_cpdacti">
                                <a href="<?php echo base_url('cpd-activity');?>"><button type="button" class="form-control dash-button"><img class="avc-img" src="public/assets/cpdimage/Activities 1.png">Activities</button></a>
                            </div>
                            <div class="col-sm-4 mob_cpdproto">
                               <a href="<?php echo base_url('my-cpd-portfolio');?>"><button type="button" class="form-control cps-summary-button "><img class="avc-img" src="public/assets/cpdimage/My CPD Portfolio 1.png">CPD Summary/Download</button></a>
                            </div>

</div>
                        <div class="row">
                            <div class="col-sm-3 mob_cpdactivity">
                               
                                <a href="<?php echo base_url('add-cpd');?>"> <img src="public/assets/cpdimage/Subtract.png" class="cpd_subtract">
                                <button type="button" class="form-control add_act_new">Add Activity</button></a>

</div>
                            <div class="col-sm-6">
                            <button type="button" id="btnExport" class="btn-excel cpd-ex-excel" onclick="usermanagement_excel()">Export to Excel</button>
                            </div>
                            <div class="col-sm-3">

</div>
                        </div>

<!-- <div class="row cpd_start_four">
                            <div class="col-sm-3">
                                <a href="<?php echo base_url('cpd-dashboard');?>"> <img src="public/assets/cpdimage/Rectangle 4108 (2).png">
                                    <h5 class="cpd_dash">Dashboard</h5>
                                </a>
                            </div>
                            <div class="col-sm-3 mob_cpdacti">
                                <a href="<?php echo base_url('cpd-activity');?>"><img src="public/assets/cpdimage/Rectangle 4108 (1).png">
                                    <h5 class="cpd_acti">Activities</h5>
                                </a>
                            </div>
                            <div class="col-sm-5 mob_cpdproto">
                                <a href="<?php echo base_url('my-cpd-portfolio');?>"><img src="public/assets/cpdimage/Rectangle 4108 (2).png">
                                    <h5 class="cpd_proto">My CPD Portfolio</h5>
                                </a>
                            </div>

<div class="col-sm-3 mb-5 cpd_back" id="go-back-new">
                                <a href="<?php echo base_url('cpd-dashboard');?>">
                                    <i class="fa fa-arrow-left" aria-hidden="true"></i>Back</a> -->
                                
                            
                        <form>

</div>
                    </form>
                </div>
</div>

</div>
                <div id="pager3"></div>

</div>
            </div>
        </div>
    </div>

<div id="deleteConfirmationModal" class="modal">
    <div class="modal-content">
        <h3 class="p-2" style="background-color: #0065A3;color: white; ">Logbook</h3>
        <div class="model_con">
        <p><b>Do you want to delete this record?</b></p>
        <div class="row">
            <div class="col-sm-6">
                <button class="btn btn-light bt" onclick="closeDeleteConfirmation()"><b>No</b></button>
            </div>
            <div class="col-sm-6">
      
        <button class="btn btn-danger bt"onclick="deleteRecord()"><b>Yes</b></button>
    </div>
        </div>
    </div>
    </div>
</div>
</section>

$(document).ready(function(){

var year = '<?php echo $year;?>';

jQuery("#list3").jqGrid({

url: "<?php echo base_url('cpd-data');?>"+'?year='+year,
            datatype: "json",

colNames:['Start Date','End Date','Category','Section','Title','Details','Hours','Cpd Points','Evidences','Action'],
                colModel:[ 
                    // {name:'id',index:'id', width:140, editable:false },
                    {name:'start_date',index:'start_date', width:120, editable:false, formatter: 'date',formatoptions: { srcformat: 'Y-m-d', newformat: 'd-m-Y' } },
                    {name:'end_date',index:'end_date', width:120, editable:false, formatter: 'date',formatoptions: { srcformat: 'Y-m-d', newformat: 'd-m-Y' } },
                    {name:'category',index:'category', width:140, editable:false },
                    {name:'section',index:'section', width:130, editable:false},
                      
                    {name:'title',index:'title', width:130, editable:false},  
                    {name:'notes',index:'notes', width:100, editable:false},  
                    {name:'hours',index:'hours', width:100, editable:false},
                    {name:'cpd_points',index:'cpd_points', width:50, editable:false}, 
                     {name:'evidences',index:'evidences', width:100, editable:false},    
                    {
                label: 'Action',
                name: 'edit',
                width: 75,
                formatter: function (cellValue, options, rowObject) {
                    return `<div class="fd mt-1 pb-1">
                            <a href="<?= site_url('cpd-edit-form') ?>?id=${options.rowId}"><img src="public/assets/logimages/file.jpg" class="folder"></a>
                            <a href="#" onclick="deleteRecord(${options.rowId})"><i class="fa fa-trash fa-trash_del" aria-hidden="true"></i></a>
                            </div>`;
                }
            }                  
                 ],

rowNum:20,
            rowList:[20,30,50,100,200,300],
            rownumbers: true,
            pager: '#pager3', 
            sortname:'id', 
            autowidth: true,
            height: '100%',
            // width: '100%',
            viewrecords: true, 
            loadonce:true,
            gridview: true,
            sortorder:"desc", 
            shrinkToFit: true,
            caption:"CPD Activities",
            
            subGrid: false,

});

$("#list3").jqGrid("setLabel", "rn", "SL");
        $("#list3").jqGrid('filterToolbar',{stringResult: true,searchOperators : true}); //for multisearch code,remove if not required

$("#list3").jqGrid('navGrid','#pager3',
        {edit:false,add:false,del:false,search:true,refresh:true},
        { },
        { },
        { },  
        {
        sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
        closeOnEscape: true, 
        multipleSearch: true, 
        closeAfterSearch: true }
        );

fun_excel();
    });
        
function fun_excel() {
        var year = '<?php echo $year;?>';
        
        $.ajax({

url: "<?php echo base_url('cpd-data');?>"+'?year='+year,
            type: "GET",

success: function(response) {
                // response = jQuery.parseJSON(response);
                // console.log(response[0]);
                $('.user_excel').empty();

var con = '';

con += '<thead><tr><th>Start Date</th><th>End Date</th><th>Category</th><th>Section</th><th>Title</th><th>Details</th><th>Hours</th><th>Cpd Points</th><th>Evidences</th></tr></thead>';
                $.each(response, function(key, value) {
                    con += '<tr>';
                    con += '<td>' + value.start_date + '</td>';
                    con += '<td>' + value.end_date + '</td>';
                    con += '<td>' + value.category + '</td>';
                    con += '<td>' + value.section + '</td>';
                    con += '<td>' + value.title + '</td>';
                    con += '<td>' + value.notes + '</td>';
                    con += '<td>' + value.hours + '</td>';
                    con += '<td>' + value.cpd_points + '</td>';
                    con += '<td>' + value.evidences + '</td>';
                    con += '</tr>';

});

$('.user_excel').append(con);
            }
        });
    }

function usermanagement_excel() {

$(".user_excel").table2excel({

exclude: ".noExl",
            name: "Excel Document Name",
            filename: "CPD Activity",
            fileext: ".xls",
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });

}

</script>

.modal-content {
    background-color: #fff;
    margin: 20% auto;
    /* padding: 20px; */
    width: 30%;
    /* text-align: center; */
}
.model_con{
    padding: 20px;
}

.bt{
    width: 100%;
}
.rearrange-add-activity{
    margin-left: 0px;
    margin-top: -60px !important;
}
.cpd-ex-excel{
    margin-top: 34px;
    position: relative;
    left: 0px;
}
#list2{

}
@media only screen and (max-width:600px){
    .rearrange-add-activity{
    margin-left: -167px;
    margin-top: 9px !important;
}
.cpd-ex-excel{
    /* margin-top: opx; */
    position: relative;
    left: -20px;
    top: 5px;
    margin-top: -85px;
}

}
.folder {
    width: 20px;
    height: 20px;
    margin-left: 12px;
    margin-top: 2px;
}
    </style>

.dash-button{
        /* background: linear-gradient(to left, #0160A2,#0198CD, #0160A2); */
        background-color: #0065a3;
        box-shadow: #6c757d 0px 0px 0px 3px;
    color: white;
    border: none;
    border-radius: 6px;
    width: 100%;
    height: 45px;
    font-size: 17px;
    }
    #dash-button-1{
        background: linear-gradient(to left, #0160A2,#0198CD, #0160A2);
        background-color: #0160A2;
    color: white;
    border: none;
    border-radius: 6px;
    width: 100%;
    height: 45px;
    font-size: 17px;
    }
    .cps-summary-button{
        background: linear-gradient(to left, #0160A2,#0198CD, #0160A2);
    color: white;
    border: none;
    border-radius: 6px;
    width: 105%;
    height: 45px;
    font-size: unset;
    }
    .add_act_new{
        background: linear-gradient(to left, #0160A2,#0198CD, #0160A2);
        color: white;
    border: none;
    border-radius: 6px;
    width: 85%;
    height: 30px;
   
    font-size: 14px;
    text-align: center;
  
    }
    .cpd_subtract{
        margin-left: 3px;
    position: relative;
    top: 24px;
    width: 14px;
    left: 3px;
    
    }
    .cpd_back{
        position: relative;
        top: 0px;
    }
    .mob_cpdacti{
        /* margin-left: -50px; */
    }
    .mob_cpdproto{
        /* margin-left: -50px; */
    }
    .cpd_start_four{
        margin-top: -80px;
    }
    .avc-img{
        width: 28px;
    height: 28px;
    position: relative;
    left: -7px;
    }

@media only screen and (max-width: 600px){
            .mob_cpdactivity{
                width: 50%;
    /* margin-left: -335px;
    margin-top: 160px !important;
    margin-bottom: -100px; */
                position: relative;
                top: -45px;
                left: 45px;

}
           
            #dash-button-1{
                margin-top: 50px;
                margin-left: 0px;
            }
            .cps-summary-button{
                margin-left: 50px;
                margin-top: 10px;
                width: 80%;
            }
            .mob_cpdacti{
                margin-top: 50px;
    margin-left: -189px !important;
            }
            .cpd_start_four{
                margin-top: -45px;
                margin-left: 10px !important;
            }
            .can-mo{
                    position: relative;
                    top: -30px;
                    left: 4px;
                        }
            .can-mo1{
                    position: relative;
                    top: -12px;
                    left: 4px;
            }  
            .mob_cpdacti {
                position: relative;
                top: -35px;
                left: 187px;
        }
       
            .cps-summary-button {
                margin-left: 0px;
                margin-top: 10px;
                width: 100%;
        }
        }

</style>