Masuksini-Real-Estate/public/assets/pwa/page/dashboard.js

globalThis.Dashboard = {
    content: `
    <div class="row">
        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Pengujung Blog</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="tot-pengunjung">0</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Total Post</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="tot-post">0</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Properti Dilihat</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">0</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Pending Requests Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Total Properti</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="tot-properti">0</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id='map' style='width: 100%; height: 350px;'></div>

    `,
    action: function(){


        setTimeout(function(){


            mapboxgl.accessToken = 'pk.eyJ1Ijoid2Vic2h1bnRlcm5ldCIsImEiOiJja3RlM3BlaWkybHlnMnltdXoyMzN0bzVjIn0.GichTcrFpB2D-KnzpgsZbA';
            const map = new mapboxgl.Map({
                container: 'map', // container ID
                style: 'mapbox://styles/mapbox/streets-v11', // style URL
                center: [110.6625709,-7.3171666],
                zoom: 6 // starting zoom
            });



            var aw = new db;
            aw.table('properti')
            .select(' lat, lng')
            .condition([
                {opsi: '', data: ['lat', '<>', '0']},
                {opsi: 'AND', data: ['lng', '<>', '0']},
            ])
            .get(function(c){

                for(const d of c){
                    const marker = new mapboxgl.Marker()
                    marker.setLngLat([d.lng.replace(/\,/g, ''), d.lat.replace(/\,/g, '')])
                    marker.addTo(map);
                }

            })



            document.getElementById('app-content-title').innerText = "Dashboard"
            var aw = new db;
            aw.table('pengunjung')
            aw.select(" count(*) as aw ")
            aw.get(function(a){
                document.getElementById('tot-pengunjung').innerText = a[0].aw;



                var aw = new db;
                aw.table('blog')
                aw.select(" count(*) as aw ")
                aw.get(function(a){
                    document.getElementById('tot-post').innerText = a[0].aw;


                    var aw = new db;
                    aw.table('properti')
                    aw.select(" count(*) as aw ")
                    aw.get(function(a){
                        document.getElementById('tot-properti').innerText = a[0].aw;
                    })



                })



            })
        })
    }
}