Rapport-Laravel/resources/views/activity/processimport.blade.php

@extends('layouts.vertical', ["page_title"=> "Datatables"])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-md-6 p-2">
            <h4 class="page-title">Process Import: {{$title}}</h4>
        </div>
        
    </div>
    <!-- end page title -->
@if(session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif
@if(session()->has('error'))
    <div class="alert alert-danger">
        {{ session()->get('error') }}
    </div>
@endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <button class="btn btn-primary disabled btn-lg" style="width:100%">Validate CSV Data</button>
                            <button class="btn btn-outline-primary disabled btn-lg mt-2" style="width:100%">Import CSV Data</button>
                            <button class="btn btn-outline-primary disabled btn-lg mt-2" style="width:100%">Validate Users</button>
                            <button class="btn btn-outline-primary disabled btn-lg mt-2" style="width:100%">Validate Doctors</button>
                            <button class="btn btn-outline-primary disabled btn-lg mt-2" style="width:100%">Index Data</button>
                        </div>
                        <div class="col-md-8 offset-md-1">
                            
                        </div>
                    </div>
                    
                </div> <!-- end card body-->
            </div> <!-- end card -->
        </div><!-- end col-->
    </div>
    <!-- end row-->
</div> <!-- container -->
<style type="text/css">
    .btn.disabled{
        opacity: 1!important;
    }
</style>
@endsection

@section('script')
<!-- third party js -->
<script type="text/javascript">
    jQuery(document).ready(function($){
        var interval = {}
        function checkStatus() {
            $.ajax({
                type: "GET",
                url: '/activityimport/checkstatus?id={{$id}}',
                processData: false,
                contentType: false,
                success: function(data) {
                    console.log(data)
                    showStatus(data.status, data.context)
                    if(data.status == 'in_process') {
                        window.location.reload();
                    }
                },
            });
        }

        function showStatus(status, context) {
            console.log(status)
            switch(status) {
                case 'active':
                    $('.card-body .col-md-8').html('<h4>The CSV file is uploaded, now you need to validate the CSV</h4><button class="btn btn-success step_button" step="validate_csv">Validate CSV</button>')
                break;
                case 'in_process':
                    $('.card-body .col-md-8').html('<i class="mdi mdi-spin mdi-loading mdi-48px"></i><h4>Please wait while we process your request!!</h4>')
                break;
                case 'fields_missing':
                    $('.card-body .col-md-8').html('')
                    $('.card-body .col-md-8').append('<h4>Please find below a list of missing CSV Fields</h4>')
                    $('.card-body .col-md-8').append('<ol></ol>')
                    for(let miss of context.missing) {
                        $('.card-body .col-md-8 ol').append('<li>'+miss+'</li>')
                    }
                    $('.card-body .col-md-8').append('<button class="btn btn-success step_button" step="validate_csv">Re Validate CSV</button>')
                    clearInterval(interval);
                break;
                case 'validated_csv':
                    $('.card-body .col-md-8').html('<h4>The CSV data is now Validated, please proceed to the next step</h4><button class="btn btn-success step_button" step="import">Import CSV Data</button>')
                    clearInterval(interval);
                break;
                case 'imported':
                    $('.card-body .col-md-8').html('<h4>The CSV data is Imported Successfully, please proceed to the next step</h4><button class="btn btn-success step_button" step="validate_users">Validate User Data</button>')
                    clearInterval(interval);
                break;
                case 'users_missing':
                    $('.card-body .col-md-8').html('')
                    $('.card-body .col-md-8').append('<h4>Please find below a list of missing users</h4>')
                    $('.card-body .col-md-8').append('<ol></ol>')
                    for(let miss of context.missing) {
                        $('.card-body .col-md-8 ol').append('<li>'+miss+'</li>')
                    }
                    $('.card-body .col-md-8').append('<button class="btn btn-success step_button" step="validate_users">Re Validate User Data</button>')
                    clearInterval(interval);
                break;
                case 'validated_users':
                    $('.card-body .col-md-8').html('<h4>The CSV data Validated for Users. Please proceed to next step</h4><button class="btn btn-success step_button" step="validate_doctors">Validate Doctors Data</button>')
                    clearInterval(interval);
                break;

                case 'doctors_missing':
                    $('.card-body .col-md-8').html('')
                    $('.card-body .col-md-8').append('<h4>Please find below a list of missing doctors</h4>')
                    $('.card-body .col-md-8').append('<ol></ol>')
                    for(let miss of context.missing) {
                        $('.card-body .col-md-8 ol').append('<li>'+miss+'</li>')
                    }
                    $('.card-body .col-md-8').append('<button class="btn btn-success step_button" step="validate_doctors">Re Validate Doctor Data</button>')
                    clearInterval(interval);
                break;
                case 'validated_doctors':
                    $('.card-body .col-md-8').html('<h4>The CSV data Validated for Doctors. Please proceed to next step</h4><button class="btn btn-success step_button" step="index_data">Index Final Data</button>')
                    clearInterval(interval);
                break;

                case 'completed':
                    $('.card-body .col-md-8').html('<h4>The CSV data is Indexed and process is Completed!!!</h4>')
                    clearInterval(interval);
                break;
                
                // default:
                //     clearInterval(interval);
                // break;

            }
        }

        showStatus("{{$status}}", {!! json_encode($context) !!})

        $('.step_button').click(function(){
            $('.card-body .col-md-8').html('<i class="mdi mdi-spin mdi-loading mdi-48px"></i><h4>Please wait while we process your request!!</h4>')
            $.ajax({
                type: "GET",
                url: '/activityimport/step?id={{$id}}&step='+$(this).attr('step'),
                processData: false,
                contentType: false,
                success: function(data) {
                    console.log(data)
                    showStatus(data.status, data.context)
                },
            });
            interval = setInterval(checkStatus, 2000);
        })



        //var interval = setInterval(checkStatus, 2000); // 2000 ms = start after 2sec 
        
    });
</script>
<!-- end demo js-->
@endsection