<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mbahgoez/pen/PzWgjV?limit=all&page=60&q=about+us" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css'>
<style class="cp-pen-styles">@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css";
@-webkit-keyframes bubble {
from {
letter-spacing: 0px;
}
to {
letter-spacing: 5px;
}
}
@keyframes bubble {
from {
letter-spacing: 0px;
}
to {
letter-spacing: 5px;
}
}
button:focus,
a:focus,
input:focus {
outline: none;
background: #eee;
color: #444;
}
div.loading {
text-align: center;
margin-top: 50px;
font-size: 30px;
text-transform: uppercase;
color: #999;
}
div.loading p {
display: block;
-webkit-animation: bubble .3s infinite alternate;
animation: bubble .3s infinite alternate;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Tw Cen Mt', 'Segoe UI', sans-serif;
}
body {
background: #f8f8f8;
}
#bar,
#slide,
#overlay {
display: none;
}
.container {
width: 100%;
height: 100vh;
}
.container::after {
clear: both;
content: "";
display: table;
}
.column {
overflow: hidden;
float: left;
box-shadow: 0 1px 1px 0 #ccc;
height: 100vh;
}
.column.four {
width: 33.333333%;
}
header {
background: #fff;
width: 100%;
box-shadow: 0 1px 1px 0 #ccc;
width: 100%;
box-shadow: 0 1px 4px 0 #ccc;
z-index: 1;
position: relative;
padding: 10px;
padding-left: 30px;
}
header::after {
clear: both;
content: "";
display: table;
}
header h2 {
font-size: 24px;
}
@media screen and (max-width: 1024px) {
header h2 {
font-size: 15px;
}
}
header h2 i {
margin-right: 10px;
}
header p {
color: #999;
}
@media screen and (max-width: 1024px) {
header p {
display: none;
}
}
section {
height: 84%;
overflow-y: scroll;
padding-bottom: 50px;
}
@media screen and (max-width: 1024px) {
section {
height: 91%;
}
}
#pemesanan section {
padding: 10px;
}
#pemesanan section .card {
background: #fff;
box-shadow: 0 1px 1px 0 #ccc;
padding: 30px 35px;
margin: 5px 0;
margin-bottom: 20px;
}
#pemesanan section .card h3 {
text-transform: uppercase;
text-align: center;
color: #666;
letter-spacing: 4px;
}
#pemesanan section .card .ion-pizza {
margin-top: 10px;
font-size: 50px;
display: block;
color: #999;
text-align: center;
}
@media screen and (max-width: 1024px) {
#pemesanan section .card .ion-pizza {
font-size: 30px;
}
}
#pemesanan section .card p {
text-align: center;
color: #999;
}
@media screen and (max-width: 1024px) {
#pemesanan section .card p {
font-size: 12px;
}
}
#pemesanan section .card input {
display: block;
padding: 10px 8px;
width: 100%;
margin: 10px 0;
border: none;
font-size: 20px;
box-shadow: 0 1px 0 0 #ccc;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
#pemesanan section .card input:focus {
box-shadow: 0 1px 0 0 #37BDB2;
}
@media screen and (max-width: 1024px) {
#pemesanan section .card input {
font-size: 12px;
}
}
#pemesanan section .card button#add {
display: block;
width: 100%;
padding: 10px 8px;
border: none;
margin-top: 20px;
font-size: 20px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
color: #fff;
letter-spacing: 3px;
background: #37BDB2;
}
@media screen and (max-width: 1024px) {
#pemesanan section .card button#add {
font-size: 14px;
}
}
#menu header {
padding: 0;
padding-right: 30px;
}
#menu header ul {
list-style: none;
}
@media screen and (max-width: 1024px) {
#menu header ul {
float: right;
}
}
#menu header ul li {
display: inline-block;
}
#menu header ul li a {
height: 100%;
display: block;
padding: 35px 40px;
color: #aaa;
font-size: 30px;
}
@media screen and (max-width: 1024px) {
#menu header ul li a {
font-size: 15px;
padding: 10px 15px;
}
}
#menu header ul li a:hover {
background: #eee;
color: #37BDB2;
}
#menu header ul li #hireme {
display: block;
text-transform: uppercase;
padding: 10px 20px;
font-size: 15px;
border: none;
color: #37BDB2;
background: transparent;
border: 1px solid #37BDB2;
position: relative;
top: -5px;
}
@media screen and (max-width: 1024px) {
#menu header ul li #hireme {
font-size: 12px;
padding: 5px 10px;
top: 0;
}
}
#menu header ul li #hireme:focus {
background: #37BDB2;
color: #fff;
}
#menu section h3 {
display: block;
background: #37BDB2;
padding: 10px 20px;
color: #fff;
}
#menu section h3 i {
margin-right: 10px;
}
#menu section ul {
list-style: none;
padding: 10px;
margin-bottom: 10px;
}
#menu section ul li {
display: block;
background: #fefefe;
border: 1px solid #ccc;
margin: 4px 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
overflow: hidden;
}
#menu section ul li::after {
clear: both;
content: "";
display: table;
}
#menu section ul li button {
float: left;
padding: 10px 20px;
margin-right: 15px;
border: none;
color: #fff;
font-size: 20px;
background: #06B042;
box-shadow: 0 1px 10px 0 #ccc;
}
#menu section ul li button:focus {
background: #37BDB2;
}
#menu section ul li .desc {
position: relative;
padding-top: 10px;
width: 80%;
float: left;
}
@media screen and (max-width: 1024px) {
#menu section ul li .desc {
width: 70%;
}
}
#menu section ul li .desc span {
text-align: right;
font-size: 16px;
position: relative;
}
#menu section ul li .desc span.price {
color: #00c33c;
position: absolute;
display: inline-block;
font-size: 16px;
right: 10px;
}
#daftar-pesanan section h3 {
position: relative;
box-shadow: 0 1px 1px 0 #ccc;
background: #37BDB2;
padding: 10px;
color: #fff;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
}
#daftar-pesanan section ul li {
padding: 0px 10px;
}
#daftar-pesanan section ul li:nth-of-type(odd) .card {
border-right: 5px solid #E7F91C;
}
#daftar-pesanan section ul li.edit .card {
max-height: 150px;
}
#daftar-pesanan section ul li.edit .card .description .edit {
display: inline-block;
}
#daftar-pesanan section ul li.edit .card .description .noedit {
display: none;
}
#daftar-pesanan section ul li .card {
-webkit-transition: all .2s ease;
transition: all .2s ease;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
max-height: 100px;
overflow: hidden;
background: #fff;
border-right: 5px solid #fc109e;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.3);
}
#daftar-pesanan section ul li .card::after {
clear: both;
content: "";
display: table;
}
#daftar-pesanan section ul li .card .image {
width: 30%;
float: left;
overflow: hidden;
}
#daftar-pesanan section ul li .card .image img {
width: 140px;
-webkit-filter: brightness(20);
filter: brightness(20);
}
#daftar-pesanan section ul li .card .description {
width: 70%;
float: left;
padding: 15px 20px;
}
#daftar-pesanan section ul li .card .description .edit {
display: none;
}
#daftar-pesanan section ul li .card .description .noedit {
display: inline-block;
}
#daftar-pesanan section ul li .card .description h4 {
color: #666;
}
@media screen and (max-width: 1024px) {
#daftar-pesanan section ul li .card .description h4 {
font-size: 14px;
}
}
#daftar-pesanan section ul li .card .description p {
color: #999;
}
@media screen and (max-width: 1024px) {
#daftar-pesanan section ul li .card .description p {
font-size: 10px;
}
}
#daftar-pesanan section ul li .card .description hr {
border: none;
border-bottom: 1px solid #eee;
margin: 5px 0;
}
#daftar-pesanan section ul li .card .description input {
padding: 4px;
border: none;
color: #888;
font-weight: lighter;
box-shadow: 0 0 1px 0 #666;
width: 100%;
font-size: 12px;
display: block;
}
#daftar-pesanan section ul li .card .description button {
margin-right: 5px;
padding: 3px 10px;
background: #eee;
color: #777;
border: 1px solid #ccc;
}
#daftar-pesanan section ul li .card .description button:hover, #daftar-pesanan section ul li .card .description button:focus {
background: #37BDB2;
color: #fff;
border: none;
box-shadow: 0 1px 5px 0 #ccc;
}
@media screen and (max-width: 1024px) {
#daftar-pesanan section ul li .card .description button {
padding: 3px 5px;
font-size: 12px;
}
}
@media screen and (max-width: 773px) {
.column {
height: auto;
padding-top: 76px;
box-shadow: none;
}
.column.four {
width: 100%;
}
header {
display: none;
}
section {
overflow: visible;
}
#daftar-pesanan,
#menu,
#pemesanan {
display: none;
}
#daftar-pesanan.show,
#menu.show,
#pemesanan.show {
display: block;
}
#bar {
background: #fff;
display: block;
top: 0;
left: 0;
right: 0;
z-index: 2;
padding: 10px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
padding-bottom: 8px;
position: fixed;
}
#bar::after {
clear: both;
content: "";
display: table;
}
#bar button {
border: none;
background: transparent;
display: inline-block;
font-size: 45px;
color: #555;
position: relative;
padding: 4px 10px;
margin-right: 15px;
border-radius: 6px;
float: left;
}
#bar button:focus {
background: #f8f8f8;
}
#bar h2.title {
margin-left: 20px;
font-size: 20px;
color: #777;
text-transform: uppercase;
position: relative;
display: inline-block;
float: left;
text-align: center;
margin-top: 13px;
}
.overlay.open {
background: #333;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.5;
z-index: 2;
}
#slide {
display: block;
position: fixed;
z-index: 2000;
background: #fff;
top: 0;
bottom: 0;
left: 0;
width: 85%;
-webkit-transform: translateX(-110%);
transform: translateX(-110%);
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
box-shadow: 0 0 10px 1px #555;
}
#slide.open {
box-shadow: none;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
#slide button {
width: 20%;
display: block;
font-size: 40px;
padding: 10px;
border: none;
background: transparent;
}
#slide button:focus {
color: #37BDB2;
background: #eee;
}
#slide ul {
list-style-type: none;
}
#slide ul li {
display: block;
}
#slide ul li:first-child a {
border-top: 1px solid #eee;
}
#slide ul li a {
padding: 25px;
padding-left: 50px;
display: block;
text-decoration: none;
color: #555;
font-size: 20px;
}
#slide ul li a:focus, #slide ul li a:hover {
background: #37BDB2;
color: #fff;
}
#slide ul li a i {
font-size: 25px;
margin-right: 20px;
}
#pemesanan section {
padding: 30px 50px;
}
#pemesanan section .card {
padding: 60pxk 40px;
}
#pemesanan section .card h3 {
font-size: 35px;
}
#pemesanan section .card p {
font-size: 20px;
}
#pemesanan section .card .ion-pizza {
font-size: 80px;
}
#pemesanan section .card .form {
padding: 10px 30px;
}
#pemesanan section .card input {
margin: 40px 0;
font-size: 20px;
padding: 10px 10px;
color: #999;
}
#pemesanan section .card button#add {
margin-top: 20px;
font-size: 20px;
}
#menu ul li div.desc {
width: 85%;
}
#daftar-pesanan section h3 {
padding: 20px;
font-size: 20px;
}
#daftar-pesanan section ul li {
padding: 10px 20px;
}
#daftar-pesanan section ul li.edit .card {
max-height: 200px;
}
#daftar-pesanan section ul li .card {
height: 200px;
max-height: 200px;
}
#daftar-pesanan section ul li .card .image {
width: 35%;
}
#daftar-pesanan section ul li .card .image img {
width: 140%;
}
#daftar-pesanan section ul li .card .description {
width: 64%;
}
#daftar-pesanan section ul li .card .description h4 {
font-size: 25px;
}
#daftar-pesanan section ul li .card .description p {
font-size: 20px;
}
#daftar-pesanan section ul li .card .description input {
padding: 10px;
font-size: 15px;
}
#daftar-pesanan section ul li .card .description button {
font-size: 16px;
padding: 6px 10px;
}
}
@media screen and (max-width: 480px) {
#bar::after {
clear: both;
content: "";
display: table;
}
#bar button {
display: inline-block;
font-size: 30px;
color: #555;
position: relative;
padding: 4px 10px;
margin-right: 15px;
border-radius: 6px;
float: left;
}
#bar button:focus {
background: #f8f8f8;
}
#bar h2.title {
margin-left: 15px;
font-size: 18px;
color: #777;
text-transform: uppercase;
position: relative;
display: inline-block;
float: left;
text-align: center;
margin-top: 9px;
}
#slide button {
font-size: 30px;
padding-left: 20px;
padding-right: 20px;
}
#slide ul li a {
padding: 16px;
padding-left: 40px;
font-size: 20px;
}
#slide ul li a i {
font-size: 20px;
margin-right: 20px;
}
.column {
padding-top: 60px;
}
#pemesanan section {
padding: 10px;
}
#pemesanan section .card {
padding: 30px 20px;
}
#pemesanan section .card h3 {
font-size: 16px;
}
#pemesanan section .card .ion-pizza {
font-size: 30px;
}
#pemesanan section .card p {
font-size: 12px;
}
#pemesanan section .card div.form {
padding: 2px 5px;
}
#pemesanan section .card div.form input {
margin-top: 10px;
margin-bottom: 30px;
font-size: 12px;
}
#pemesanan section .card div.form button#add {
font-size: 12px;
}
#menu ul li div.desc {
width: 75%;
}
#daftar-pesanan section h3 {
font-size: 15px;
padding: 10px;
}
#daftar-pesanan section ul li {
padding: 4px;
padding-top: 0;
}
#daftar-pesanan section ul li .card {
margin: 0;
max-height: 120px;
}
#daftar-pesanan section ul li .card .description input {
margin: 3px 0;
}
#daftar-pesanan section ul li .card .description h4 {
font-size: 18px;
}
#daftar-pesanan section ul li .card .description p {
font-size: 15px;
}
#daftar-pesanan section ul li .card .description button {
padding: 2px 4px;
}
}
@media screen and (max-width: 360px) {
#daftar-pesanan section ul li .card .description h4 {
font-size: 14px;
}
#daftar-pesanan section ul li .card .description h4 span {
display: block;
}
#daftar-pesanan section ul li .card .description p {
font-size: 12px;
}
}
@media screen and (max-width: 320px) {
#bar::after {
clear: both;
content: "";
display: table;
}
#bar button {
display: inline-block;
font-size: 30px;
color: #555;
position: relative;
padding: 4px 10px;
margin-right: 15px;
border-radius: 6px;
float: left;
}
#bar button:focus {
background: #f8f8f8;
}
#bar h2.title {
margin-left: 15px;
font-size: 18px;
color: #777;
text-transform: uppercase;
position: relative;
display: inline-block;
float: left;
text-align: center;
margin-top: 9px;
}
#slide button {
font-size: 30px;
padding-left: 20px;
padding-right: 20px;
}
#slide ul li a {
padding: 10px;
padding-left: 40px;
font-size: 15px;
}
#slide ul li a i {
font-size: 20px;
margin-right: 20px;
}
.column {
padding-top: 60px;
}
#pemesanan section {
padding: 10px;
}
#pemesanan section .card {
padding: 30px 20px;
}
#pemesanan section .card h3 {
font-size: 16px;
}
#pemesanan section .card .ion-pizza {
font-size: 30px;
}
#pemesanan section .card p {
font-size: 12px;
}
#pemesanan section .card div.form {
padding: 2px 5px;
}
#pemesanan section .card div.form input {
margin-top: 10px;
margin-bottom: 30px;
font-size: 12px;
}
#pemesanan section .card div.form button#add {
font-size: 12px;
}
#menu ul li div.desc {
width: 75%;
}
#daftar-pesanan section h3 {
font-size: 15px;
padding: 10px;
}
#daftar-pesanan section ul li {
padding: 10px;
padding-top: 0;
}
#daftar-pesanan section ul li.edit .card {
max-height: none;
}
#daftar-pesanan section ul li .card {
-webkit-transition: all .3s ease;
transition: all .3s ease;
box-shadow: 0 1px 4px 0 #ccc;
margin: 0;
height: auto;
max-height: none;
border-radius: 0;
}
#daftar-pesanan section ul li .card .image {
width: 100%;
height: 150px;
}
#daftar-pesanan section ul li .card .image img {
width: 100%;
}
#daftar-pesanan section ul li .card .description {
width: 100%;
}
#daftar-pesanan section ul li .card .description input {
margin: 3px 0;
}
#daftar-pesanan section ul li .card .description h4 {
font-size: 18px;
}
#daftar-pesanan section ul li .card .description p {
font-size: 15px;
}
#daftar-pesanan section ul li .card .description button {
padding: 2px 4px;
}
}
</style></head><body>
<body onresize="getSize()">
<nav id="bar">
<button id="btn-menu">
<i class="icon ion-navicon-round"></i>
</button>
<h2 class="title">Warteg Online</h2>
</nav>
<div id="slide">
<button id="btn-menu-close"><i class="icon ion-android-arrow-back"></i></button>
<ul>
<li><a href="#pemesanan"><i class="icon ion-coffee"></i>Pesan Makanan</a></li>
<li><a href="#menu"><i class="icon ion-android-restaurant"></i>Menu Makanan</a></li>
<li><a href="#daftar-pesanan"><i class="icon ion-android-done-all"></i>Antrian Pesanan</a></li>
<li><a href="#about"><i class="icon ion-person"></i>About Us</a></li>
<li><a href=""><i class="icon ion-ios-telephone"></i>Contact Us</a></li>
</ul>
</div>
<div class="container">
<div class="column four" id="daftar-pesanan">
<header>
<h2><i class="icon ion-clipboard"></i>DAFTAR PESANAN</h2>
<p>Anda lapar? Pesan sekarang juga kami akan mengantarkannya ke meja anda dalam waktu kurang dari 10 Menit</p>
</header>
<section>
<h3>Daftar Antrian Menunggu</h3>
<ul id="list-pesanan-menunggu">
</ul>
</section>
</div>
<div class="column four" id="pemesanan">
<header>
<h2><i class="icon ion-android-boat"></i>PESAN SEKARANG!</h2>
<p>Kami menerima antar jemput makanan 24 Jam. Kami juga menerima pesanan untuk kebutuhan skala besar </p>
</header>
<section>
<div class="card">
<h3>Form Pemesanan</h3>
<p>Masukan Pesanan Anda Di Form Bawah Ini!</p>
<i class="icon ion-pizza"></i>
<div class="form">
<input type="text" onkeypress="enterPressTambah(event)" id="input-nama" placeholder="Masukan Nama Anda">
<input list="makanan" onkeypress="enterPressTambah(event)" id="input-makanan" placeholder="Masukan Makanan Pesanan Anda">
<datalist id="makanan">
</datalist>
<button id="add">PESAN MAKANAN +</button>
</div>
</div>
<div class="card">
<p>Jika Anda Melakukan Kesalahan Ketika Menginput Pesanan, Harap Segera Perbaiki Di Bilik Kiri Website Ini, Dengan Menekan Tombol Edit </p>
</div>
</section>
</div>
<div class="column four" id="menu">
<header>
<ul>
<li><a href=""><i class="icon ion-social-facebook"></i></a></li>
<li><a href=""><i class="icon ion-social-twitter"></i></a></li>
<li><a href=""><i class="icon ion-social-codepen"></i></a></li>
<li>
<button id="hireme">Hire Me!</button>
</li>
</ul>
</header>
<section>
<h3>
<i class="icon ion-fork"></i>
MAKANAN
</h3>
<ul id="list-makanan">
</ul>
<h3>
<i class="icon ion-beer"></i>
MINUMAN
</h3>
<ul id="list-minuman">
</ul>
</section>
</div>
</div>
<!-- container -->
<!-- Template Engine - Mustache JS -->
<template type="text/template" id="templateMenu">
<li>
<button data-value="{{nama}}" class="btn-add-menu">
<i class="icon ion-ios-plus-empty"></i>
</button>
<div class="desc">
<span>{{nama}}</span>
<span class="price">Rp {{harga}}</span>
</div>
</li>
</template>
<template type="text/template" id="datalist-option-makan">
<option value="{{nama}}"></option>
</template>
<template type="text/template" id="list-pesanan">
<li data-id="{{id_pesan}}">
<div class="card">
<div class="image">
<img src="img/photo(10).jpg" alt="">
</div>
<div class="description">
<h4>
Makanan :
<span class="nama-makanan noedit">{{pesanan}}
</span>
<input type="text" class="nama-makanan edit">
</h4>
<p>
Nama Pemesan :
<span class="nama-pemesan noedit">{{nama_pemesan}}</span>
<input type="text" class="nama-pemesan edit">
</p>
<hr>
<button class="btn-delete"><i class="icon ion-close-round"></i></button>
<button class="btn-save edit">SAVE</button>
<button class="btn-edit noedit">EDIT</button>
<button class="btn-cancel edit">CANCEL</button>
</div>
</div>
</li>
</template>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js'></script>
<script >// Config
host = "pusatdata.tk";
$btnAdd = $("button#add");
page = "#pemesanan";
title = "PESAN MAKANAN";
// Header Setup Equal Height
// config layout header
$("#bar").after("<div class='overlay'></div>");
var templateMenu = $("#templateMenu").html();
var templateOptionMakan = $("#datalist-option-makan").html();
var listPesanan = $("#list-pesanan").html();
function getSize() {
$header1 = $("#daftar-pesanan").find("header");
console.log($header1.innerHeight());
}
var meta = [
'<meta name="description" content="lorem ipsum dolor sit amet">',
'<meta name="keyword" content="a,b,c,d,ef,g">',
'<meta name="author" content="Deni Pratama">',
'<meta name="image" content="aa.jpg">'
];
metaTag(meta);
function metaTag() {
$title = $("head title");
for (var i = 0; i <= meta.length; i++) {if (window.CP.shouldStopExecution(1)){break;}
$title.before(meta[i]);
}
window.CP.exitedLoop(1);
}
var headerEqual = function() {
$header1 = $("#daftar-pesanan").find("header");
$header2 = $("#pemesanan").find("header");
$header3 = $("#menu").find("header");
var hh1 = $header1.innerHeight();
var hh2 = $header2.innerHeight();
var hh3 = $header3.innerHeight();
if (hh1 > hh2 && hh1 > hh3) {
$header2.innerHeight(hh1);
$header3.innerHeight(hh1);
console.log("h1 large");
} else if (hh2 > hh1 && hh2 > hh3) {
$header1.innerHeight(hh2);
$header3.innerHeight(hh2);
console.log("h2 large");
} else if (hh3 > hh1 && hh3 > hh2) {
$header1.innerHeight(hh3);
$header2.innerHeight(hh3);
console.log("h3 large");
}
};
headerEqual();
// Closing Header Setup Equal Height
// ******************************************************************
// ===================================================================
// ROUTING MENU
// ===================================================================
// Routing Menu Url
var route = function(page) {
if (page == "#pemesanan") {
$("body").scrollTop(0);
$("#pemesanan").addClass("show");
$("#menu").removeClass("show");
$("#daftar-pesanan").removeClass("show");
$("nav#bar h2.title").html(title);
} else if (page == "#menu") {
$("#pemesanan").removeClass("show");
$("#menu").addClass("show");
$("#daftar-pesanan").removeClass("show");
$("nav#bar h2.title").html("MENU MAKANAN");
} else if (page == "#daftar-pesanan") {
$("#pemesanan").removeClass("show");
$("#menu").removeClass("show");
$("#daftar-pesanan").addClass("show");
$("nav#bar h2.title").html("ANTRIAN MAKANAN");
}
};
// Closing Routing Menu Url
route(page);
// ******************************************************************
// ===================================================================
// MENU UX SLIDE/SIDE TOGGLE
// ===================================================================
// Toggle Side Menu
$("#btn-menu").click(function() {
$("div.overlay").toggleClass("open");
$("#slide").toggleClass("open");
$("nav").toggleClass("open");
$("body").css({
"overflow": "hidden"
});
});
// Closing Toggle Side Menu
// Toggle Side Menu Close
$("#btn-menu-close").click(function() {
$("div.overlay").toggleClass("open");
$("#slide").toggleClass("open");
$("body").css({
"overflow": "scroll"
});
});
// Toggle Side Menu Close
// Overlay Menu
$("div.overlay").click(function() {
$("div.overlay").toggleClass("open");
$("#slide").toggleClass("open");
$("body").css({
"overflow": "scroll"
});
});
// Closing Overlay Menu
// Menu Anchor Hyperlink Click
$("#slide ul li a").click(function(event) {
$("body").css({
"overflow": "scroll"
});
$("div.overlay").removeClass("open");
$("#slide").removeClass("open");
var page = this.hash;
route(page);
});
// Closing Menu Anchor Hyperlink Click
// ******************************************************************
// ===================================================================
// MUSTACHE TEMPLATE ENGINE
// ===================================================================
// Mustache Add Template
var add = function(data) {
$("#list-pesanan-menunggu").prepend(Mustache.render(listPesanan, data));
};
// Closing Mustache Add Template
// *******************************************************************
// AJAX GET MENU
$.ajax({
url: "http://pusatdata.tk/assets/json/menu.json",
type: "GET",
beforeSend: function() {
$("#list-makanan").append("<div class='loading'><p>Loading...</p></div>");
$("#list-minuman").append("<div class='loading'><p>Loading...</p></div>");
},
success: function($data) {
$("#list-makanan div.loading").remove();
$("#list-minuman div.loading").remove();
var makanan = $data.menu.makanan;
var minuman = $data.menu.minuman;
$.each(makanan, function(i, makan) {
$("#list-makanan").append(Mustache.render(templateMenu, makan));
$("datalist#makanan").append(Mustache.render(templateOptionMakan, makan));
});
$.each(minuman, function(i, minum) {
$("#list-minuman").append(Mustache.render(templateMenu, minum));
$("datalist#makanan").append(Mustache.render(templateOptionMakan, minum));
});
}
});
// Closing AJAX GET MENU
// GET AJAX REQUEST
$.ajax({
url: 'http://' + host + '/api/pesan',
type: 'GET',
beforeSend: function() {
$("#list-pesanan-menunggu").prepend("<div class='loading'><p>Loading...</p></div>");
},
success: function($data) {
$.each($data, function(i, list) {
$(".loading").remove();
add(list);
});
}
});
// Closing GET AJAX
// POST REQUEST AJAX
var Post = function($data) {
$.ajax({
url: 'http://' + host + '/api/pesan',
type: 'POST',
data: JSON.stringify($data),
crossDomain : true,
beforeSend: function() {
$("#list-pesanan-menunggu").prepend("<div class='loading'><p>Loading...</p></div>");
NProgress.start();
},
success: function(data) {
NProgress.done();
add(data[0]);
$("div.loading").remove();
$("#pemesanan").removeClass("show");
$("#daftar-pesanan").addClass("show");
}
}); // ajax post
};
// Closing POST REQUEST AJAX
// Button Add Click binding AJAX POST^ REQUEST
function getFormInput() {
var PesanObj = {};
if ($("#input-makanan").val() === "" && $("#input-nama").val() === "") {
alert("Harap Masukan Keseluruhan Formulir!");
} else if ($("#input-makanan").val() === "") {
alert("Masukan Makanan!");
} else if ($("#input-nama").val() === "") {
alert("Masukan Nama!");
} else {
PesanObj = {
pesanan: $("#input-makanan").val(),
nama_pemesan: $("#input-nama").val()
};
Post(PesanObj);
}
$("#input-makanan").val("");
$("#input-nama").val("");
}
$btnAdd.click(function() {
getFormInput();
});
// Closing Button Add Click binding AJAX POST^ REQUEST
// Button UPDATE AJAX REQUEST
$("#list-pesanan-menunggu").delegate(".btn-save", "click", function() {
$li = $(this).closest("li");
var c = confirm("Apakah anda yakin untuk mengubah?");
if (c === true) {
var dataid = $li.attr("data-id");
var updateObj = {
pesanan: $li.find("input.nama-makanan").val(),
nama_pemesan: $li.find("input.nama-pemesan").val()
};
$.ajax({
url: "http://" + host + "/api/pesan/" + dataid,
type: "PUT",
data: JSON.stringify(updateObj),
beforeSend: function() {
NProgress.start();
},
success: function() {
NProgress.done();
$li.find("span.nama-makanan").html(updateObj.pesanan);
$li.find("span.nama-pemesan").html(updateObj.nama_pemesan);
}
}); // AJAX PUT/UPDATE
} // if
else {
alert("Membatalkan Perubahan");
}
$li.removeClass("edit");
});
// Closing UPDATE AJAX REQUEST
// Button DELETE AJAX REQUEST
$("#list-pesanan-menunggu").delegate(".btn-delete", "click", function() {
$li = $(this).closest("li");
$dataid = $li.attr("data-id");
var c = confirm("Yakin Ingin Menghapus?");
if (c === true) {
$.ajax({
url: "http://" + host + "/api/pesan/" + $dataid,
type: "DELETE",
jsonp: "callback",
dataType: "jsonp",
crossDomain : true,
success: function() {
$li.fadeOut(300, function() {
$li.remove();
});
}
}); // ajax
} else {
alert("Penghapusan dibatalkan!");
}
});
// Closing DELETE AJAX REQUEST
// Button Edit
$("#list-pesanan-menunggu").delegate(".btn-edit", "click", function() {
$li = $(this).closest("li");
$li.addClass("edit");
$li.find("input.nama-makanan").val($li.find("span.nama-makanan").html());
$li.find("input.nama-pemesan").val($li.find("span.nama-pemesan").html());
});
// Closing Button Edit
// Button Cancel
$("#list-pesanan-menunggu").delegate(".btn-cancel", "click", function() {
$li = $(this).closest("li");
$li.removeClass("edit");
});
// Closing Button Cancel
// Add list makanan to form
$("#list-makanan").add("#list-minuman").delegate(".btn-add-menu", "click", function() {
var val = $(this).attr("data-value");
var c = confirm("Yakin Ingin Ingin Menambahkan \"" + val + "\" ke Form Pemesanan?");
if (c === true) {
$(this).html("<i class='icon ion-checkmark-round'></i>");
$("#input-makanan").val(val);
alert("Sudah ditambahkan ke Form Pemesanan");
$("#pemesanan").addClass("show");
$("#menu").removeClass("show");
$("#daftar-pesanan").removeClass("show");
$("#input-makanan").focus();
}
$(this).html("<i class='icon ion-ios-plus-empty'></i>");
});
// Closing Add list makanan to form
// Button Hireme Go to https://mbahgoez.github.io
$("#hireme").on("click", function() {
window.open("https://mbahgoez.github.io");
});
// Closing Button Hireme Go to https://mbahgoez.github.io
function enterPressTambah(event) {
if (event.which == 13) {
getFormInput();
}
}
//# sourceURL=pen.js
</script>
</body></html>
