public static function page()
{
$selectedFeature = ZAppFeature::selectedFeature();
// pr($selectedFeature);
$homePage = $selectedFeature[0];
$arrChildren = ZAppFeature::getChildren();
// pr($arrChildren);
$arrObj = array();
foreach ($arrChildren as $child) {
$obj = new $child();
//kalo tidak aktif continue
if (!$obj->feat_active) {
continue;
}
if (!isset($arrObj[$obj->feat_rank_tampil])) {
$arrObj[$obj->feat_rank_tampil] = $obj;
} else {
$arrObj[] = $obj;
}
}
ksort($arrObj);
// pr($arrObj);
?>
<style>
.sim_textColor{
color: white;
}
.sim_maskColor{
/*background-color: white;*/
width: 15px;
height: 15px;
margin: auto;
margin-top: 5px;
}
.bgblur{
position: fixed;
width: 100%;
height: 100%;
top:0px;
left: 0px;
background-color: rgba(0,0,0,0.8);
z-index: 1031;
}
.list_item_form{
position: fixed;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
z-index: 1032;
background-color: white;
border-radius: 3px;
max-height: 90%;
overflow: auto;
}
.list_item_form::-webkit-scrollbar {
width: 2px;
}
.list_item_form::-webkit-scrollbar-button {
width: 2px;
height:5px;
}
.list_item_form::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius:10px;
}
.list_item_form::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
border-radius:10px;
}
.list_item_form::-webkit-scrollbar-thumb:hover {
background:#7d7d7d;
}
</style>
<script>
var inTabs = [];
var selectedTab = '<?php
echo $selectedFeature[0];
?>
';
var arrFeats = {};
function removeAppFeature(id){
$.post("<?php
echo _SPPATH;
?>
FeatureSessionLayer/removeFeat",{id:id},function(data){
console.log('kiriman feature ');
console.log(data);
// alert(data);
$(".hiddenform").hide();
selectedTab = data[0];
$(".mpage").hide();
$('#m_'+selectedTab).show();
// manageView(data[0]);
updateSelectedAppAndSimulator();
if(data.length <2){
$('.jumlahwarning').show();
}
$("#wadahbutton_"+id+"_1").hide();
$("#wadahbutton_"+id+"_2").show();
},'json');
}
function updateSelectedAppAndSimulator(){
$('.jumlahwarning').hide();
console.log("selectedTab : "+selectedTab);
//update warna selected
$.get("<?php
echo _SPPATH;
?>
FeatureSessionLayer/getSelectedFeat",function(data){
console.log("feats");
console.log(data);
var jumlahSelected = data.length;
var sisaNya = [];
var tabs = '';
$(".feat").removeClass("feat-selected");
for(var x=0;x<data.length;x++){
var attr = data[x];
//update iconss
$("#icon_"+data[x]).addClass("feat-selected");
// console.log("update "+data[x]);
if(jumlahSelected>5) {
if(x>3){
sisaNya.push(data[x]);
}else{
//update tabss
tabs += '<div onclick="manageView(\''+data[x]+'\');" class="mtab ';
if(data[x] == selectedTab) tabs += 'mtab-selected';
tabs += '" id="tab_'+data[x]+'">';
tabs += '<div class="mtab-img">' +
'<div class="sim_maskColor" style="-webkit-mask-box-image: url('+arrFeats[attr].icon_path+arrFeats[attr].feat_tab_icon+');"></div>' +
'</div>';
// tabs += '<div class="mtab-img"><i class="'+arrFeats[attr].feat_tab_icon+'"></i></div>';
tabs += '<div class="mtab-text" id="tabname_'+data[x]+'">'+arrFeats[attr].label_name+'</div></div>';
}
}else{
//update tabss
tabs += '<div onclick="manageView(\''+data[x]+'\');" class="mtab ';
if(data[x] == selectedTab) tabs += 'mtab-selected';
tabs += '" id="tab_'+data[x]+'">';
tabs += '<div class="mtab-img">' +
'<div class="sim_maskColor" style="-webkit-mask-box-image: url('+arrFeats[attr].icon_path+arrFeats[attr].feat_tab_icon+');"></div>' +
'</div>';
tabs += '<div class="mtab-text" id="tabname_'+data[x]+'">'+arrFeats[attr].label_name+'</div></div>';
}
// console.log("update tabs"+tabs);
//backend
inTabs = [];
inTabs.push(data[x]);
$("#wadahbutton_"+data[x]+"_1").show();
$("#wadahbutton_"+data[x]+"_2").hide();
}
//dari jumlah kita tentukan width
var pembagi = jumlahSelected;
if(jumlahSelected>5){
pembagi = 5;
}
var tabwidth = Math.floor(271/pembagi);
if(jumlahSelected>5){
//update tabss
tabs += '<div class="mtab ';
if(data[x] == selectedTab) tabs += 'mtab-selected';
tabs += '" onclick="showMore();" id="tab_more">';
tabs += '<div class="mtab-img">' +
'<div class="sim_maskColor" style="-webkit-mask-box-image: url('+arrFeats[attr].icon_path+'ic_more.png'+');"></div>' +
'</div>';
// tabs += '<div class="mtab-img"><i class="glyphicon glyphicon-option-horizontal"></i></div>';
tabs += '<div class="mtab-text">more</div></div>';
//update isi dari showMore
updateShowMore(sisaNya);
}
tabs += '<style>.mtab{width: '+tabwidth+'px;} </style>';
$("#mfooter").html(tabs);
},'json');
}
</script>
<style>
.closer{
cursor: pointer;
/*float: right;*/
width: 10px;
height: 10px;
}
</style>
<?php
foreach ($arrObj as $obj) {
$valuesNya = FeatureSessionLayer::load($obj->feat_id);
$labelname = isset($valuesNya[$obj->feat_id . '_labelname']) ? $valuesNya[$obj->feat_id . '_labelname'] : $obj->feat_name;
?>
<div class="hiddenform" id="form_<?php
echo $obj->feat_id;
?>
" style="display: none;">
<div class="closer" onclick="$('#form_<?php
echo $obj->feat_id;
?>
').hide();$('#feature').show();">x</div>
<?php
$obj->formPembuatan();
?>
</div>
<script>
//sekalian kita buat object javascriptnya untuk masing2 object spy accesible terus nantinya
var obj_<?php
echo $obj->feat_id;
?>
= {
feat_id : "<?php
echo $obj->feat_id;
?>
",
feat_name : "<?php
echo $obj->feat_name;
?>
",
feat_icon : "<?php
echo $obj->feat_icon;
?>
",
feat_tab_icon : "<?php
echo $obj->feat_tab_icon;
?>
",
label_name : "<?php
echo $labelname;
?>
",
icon_path : "<?php
echo $obj->icon_path;
?>
"
// getInfo: function () {
// return this.color + ' ' + this.type + ' apple';
// }
}
arrFeats.<?php
echo $obj->feat_id;
?>
= obj_<?php
echo $obj->feat_id;
?>
;
</script>
<?php
}
?>
<section id="feature">
<h2 class="header_besar">Which features do you want in your app? </h2>
<div class="feature_list_heading_information">
<p style="color: #a2a2a2;">Please choose one or more.</p>
</div>
<div class="alert alert-warning jumlahwarning" style="display: none;">
<strong>Warning!</strong> Minimum one feature must be selected.
</div>
<script>
$(function() {
// $( "#sortable" ).sortable();
$("#sortable").sortable({
stop: function(event, ui) {
var idsInOrder = $("#sortable").sortable("toArray");
console.log(idsInOrder);
$.post("<?php
echo _SPPATH;
?>
FeatureSessionLayer/updateFeatOrder",{
ids : idsInOrder.join()
},function(data){
console.log(data);
updateSelectedAppAndSimulator();
},'json');
// var data = "";
//
// $("#sortable li").each(function(i, el){
// var p = $(el).text().toLowerCase().replace(" ", "_");
// data += p+"="+$(el).index()+",";
// });
// console.log(data);
//
// $("form > [name='new_order']").val(data.slice(0, -1));
// $("form").submit();
}
});
$( "#sortable" ).disableSelection();
});
</script>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 85px; height: 100px; text-align: center; }
</style>
<ul id="sortable">
<?php
foreach ($selectedFeature as $sel) {
foreach ($arrObj as $obj) {
if ($obj->feat_id == $sel) {
// pr($sel);
?>
<li id="li___<?php
echo $obj->feat_id;
?>
" >
<div class="feat <?php
if (in_array($obj->feat_id, $selectedFeature)) {
echo "feat-selected";
}
?>
" onclick="manageView('<?php
echo $obj->feat_id;
?>
');" id="icon_<?php
echo $obj->feat_id;
?>
">
<div class="feat-img">
<div class="feat-img-icon"></div>
<!-- <img class="feat_icon" src="--><?php
//=$obj->icon_path.$obj->feat_icon;
?>
<!--">-->
<!-- <i class="--><?php
//=$obj->feat_icon;
?>
<!--"></i>-->
</div>
<div class="feat-text" id="featname_<?php
echo $obj->feat_id;
?>
">
<?php
echo $obj->feat_name;
?>
</div>
</div>
</li>
<style>
#icon_<?php
echo $obj->feat_id;
?>
.feat-img-icon{
background-color: white;
-webkit-mask-box-image: url(<?php
echo $obj->icon_path . $obj->feat_icon;
?>
);
}
</style>
<?php
}
}
}
?>
<?php
foreach ($arrObj as $obj) {
if (!in_array($obj->feat_id, $selectedFeature)) {
?>
<li id="li___<?php
echo $obj->feat_id;
?>
" >
<div class="feat <?php
if (in_array($obj->feat_id, $selectedFeature)) {
echo "feat-selected";
}
?>
" onclick="manageView('<?php
echo $obj->feat_id;
?>
');" id="icon_<?php
echo $obj->feat_id;
?>
">
<div class="feat-img">
<div class="feat-img-icon"></div>
<!-- <img class="feat_icon" src="--><?php
//=$obj->icon_path.$obj->feat_icon;
?>
<!--">-->
<!-- <i class="--><?php
//=$obj->feat_icon;
?>
<!--"></i>-->
</div>
<div class="feat-text" id="featname_<?php
echo $obj->feat_id;
?>
">
<?php
echo $obj->feat_name;
?>
</div>
</div>
</li>
<style>
#icon_<?php
echo $obj->feat_id;
?>
.feat-img-icon{
background-color: white;
-webkit-mask-box-image: url(<?php
echo $obj->icon_path . $obj->feat_icon;
?>
);
}
</style>
<?php
}
}
?>
</ul>
<div class="clearfix"></div>
<div style="text-align: center; margin-top: 20px;">
<button id="nextpage1" style="width: 50%;" class="btn btn-danger btn-lg">Next</button>
</div>
<script>
$('#nextpage1').click(function(){
$('.nav-pills a[href="#page_themes"]').tab('show');
});
//$(this).toggleClass('feat-selected');
function manageView(id){
$( "#loadingmobile" ).show().fadeOut( 300 );
$('#feature').hide();
$('.hiddenform').hide();
$('#form_'+id).show(); //dulunya toggle
$(".mtab").removeClass("mtab-selected");
selectedTab = id;
$("#tab_"+id).addClass("mtab-selected");
/*
if(jQuery.inArray( id, inTabs )>-1){
selectedTab = id;
$("#tab_"+id).addClass("mtab-selected");
}*/
$(".mpage").hide();
//showloading bentar
$('#m_'+id).show();
if(id == "map"){
kerjakanMap();
}
}
</script>
</section>
<?php
}
public static function page()
{
$selectedFeature = ZAppFeature::selectedFeature();
$homePage = $selectedFeature[0];
$arrChildren = ZAppFeature::getChildren();
// pr($arrChildren);
$arrObj = array();
foreach ($arrChildren as $child) {
$obj = new $child();
//kalo tidak aktif continue
if (!$obj->feat_active) {
continue;
}
if (!isset($arrObj[$obj->feat_rank_tampil])) {
$arrObj[$obj->feat_rank_tampil] = $obj;
} else {
$arrObj[] = $obj;
}
}
ksort($arrObj);
?>
<div style="margin-left: -50px">
<div class="nexus">
<div id="loadingmobile">
<div style="float: left;">
<img src="<?php
echo _SPPATH;
?>
images/androidspinner2.gif">
</div>
<div style="float: left; margin-left: 15px;">
loading..
</div>
<div class="clearfix"></div>
</div>
<div id="app_desktop" style="display: none;">
<?php
$details = ZAppFeature::loadDetails();
?>
<div id="my_app_icon">
<div id="my_app_icon_img">
<img id="my_app_icon_img_src" src="<?php
echo $details['app_icon'];
?>
">
</div>
<div id="my_app_icon_text"><?php
echo $details['app_name'];
?>
</div>
</div>
<style>
#my_app_icon{
width: 50px;
margin-left: 15px;
margin-top: 105px;
text-align: center;
}
#my_app_icon_img{
width: 40px;
height: 40px;
/* background-image: url(*/<?php
//=_SPPATH;
?>
/*images/noimage2.png);*/
/* background-repeat: no-repeat;*/
/* background-size: 100% auto;*/
border-radius: 2px;
margin-left: 5px;
overflow: hidden;
}
#my_app_icon_img_src{
width: 40px;
height: 40px;
}
#my_app_icon_text{
font-size: 11px;
margin-top: 5px;
color: white;
}
</style>
</div>
<div class="menubatterei"></div>
<div id="splash_screen" style=" display: none; z-index: 2000;"></div>
<div class="isiapp" id="isiapp">
<?php
// print isi apps here
foreach ($arrObj as $obj) {
?>
<div class="mpage" id="m_<?php
echo $obj->feat_id;
?>
" style="display: none;">
<?php
echo $obj->appPage();
?>
</div>
<?php
}
?>
<div class="mpage" id="m_more" style="display: none;">
<div class="mheader" id="mheader_more">
<div class="mheadertext" id="mheadertext_more">More</div>
</div>
<div class="mcontent" id="mcontent_more">
<?php
$jumlahSelected = count($selectedFeature);
$cnt = 0;
//manage tab here
foreach ($selectedFeature as $sel) {
foreach ($arrObj as $obj) {
if ($obj->feat_id == $sel) {
$cnt++;
if ($cnt > 5) {
$valuesNya = FeatureSessionLayer::load($obj->feat_id);
$labelname = isset($valuesNya[$obj->feat_id . '_labelname']) ? $valuesNya[$obj->feat_id . '_labelname'] : $obj->feat_name;
?>
<div onclick="manageView('<?php
echo $obj->feat_id;
?>
');" id="list_<?php
echo $obj->feat_id;
?>
" class="listview">
<!-- <i class="--><?php
//=$obj->feat_tab_icon;
?>
<!--"></i> -->
<div class="sim_maskColor" style="float:left;-webkit-mask-box-image: url(<?php
echo $obj->icon_path . $obj->feat_tab_icon;
?>
);"></div>
<span id="tabname_<?php
echo $obj->feat_id;
?>
"><?php
echo $labelname;
?>
</span>
</div>
<?php
}
}
}
}
?>
</div>
</div>
</div>
<style>
.listview{
padding: 5px;
border-bottom: 1px solid #dedede;
padding-left: 10px;
cursor: pointer;
}
.mtab{
float: left;
width: 54px;
height: 40x;
line-height: 40x;
text-align: center;
color: white;
cursor: pointer;
}
.mtab-img{
line-height: 20px;
}
.mtab-text{
line-height: 20px;
font-size: 10px;
}
.mtab-selected{
background-color: rgba(255,255,255,0.3);
}
.mtab-selected-black{
background-color: rgba(0,0,0,0.3) !important;
}
</style>
<div class="mfooter" id="mfooter">
<?php
$jumlahSelected = count($selectedFeature);
$cnt = 0;
//manage tab here
foreach ($selectedFeature as $sel) {
foreach ($arrObj as $obj) {
if ($jumlahSelected > 5) {
if ($cnt > 3) {
break;
}
}
if ($obj->feat_id == $sel) {
$cnt++;
$valuesNya = FeatureSessionLayer::load($obj->feat_id);
$labelname = isset($valuesNya[$obj->feat_id . '_labelname']) ? $valuesNya[$obj->feat_id . '_labelname'] : $obj->feat_name;
// echo $obj->feat_id." ".$cnt;
?>
<div onclick="manageView('<?php
echo $obj->feat_id;
?>
');" class="mtab <?php
if ($cnt == 1) {
?>
mtab-selected<?php
}
?>
" id="tab_<?php
echo $obj->feat_id;
?>
">
<div class="mtab-img">
<!-- <i class="--><?php
//=$obj->feat_tab_icon;
?>
<!--"></i>-->
<div class="sim_maskColor" style="-webkit-mask-box-image: url(<?php
echo $obj->icon_path . $obj->feat_tab_icon;
?>
);"></div>
</div>
<div class="mtab-text" id="tabname_<?php
echo $obj->feat_id;
?>
" ><?php
echo $labelname;
?>
</div>
</div>
<script>
inTabs.push('<?php
echo $obj->feat_id;
?>
');
</script>
<?php
}
}
}
$pembagi = $jumlahSelected;
if ($jumlahSelected > 5) {
$pembagi = 5;
}
$tabwidth = floor(271 / $pembagi);
if ($jumlahSelected > 5) {
?>
<div class="mtab" onclick="showMore();" id="tab_more">
<div class="mtab-img">
<div class="sim_maskColor" style="-webkit-mask-box-image: url(<?php
echo $obj->icon_path;
?>
ic_more.png);"></div>
</div>
<div class="mtab-text">more</div>
</div>
<?php
}
?>
<style>
.mtab{
width: <?php
echo $tabwidth;
?>
px;
}
</style>
</div>
</div>
</div>
<script>
function showMore(){
manageView('more');
}
function updateShowMore(arr){
console.log('updateShowmore');
console.log(arr);
var more = '';
for(var x=0;x<arr.length;x++){
var attr = arr[x];
more += '<div onclick="manageView(\''+attr+'\');" id="list_'+attr+'" class="listview">';
more += '<div class="sim_maskColor" style="float:left;-webkit-mask-box-image: url('+arrFeats[attr].icon_path+arrFeats[attr].feat_tab_icon+');"></div> <span id="tabname_'+attr+'">'+ arrFeats[attr].label_name+'</span>';
// more += 'xxs<i class="'+arrFeats[attr].feat_tab_icon+'"></i> <span id="tabname_'+attr+'">'+ arrFeats[attr].label_name+'</span>';
more += '</div>';
}
$('#mcontent_more').html(more);
}
</script>
<style>
.header_besar{
font-family: "Helvetica Neue Light", "Arial", sans-serif;
font-size: 19px;
}
#your_business_fields label{
font-family: "Helvetica Neue Light", "Arial", sans-serif;
padding-top: 10px;
padding-bottom: 5px;
}
.feature_list_heading_information{
padding-bottom: 10px;
font-family: "Helvetica Neue Light", "Arial", sans-serif;
margin-top: -10px;
font-size: 13px;
}
.feat{
/*float: left;*/
width: 60px;
height: 100px;
cursor: pointer;
/*margin-right: 13px;*/
/*margin-left: 13px;*/
}
.feat-img{
background-color: #dedede;
width: 60px;
height: 60px;
border-radius: 60px;
text-align: center;
font-size: 30px;
margin-top: 12px;
/*padding: 5px;*/
color: #999;
/*border: 1px solid #dedede;*/
}
.feat-img-icon{
width: 30px;
height: 30px;
margin-left: 15px;
margin-top: 15px;
position: absolute;
}
.feat-selected .feat-img{
background-color: #73879C;
color: white;
}
.feat-text{
font-size: 12px;
padding-top: 5px;
font-family: "Helvetica Neue Light", "Arial", sans-serif;
text-align: center;
color: #555555;
}
.begin{
/*margin-top: 28px;*/
/*padding-right: 20px;*/
/*padding-left: 20px;*/
}
.navbar-default{
background-color: rgba(255,255,255,0.5);
}
.nexus{
width: 422px;
height: 612px;
background: url(<?php
echo _SPPATH;
?>
images/nexus5.png);
background-size: 422px 612px;
background-repeat: no-repeat;
font-family: 'Roboto', sans-serif;
}
.menubatterei{
/*background-color: blue;*/
width: 271px;
height: 16px;
position: relative;
top: 57px;
left: 75px;
overflow: hidden;
background: url(<?php
echo _SPPATH;
?>
images/atasbar.png);
background-size: 271px 16px;
background-repeat: no-repeat;
/*display: none;*/
}
#mslogantext{
font-size: 13px;
}
.isiapp{
background-color: white;
position: relative;
top: 57px;
left: 75px;
width: 271px;
height: 425px;
/*overflow-x: auto;*/
overflow: hidden;
/*display: none;*/
}
#splash_screen{
top: 57px;
left: 75px;
width: 271px;
height: 466px;
overflow: hidden;
position: relative;
}
#app_desktop{
top: 57px;
left: 75px;
width: 271px;
height: 482px;
overflow: hidden;
position: relative;
background-image: url('<?php
echo _SPPATH;
?>
images/emptyandroid.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
z-index: 1005;
}
#mfooter{
width: 271px;
height: 41px;
line-height: 41px;
background-color: black;
position: relative;
top: 57px;
left: 75px;
overflow: hidden;
/*display: none;*/
}
#loadingmobile{
position: absolute;
width: 150px;
padding: 15px;
margin-left:130px;
margin-top: 240px;
z-index: 1008;
background-color: #FFFFFF;
border: 1px solid #dedede;
}
#loadingmobile img{
/*width: 100%;*/
height: 30px;
}
#loadingmobile div{
line-height: 30px;
}
.hiddenform::-webkit-scrollbar {
width: 2px;
}
.hiddenform::-webkit-scrollbar-button {
width: 2px;
height:5px;
}
.hiddenform::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius:10px;
}
.hiddenform::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
border-radius:10px;
}
.hiddenform::-webkit-scrollbar-thumb:hover {
background:#7d7d7d;
}
#mcontent_more{
background-color: #222222;
color: white;
}
</style>
<style>
.mcontent{
width: 271px;
height: 385px;
overflow-x: hidden;
overflow-y: auto;
background-color: white;
}
.mcontent::-webkit-scrollbar {
width: 2px;
}
.mcontent::-webkit-scrollbar-button {
width: 2px;
height:5px;
}
.mcontent::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius:10px;
}
.mcontent::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
border-radius:10px;
}
.mcontent::-webkit-scrollbar-thumb:hover {
background:#7d7d7d;
}
.mheader {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #000000;
color: white;
overflow: hidden;
}
.mheadertext{
padding-left: 10px;
font-size: 14px;
font-family: 'Roboto', sans-serif;
}
</style>
<script>
var homePage = '<?php
echo $homePage;
?>
';
var listOfFeat = [<?php
echo explode(",", $selectedFeature);
?>
];
$( document ).ready(function() {
// console.log(homePage);
// Handler for .ready() called.
$(".mpage").hide();
$('#m_'+homePage).show();
// listOfFeat.push("mobile");
updateSelectedAppAndSimulator();
});
function closeBlur(){
$('.list_item_form').hide();
$('.bgblur').hide();
}
</script>
<?php
}
