Added Unapprove Page, Detail Modal and function to delete and approve Mechanic Location (bengkel)

11개월 전

Repository

https://github.com/sogatanco/nebeng

About NEBENG

NEBENG (Nemu-Bengkel) is an application to find the nearest car workshop and motorcycle workshop. When your vehicle is damaged in transit, you don't know where it is closest to repairing it. Nebeng is the solution.

What feature(s) did you add?

  • Unapprove Page is a page that displays the list of locations that was just entered by the user. this is where the admin reviews whether this location is acceptable or not

  • Detail Modal
    is a pop-up to display details of the location. here all data related to location are displayed such as rating, description, cellphone number etc.

  • Delete Function
    is a function to delete location. this function call by a button on Detail modal

  • Approve function
    is a function to approve location after reviewed by admin. if the location is not fake, admin will press approve button on modal detail to call this function.
    33ycd9.gif

How did you implement it/them?

all processes in the features we have added are made using the PHP (Codeigniter), Bootstrap and jQuery programming languages. data and action requested from the Rest API that we made yesterday. Here's a little code snippet:

  • Unapprove location list
function getContent(){
        $.ajax({
            type:"get",
            url:"../../api/admin/viewbengkel?token="+Cookies.get("token"),
            success: function(response){
                $(".junapprove").html(response.data.length);
                $("#content").html("")
                popular=response.data;
                console.log(popular)
                for(i=0;i<popular.length;i++){
                    judul=popular[i].bk_namabengkel;
                    deskripsi=popular[i].bk_deskripsi;
                    rating=popular[i].total_rating/popular[i].j_ulasan;
                    rating = rating || 0
                    rating=rating.toFixed(1)
                    if(deskripsi==""){
                        deskripsi="Description";
                    }
                    kategori=popular[i].bk_kategori;
                    if(kategori=="1"){
                        kategori="<span class='fas fa-motorcycle text-danger'></span> Motor";
                    }
                    else{
                        kategori="<span class='fas fa-car text-danger'></span> Mobil";
                    }
                    $("#content").append(`
                    <div class="col-sm-4">
                        <div class="card-view" data-toggle="modal" data-target="#myModal" data-id="`+popular[i].bk_id+`" data-lat="`+popular[i].bk_lat+`" data-long="`+popular[i].bk_long+`" data-judul="`+judul+`" data-rating="`+rating+`" data-ulasan="`+popular[i].j_ulasan+`" data-kategori="`+kategori+`" data-desk="`+deskripsi+`" data-lay="`+popular[i].bk_layanan+`" data-pemilik="`+popular[i].bk_pemilik+`" data-tanggal="`+popular[i].bk_startdate+`" data-tlp="`+popular[i].bk_telpon+`" data-waktu="`+popular[i].bk_availabletime+`">
                            <div class="row">
                                <div class="col-6">
                                </div>
                                <div class="col-6 content">
                                <strong class="title">`+judul.substring(0,14)+`</strong>
                                    <small class="text-muted">
                                        <p><span class="badge badge-pill badge-warning notification" >`+rating+` </span>  `+popular[i].j_ulasan+` ulasan | `+kategori+`</p>
                                        <p>`+deskripsi.substring(0,35)+`...</p>
                                    </small> 
                                </div>
                            </div>
    
                        </div>
                    </div>
                    `);
                }
            },
            error:function(err){
                $("#content").html("")
                $(".junapprove").html(0);
            }
        }); 
    }
  • Detail Modal
 $('#content').on( "click",".card-view", function() {
        initialize(new google.maps.LatLng($(this).data('lat'), $(this).data('long')));
        $('#judul').html(ca($(this).data('judul')));
        $('#tombol').html(`
        <button type="button" class="btn btn-danger" id="delete" data-idbengkel="`+$(this).data('id')+`"><i class='fas fa-trash-alt'></i></button>
        <button type="button" class="btn btn-success" id="terima" data-idbengkel="`+$(this).data('id')+`"><i class='fas fa-check'></i></button>
        `)
        $('#attribute').html(`<span class="badge badge-pill badge-warning notification" >`+$(this).data('rating')+`</span> `+$(this).data('ulasan')+` ulasan | `+$(this).data('kategori'));
        $("#deskripsi").html($(this).data('desk')+`.`);
        $("#layanan").html(`Bengkel ini ditambahkan oleh <b>`+$(this).data('pemilik')+ `</b> sejak `+$(this).data('tanggal')+ `. Adapun layanan yang bisa didapatkan di sini antara lain :` +$(this).data('lay')+` dengan waktu pengoprasian mulai dari ` +$(this).data('waktu')+` WIB. Untuk informasi lebih lanjut silakan menghubungi langsung `+$(this).data('tlp')+`.`);
        $.ajax({
            type:"get",
            url:"../../api/general/ulasan?token=1234567&idbengkel="+$(this).data('id'),
            success:function(respon){
                $('#komentars').html('');
                $.each(respon.data,  function(i,d){
                    bintang=parseFloat(d.ul_rating)
                    bintang=bintang.toFixed(1)
                    $('#komentars').append(`
                    <p><b>`+d.ul_user+`</b><br><small class="text-muted">Rated  <span class="badge badge-pill badge-info notification" >  `+bintang+`</span> | `+prettyDate(d.ul_time)+` </small><br>`+d.ul_ulasan+`</p>
                    `)
                })
                console.log(respon.data)
            },
            error:function(error){
                $('#komentars').html(`<p>Maaf belum ada data</p>`)
            }
            
        });
        
    });
  • delete and approve function
$('#myModal').on('shown.bs.modal', function(e) {
        $("#delete").click(function(){
            var conf=confirm("Are you sure to Delete it ?");
            if(conf==true){
                console.log($(this).data('idbengkel'))
                $.ajax({
                    type:"DELETE",
                    url:"../../api/admin/deletebengkel",
                    data:{
                        token:Cookies.get('token'),
                        id:$(this).data('idbengkel')
                    },
                    success:function(res){
                        alert("Deleted")
                        $("#myModal").modal("toggle");
                        getContent()
                    },
                    error:function(err){
                        alert("failed to delete")
                    }
                })
            }
        })
        $("#terima").click(function(){
            var conf=confirm("Are you sure to Approve ?");
            if(conf==true){
                $.ajax({
                    type:"PUT",
                    url:"../../api/admin/approvebengkel",
                    data:{
                        token:Cookies.get('token'),
                        idbengkel:$(this).data('idbengkel')
                    },
                    success:function(response){
                        alert("approved")
                        $("#myModal").modal("toggle");
                        getContent()
                    },
                    error:function(err){
                        alert("approve failed")
                    }
                });
            } 
        });
    });
  • add map on modal detail
 function initialize(myCenter) {
        var marker = new google.maps.Marker({
            position: myCenter
        });
      var mapProp = {
            center: myCenter,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), mapProp);
        marker.setMap(map);
    };

Commits on Github

https://github.com/sogatanco/nebeng/compare/master@%7B06-18-19%7D...master

Github Account

https://github.com/sogatanco

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
STEEMKR.COM IS SPONSORED BY
ADVERTISEMENT
Sort Order:  trending
  • This article would benefit from an intro image and more images from the project.
  • The list of commits is an improvement from previous posts.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

·

Thank you for your review, @helo! Keep up the good work!

Hi @sogata!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @sogata!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!