478 lines
12 KiB
PHP
478 lines
12 KiB
PHP
@extends('layout.front')
|
|
|
|
@section('container')
|
|
|
|
<style>
|
|
.bintang{
|
|
display: inline-block;
|
|
margin: 10px;
|
|
font-size: 16pt;
|
|
text-shadow: 0 0 20px #333;
|
|
}
|
|
.breadcrumb{
|
|
background: white;
|
|
padding: 5px 20px;
|
|
padding-top: 9px;
|
|
box-shadow: 0 0 5px #ddd;
|
|
}
|
|
|
|
.d-inline{
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.desktop-shown{
|
|
display: block;
|
|
}
|
|
|
|
.desktop-hide{
|
|
display: none;
|
|
}
|
|
|
|
#tab-filter{
|
|
min-height: 50px;
|
|
}
|
|
|
|
#tab-filter > span{
|
|
display: inline-block !important;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#tab-filter > span i{
|
|
cursor: pointer;
|
|
}
|
|
|
|
#tab-filter > span span{
|
|
margin-right: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#tab-filter > span{
|
|
padding: 8px 10px;
|
|
background: #ddd;
|
|
border-radius: 20px;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
#tab-filter{
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 40px;
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
</style>
|
|
@php
|
|
$pat = explode("/", $_SERVER['REQUEST_URI']);
|
|
|
|
$path = [];
|
|
foreach($pat as $ph){
|
|
if($ph != ""){
|
|
$path[] = $ph;
|
|
}
|
|
}
|
|
|
|
$link = "/";
|
|
@endphp
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item" aria-current="page"> <a href="/"> <i class="fas fa-home"></i> </a> </li>
|
|
@foreach($path as $key => $paths)
|
|
@if($key + 1 == count($path))
|
|
<li class="breadcrumb-item active" aria-current="page" id="pathrev"> {{str_replace("-", " ", $paths)}} </li>
|
|
<script>
|
|
document.getElementById("pathrev").innerText = document.getElementById("pathrev").innerText.replace(/\&/g, " / ").replace(/\=/g, " ");
|
|
</script>
|
|
@else
|
|
@php
|
|
$link .= $paths.'/';
|
|
@endphp
|
|
<li class="breadcrumb-item" aria-current="page"><a style="text-decoration:none;" href="{{url($link)}}"> {{str_replace("-", " ", $paths)}} </a> </li>
|
|
@endif
|
|
@endforeach
|
|
</ol>
|
|
</nav>
|
|
<div id="top-view" class="container mt-5">
|
|
|
|
<div class="row mb-3">
|
|
<!-- <div class="col-sm-12"> -->
|
|
<!-- <div class="row"> -->
|
|
<!-- <div id="tab-filter"></div> -->
|
|
<!-- <div class="col-2 text-right"><i id="filter-p" class="fas fa-sliders-h icon-menu mr-2" ></i></div> -->
|
|
<!-- </div> -->
|
|
<!-- </div> -->
|
|
<div class="col-12 desktop-shown" style="display: none;">
|
|
<select id="provinc" class="form-control d-inline">
|
|
|
|
</select>
|
|
<select id="kota" class="form-control d-inline">
|
|
|
|
</select>
|
|
<select id="kpr" class="form-control d-inline">
|
|
<option value="">All Kpr</option>
|
|
<option value="jual">Dijual</option>
|
|
<option value="sewa">Disewakan</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12 text-right desktop-hide">
|
|
filter
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="properti">
|
|
<div class="col-12 text-center">
|
|
<div class="loadingio-spinner-spinner-2lqweg6m29r"><div class="ldio-6xpymcz56">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container text-right mb-5">
|
|
<button class="btn btn-light"> Page: <span id="page"></span> </button>
|
|
<button id="prev-kpr" class="btn btn-primary"><</button>
|
|
<button id="next-kpr" class="btn btn-primary">></button>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@section('js')
|
|
<!-- <script src="{{asset('assets/bt4')}}/properti.js?v=<?= date('Ymdh')?>"></script> -->
|
|
<script type="text/javascript">
|
|
|
|
var text2Binary = function( string) {
|
|
string = JSON.stringify(string);
|
|
return string.split('').map(function (char) {
|
|
return char.charCodeAt(0).toString(2);
|
|
}).join('2');
|
|
}
|
|
|
|
|
|
function __id(a){
|
|
return document.getElementById(a);
|
|
}
|
|
|
|
var urut = 1;
|
|
var um = 0;
|
|
|
|
function clearEvent(){
|
|
|
|
var ef = {};
|
|
|
|
Array.from(document.querySelectorAll('[clear-fill]')).forEach(function(eve){
|
|
eve.addEventListener('click', function(){
|
|
var v = this.getAttribute('clear-fill');
|
|
|
|
var tr = Array.from(document.querySelectorAll('[clear-fill]')).filter(function(pop3, s){
|
|
|
|
var h = pop3.getAttribute('clear-fill');
|
|
|
|
if (h != v) {
|
|
return pop3;
|
|
}
|
|
|
|
|
|
}).map(function(pop3){
|
|
var h = pop3.getAttribute('clear-fill');
|
|
return h;
|
|
}).join("&");
|
|
|
|
|
|
window.history.pushState({}, 'name', '/properti/'+tr);
|
|
|
|
if (tr != '') {
|
|
loadData(0, [tr])
|
|
}else{
|
|
loadData(0, [])
|
|
}
|
|
|
|
},false)
|
|
})
|
|
|
|
}
|
|
|
|
var urut = 1;
|
|
var um = 0;
|
|
|
|
function loadData(x = 0, m){
|
|
|
|
var cond = {}
|
|
|
|
var query = '';
|
|
|
|
var conds = '';
|
|
|
|
|
|
|
|
|
|
// document.getElementById('tab-filter').innerHTML = conds;
|
|
|
|
clearEvent();
|
|
|
|
var likes = [];
|
|
|
|
var makeCond = []
|
|
|
|
if(makeCond.length > 0){
|
|
makeCond.push({
|
|
opsi: "AND", data: ['harga', '<>', `"0"`]
|
|
});
|
|
makeCond.push({
|
|
opsi: "AND", data: ['harga', 'IS NOT ', `NULL`]
|
|
});
|
|
makeCond.push({
|
|
opsi: "AND", data: ['judulproperti', '<>', `""`]
|
|
});
|
|
makeCond.push({
|
|
opsi: "AND", data: ['transaksi', '<>', `""`]
|
|
});
|
|
makeCond.push({
|
|
opsi: "AND", data: ['province', '<>', `""`]
|
|
});
|
|
makeCond.push({
|
|
opsi: "AND", data: ['kategori', '<>', `""`]
|
|
});
|
|
}else{
|
|
makeCond.push({
|
|
opsi: "", data: ['harga', '<>', `"0"`]
|
|
});
|
|
makeCond.push({
|
|
opsi: "AND", data: ['harga', 'IS NOT ', `NULL`]
|
|
});
|
|
makeCond.push({
|
|
opsi: "AND", data: ['judulproperti', '<>', `""`]
|
|
});
|
|
makeCond.push({
|
|
opsi: "AND", data: ['transaksi', '<>', `""`]
|
|
});
|
|
makeCond.push({
|
|
opsi: "AND", data: ['kategori', '<>', `""`]
|
|
});
|
|
}
|
|
|
|
var bagiPath = location.pathname.split('/');
|
|
|
|
bagiPath = bagiPath.filter(function(o){
|
|
if(o != "" && o != "properti"){
|
|
return o;
|
|
}
|
|
});
|
|
|
|
var condBP = ['transaksi', 'province', 'city_name', 'subdistrict_name', 'kategori'];
|
|
|
|
if(bagiPath.length > 0){
|
|
if(bagiPath[0] != 'qr'){
|
|
bagiPath.forEach(function(r,l){
|
|
r = r.replace(/\-/g, ' ');
|
|
makeCond.push({
|
|
opsi: "AND", data: [condBP[l], '=', `"${r}"`]
|
|
});
|
|
})
|
|
}else{
|
|
var qr = bagiPath[1].replace(/\-/g, ' ');
|
|
if(qr.indexOf("=") == -1){
|
|
var lik = ['judulproperti', 'transaksi', 'deskripsi'];
|
|
lik.forEach(function(r, i){
|
|
if(i == 0){
|
|
likes.push({
|
|
opsi: "", data: [r, 'LIKE', `"%${qr}%"`]
|
|
});
|
|
}else{
|
|
likes.push({
|
|
opsi: "OR", data: [r, 'LIKE', `"%${qr}%"`]
|
|
});
|
|
}
|
|
})
|
|
}else{
|
|
qr = qr.split("&");
|
|
qr.forEach(function(q){
|
|
q = q.split("=");
|
|
makeCond.push({
|
|
opsi: "AND", data: [q[0], '=', `"${q[1]}"`]
|
|
});
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
el("#page").text(urut);
|
|
el("#top-view").go(-170)
|
|
__id('properti').innerHTML = `
|
|
|
|
<div class="col-12 text-center">
|
|
<div class="loadingio-spinner-spinner-2lqweg6m29r"><div class="ldio-6xpymcz56">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div></div>
|
|
</div>
|
|
`;
|
|
var prop = db()
|
|
.table('properti')
|
|
.select('properti.*, p.id, sales.nama as sales, sales.hp as nohp')
|
|
.leftJoin([
|
|
[`( SELECT * FROM foto WHERE kategori = 'foto' GROUP BY foto.idprop ORDER BY id ASC ) as p`, `p.idprop`, '=', `properti.idprop `],
|
|
['sales', 'sales.id', '=', 'properti.idsales']
|
|
])
|
|
.order('properti.idprop', 'DESC')
|
|
.master(false)
|
|
.limit(x, 21);
|
|
if(makeCond.length > 0){
|
|
prop.condition(makeCond)
|
|
globalThis.condUp = makeCond;
|
|
}
|
|
if(likes.length > 0){
|
|
prop.like(likes)
|
|
globalThis.condOr = likes;
|
|
}
|
|
|
|
prop.get(function(e, p, qr, cnt){
|
|
|
|
globalThis.cnt = Number(cnt);
|
|
|
|
var ids = 'properti';
|
|
__id(ids).innerHTML = e.map(function(c){
|
|
var judul = c.judulproperti;
|
|
var harga = formatRupiah(Number(c.harga).toFixed(0));
|
|
if (judul.length > 30) {
|
|
judul = judul.substring(0, 30)+'...';
|
|
}
|
|
|
|
|
|
function decodeHtml(text) {
|
|
return text
|
|
.replace(/&/g, '&')
|
|
.replace(/</g , '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g,"'");
|
|
}
|
|
|
|
var deskripsi = c.deskripsi;
|
|
|
|
deskripsi = decodeHtml(deskripsi);
|
|
|
|
deskripsi = deskripsi.replace( /<.*?>/g, '' );
|
|
|
|
if(deskripsi != null){
|
|
if (deskripsi.length > 45) {
|
|
deskripsi = deskripsi.substring(0, 45)+'...';
|
|
}
|
|
}
|
|
var linktransaksi = "";
|
|
var linkprovince = "";
|
|
var linkcityname = "";
|
|
var linksub = "";
|
|
var linkkat = "";
|
|
var linkshare = "";
|
|
if(c.transaksi != ""){
|
|
linktransaksi = c.transaksi.toLocaleLowerCase().replace(' ', '-')+'/';
|
|
}
|
|
if(c.city_name != ""){
|
|
linkprovince = c.province.toLocaleLowerCase().replace(' ', '-')+'/';
|
|
}
|
|
if(c.city_name != ""){
|
|
linkcityname = c.city_name.toLocaleLowerCase().replace(' ', '-')+'/';
|
|
}
|
|
if(c.subdistrict_name != ""){
|
|
linksub = c.subdistrict_name.toLocaleLowerCase().replace(' ', '-')+'/';
|
|
}
|
|
if(c.kategori != ""){
|
|
linkkat = c.kategori.toLocaleLowerCase().replace(' ', '-')+'/';
|
|
}
|
|
// if(c.share != ""){
|
|
// linkshare = c.share.toLocaleLowerCase().replace(' ', '-')+'/';
|
|
// }
|
|
return `
|
|
<div onclick="window.location.href = '/${linktransaksi}${linkprovince}${linkcityname}${linksub}${linkkat}${linkshare}${text2Binary(c.idprop)}'" style="cursor: pointer;" class="col-sm-6 col-lg-4 mb-4">
|
|
<div class="card mb-2 card-content h-100">
|
|
<div class="foto images-content" style="--h:250px;
|
|
--foto: url('/assets/upload/cover/${c.idprop}.jpg?v=${Date.now()}');
|
|
">
|
|
<div class="bintang"> <i class="fas fa-star"></i> ${c.bintang}</div>
|
|
<div class="harga">Rp ${harga}</div>
|
|
<div class="status">${c.transaksi}</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 style="font-size: 14pt;">${judul}</h4>
|
|
<p>${deskripsi}</p>
|
|
<span>
|
|
<i class="fas fa-building"></i> <span>${c.lb}<sup>m2</sup></span>
|
|
</span>
|
|
<span>
|
|
<i class="fas fa-arrows-alt"></i> <span>${c.lt}<sup>m2</sup></span>
|
|
</span>
|
|
<span>
|
|
<i class="fas fa-bed"></i> <span>${c.jum_kt}</span>
|
|
</span>
|
|
<span>
|
|
<i class="fas fa-bath"></i> <span>${c.jum_km}</span>
|
|
</span>
|
|
<div class="row mt-3 agen-info">
|
|
<div class="col-7">
|
|
<div class="agen">
|
|
<div class="foto" style="--foto: url('/assets/upload/agen/${c.idsales}.jpg')" class="foto-agen"></div>
|
|
<div>
|
|
<h4>${c.sales}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-5">
|
|
<button style="cursor:pointer;" onclick="event.stopPropagation(); window.open('https://api.whatsapp.com/send?phone=${c.nohp}', '_blank')"><i class="fab fa-whatsapp"></i> Hubungi agen</button>
|
|
<button style="cursor:pointer;" onclick="event.stopPropagation(); location.href = '/kpr?nominal=${harga}'" ><i class="fab fa-whatsapp"></i> Hitung KPR</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
`;
|
|
}).join("");
|
|
})
|
|
}
|
|
|
|
loadData();
|
|
|
|
el('#prev-kpr').click(function(){
|
|
if(um > 0){
|
|
urut -=1;
|
|
um -= 21;
|
|
loadData(um);
|
|
}
|
|
})
|
|
|
|
el('#next-kpr').click(function(){
|
|
um += 21;
|
|
urut +=1;
|
|
if (um < globalThis.cnt) {
|
|
loadData(um);
|
|
}else{
|
|
urut -=1;
|
|
um -= 21;
|
|
}
|
|
})
|
|
window.scrollTo(0, 0);
|
|
|
|
</script>
|
|
@endsection
|