653 lines
39 KiB
HTML
653 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Yummy Everywhere</title>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
|
|
<link href="css/style.css" type="text/css" rel="stylesheet" />
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
|
|
<script src="js/materialize.js"></script>
|
|
<script src="js/init.js"></script>
|
|
</head>
|
|
<script>
|
|
$(document).ready(function(){
|
|
var time=4;
|
|
$('.timepicker').timepicker({
|
|
container: 'body',
|
|
});
|
|
$("#foodSearch").keyup(function() {
|
|
foodText = $("#foodSearch").val();
|
|
$(".searchOPRest").hide().filter(":contains('" + foodText + "')").show();
|
|
});
|
|
$.getJSON("jsonDB/restaurants.json",function(obj){
|
|
|
|
$.each(obj.restaurants, function(index, name){
|
|
if(name.user == sessionStorage.getItem("username")){
|
|
$("#restaurantMenu").append("<a href='menu/foodRestaurant"+name.id+".html'><div class='col s12 m3 searchOPRest' id='"+name.id+"'><div class='card'><div class='card-image waves-effect waves-block waves-light'><img class='activator' src='"+name.image+"'></div><div class='card-content'><span class='card-title activator grey-text text-darken-4'>"+name.name+"</span><a class='dropdown-trigger' href='#' data-target='dropdown"+name.id+"'><p>Modify</p></a></div><ul id='dropdown"+name.id+"' class='dropdown-content'><li><a href='#createRest' class='restEdit modal-trigger' id='"+name.id+"'>Edit</a></li><li><a href='#warningModal' class='red-text restDel'>Delete</a></li></ul></div></div></div></a>");
|
|
}
|
|
});
|
|
$("#operatorRestaurant").append("<div class='col s12 m3' id='addRest'><a href='#createRest' class='modal-trigger'><div class='card'><div class='card-image waves-effect waves-block waves-light'><img class='activator' src='images/office.jpg'></div><div class='card-content'><span class='card-title activator grey-text text-darken-4 flow-text'>Add Restaurant</span></div></div></a></div>");
|
|
$("#addRest").css("opacity", "0.3");
|
|
|
|
$("#addRest").mouseover(function(){
|
|
$(this).animate({opacity: "0.8"});
|
|
});
|
|
$("#addRest").mouseleave(function(){
|
|
$(this).animate({opacity: "0.3"});
|
|
});
|
|
$('.dropdown-trigger').dropdown();
|
|
|
|
$("#addRest").click(function(){
|
|
$("#btnMenuSave").html("Create");
|
|
$("#menuAlert").html("");
|
|
$("#stepOneAlert").html("");
|
|
$("#menuCatAlert").html("");
|
|
$("#secondStep").removeClass("red-text");
|
|
$("#firstStep").removeClass("red-text");
|
|
$("#stepThrid").removeClass("red-text");
|
|
$("#createRestaurantName").val("");
|
|
$("#createRestaureantTel").val("");
|
|
$("#createRestaureantAdde").val("");
|
|
$("#createRestaurantSelect").val("");
|
|
$("#createRestaureantOPTime").val("");
|
|
$("#createRestaureantCLTime").val("");
|
|
$("#restChips").html("");
|
|
$("#catalogTable").html("<tr><th>Catalog Name</th><th>All Day</th><th>Start Time</th><th>Close Time</th><th>Hidden</th><th>Action</th></tr>");
|
|
$("#resturantMenu").html("<tr><th>Food Name</th><th>Catalog</th><th>Price</th><th>Display</th><th>Action</th></tr>");
|
|
$('.chips-placeholder').chips({
|
|
placeholder: 'The Food tag',
|
|
secondaryPlaceholder: '+Tag',
|
|
});
|
|
});
|
|
|
|
$(".restDel").click(function(){
|
|
var restDel = $(this).parents(".col");
|
|
$(this).addClass("modal-trigger");
|
|
$("#wraningAlert").html('Do you want to delete " '+$(this).parents(".card-content").children().first().text()+' ", you cannot recovery deleted menu.');
|
|
$("#closeMenu").click(function(){
|
|
restDel.hide();
|
|
});
|
|
});
|
|
$(".restEdit").click(function(){
|
|
var key = $(this).attr("id");
|
|
$("#btnMenuSave").html("SAVE");
|
|
if(key==1){
|
|
$("#menuAlert").html("");
|
|
$("#stepOneAlert").html("");
|
|
$("#menuCatAlert").html("");
|
|
$("#secondStep").removeClass("red-text");
|
|
$("#firstStep").removeClass("red-text");
|
|
$("#stepThrid").removeClass("red-text");
|
|
$("label").addClass("active");
|
|
$("#createRestaurantName").val("ABC Chicken");
|
|
$("#createRestaureantTel").val("21800000");
|
|
$("#createRestaureantAdde").val("Shop 225, 2/F, East Point City, 8 Chung Wa Road, Kowloon, Hong Kong");
|
|
$("#createRestaureantOPTime").val("12:30 PM");
|
|
$("#createRestaureantCLTime").val("9:00 PM");
|
|
$("#catalogTable").html("<tr><th>Catalog Name</th><th>All Day</th><th>Start Time</th><th>Close Time</th><th>Hidden</th><th>Action</th></tr>");
|
|
$("#resturantMenu").html("<tr><th>Food Name</th><th>Catalog</th><th>Price</th><th>Display</th><th>Action</th></tr>");
|
|
$("restChips").html("<div class='chip' tabindex='0'>Noodles<i class='material-icons close'>close</i></div><div class='chip' tabindex='0'>Koeran<i class='material-icons close'>close</i></div><div class='chip' tabindex='0'>Rice<i class='material-icons close'>close</i></div>");
|
|
$("#catalogTable").append("<tr><td>Fired Chicken</td><td>All Day</td><td>NA</td><td>NA</td><td>false</td><td><a class='btn-floating btn-small waves-effect waves-light red btnCataDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnCataChange'><i class='material-icons'>repeat</i></a></td></tr><tr><td>Single order</td><td>All Day</td><td>NA</td><td>NA</td><td>true</td><td><a class='btn-floating btn-small waves-effect waves-light red btnCataDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnCataChange'><i class='material-icons'>repeat</i></a></td></tr> <tr><td>Other</td><td>All Day</td><td>NA</td><td>NA</td><td>false</td><td><a class='btn-floating btn-small waves-effect waves-light red btnCataDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnCataChange'><i class='material-icons'>repeat</i></a></td></tr>");
|
|
$("#resturantMenu").append("<tr><td>Crispy Fried Chicken</td><td>Fired Chicken</td><td>150.0</td><td class='menuDisplay'>true</td><td><a class='btn-floating btn-small waves-effect waves-light red btnMenuDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnMenuChange'><i class='material-icons'>repeat</i></a></td></tr><tr><td>Creamy Fried Chicken</td><td>Fired Chicken</td><td>166.0</td><td class='menuDisplay'>true</td><td><a class='btn-floating btn-small waves-effect waves-light red btnMenuDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnMenuChange'><i class='material-icons'>repeat</i></a></td></tr><tr><td>Fried Shrimp Rice Roll</td><td>Single order</td><td>88.0</td><td class='menuDisplay'>false</td><td><a class='btn-floating btn-small waves-effect waves-light red btnMenuDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnMenuChange'><i class='material-icons'>repeat</i></a></td></tr><tr><td>Kimchi Rice</td><td>Other</td><td>98.0</td> <td class='menuDisplay'>true</td><td><a class='btn-floating btn-small waves-effect waves-light red btnMenuDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnMenuChange'><i class='material-icons'>repeat</i></a></td></tr>");
|
|
$("#stepThrid").removeClass("red-text");
|
|
$("#restChips").html("<div class='chip' tabindex='0'>Noodles<i class='material-icons close'>close</i></div><div class='chip' tabindex='0'>Koeran<i class='material-icons close'>close</i></div><div class='chip' tabindex='0'>Rice<i class='material-icons close'>close</i></div>");
|
|
}else if(key==2){
|
|
$("#menuAlert").html("");
|
|
$("#stepOneAlert").html("");
|
|
$("#menuCatAlert").html("");
|
|
$("#secondStep").removeClass("red-text");
|
|
$("#firstStep").removeClass("red-text");
|
|
$("#stepThrid").removeClass("red-text");
|
|
$("label").addClass("active");
|
|
$("#createRestaurantName").val("NeNE Chicken");
|
|
$("#createRestaureantTel").val("31800000");
|
|
$("#createRestaureantAdde").text("Shop 125, 3/F, Point City, 8 Tsim Sha Tsui Road, Tsim Sha Tsui, Hong Kong");
|
|
$("#createRestaurantSelect").val("Hong Kong");
|
|
$("#createRestaureantOPTime").val("12:30 PM");
|
|
$("#createRestaureantCLTime").val("8:00 PM");
|
|
$("#catalogTable").html("<tr><th>Catalog Name</th><th>All Day</th><th>Start Time</th><th>Close Time</th><th>Hidden</th><th>Action</th></tr>");
|
|
$("#resturantMenu").html("<tr><th>Food Name</th><th>Catalog</th><th>Price</th><th>Display</th><th>Action</th></tr>");
|
|
$("restChips").html("<div class='chip' tabindex='0'>Noodles<i class='material-icons close'>close</i></div><div class='chip' tabindex='0'>Koeran<i class='material-icons close'>close</i></div><div class='chip' tabindex='0'>Rice<i class='material-icons close'>close</i></div>");
|
|
$("#catalogTable").append("<tr><td>Fired Chicken</td><td>All Day</td><td>NA</td><td>NA</td><td>false</td><td><a class='btn-floating btn-small waves-effect waves-light red btnCataDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnCataChange'><i class='material-icons'>repeat</i></a></td></tr><tr><td>Single order</td><td>All Day</td><td>NA</td><td>NA</td><td>true</td><td><a class='btn-floating btn-small waves-effect waves-light red btnCataDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnCataChange'><i class='material-icons'>repeat</i></a></td></tr> <tr><td>Other</td><td>All Day</td><td>NA</td><td>NA</td><td>false</td><td><a class='btn-floating btn-small waves-effect waves-light red btnCataDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnCataChange'><i class='material-icons'>repeat</i></a></td></tr>");
|
|
$("#resturantMenu").append("<tr><td>Crispy Fried Chicken</td><td>Fired Chicken</td><td>150.0</td><td class='menuDisplay'>true</td><td><a class='btn-floating btn-small waves-effect waves-light red btnMenuDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnMenuChange'><i class='material-icons'>repeat</i></a></td></tr><tr><td>Creamy Fried Chicken</td><td>Fired Chicken</td><td>166.0</td><td class='menuDisplay'>true</td><td><a class='btn-floating btn-small waves-effect waves-light red btnMenuDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnMenuChange'><i class='material-icons'>repeat</i></a></td></tr><tr><td>Fried Shrimp Rice Roll</td><td>Single order</td><td>88.0</td><td class='menuDisplay'>false</td><td><a class='btn-floating btn-small waves-effect waves-light red btnMenuDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnMenuChange'><i class='material-icons'>repeat</i></a></td></tr><tr><td>Kimchi Rice</td><td>Other</td><td>98.0</td> <td class='menuDisplay'>true</td><td><a class='btn-floating btn-small waves-effect waves-light red btnMenuDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnMenuChange'><i class='material-icons'>repeat</i></a></td></tr>");
|
|
$("#stepThrid").removeClass("red-text");
|
|
$("#restChips").html("<div class='chip' tabindex='0'>Noodles<i class='material-icons close'>close</i></div><div class='chip' tabindex='0'>Koeran<i class='material-icons close'>close</i></div><div class='chip' tabindex='0'>Rice<i class='material-icons close'>close</i></div>");
|
|
}
|
|
|
|
//btnSave();
|
|
$("#btnMenuSave").click(function(){
|
|
var name = $("#createRestaurantName").val();
|
|
var tel = $("#createRestaureantTel").val();
|
|
var address = $("#createRestaureantAdde").val();
|
|
var opTime = $("#createRestaureantOPTime").val();
|
|
var clTime = $("#createRestaureantCLTime").val();
|
|
var btnMenuSave = $("#btnMenuSave").text();
|
|
$("#menuMissing").html("");
|
|
var valid = true;
|
|
if(name==""){
|
|
$("#menuMissing").append("Section 1: Restaurant name<br>");
|
|
valid=false;
|
|
}
|
|
if(tel==""){
|
|
$("#menuMissing").append("Section 1: Restaurant Telphone<br>");
|
|
}
|
|
if(address==""){
|
|
$("#menuMissing").append("Section 1: Restaurant Address<br>");
|
|
valid=false;
|
|
}
|
|
|
|
if(clTime==""||opTime==""){
|
|
$("#menuMissing").append("Section 1: Restaurant Open and close time<br>");
|
|
valid=false;
|
|
}
|
|
if(address=="" || tel=="" || name=="" || clTime==""||opTime==""){
|
|
$("#firstStep").addClass("red-text");
|
|
}
|
|
if($("#catalogTable tr").length<2){
|
|
$("#menuMissing").append("Section 2: The Restaurant catalog<br>");
|
|
valid=false;
|
|
$("#secondStep").addClass("red-text");
|
|
}
|
|
if($("#resturantMenu tr").length<2){
|
|
$("#menuMissing").append("Section 3: The Restaurant food<br>");
|
|
valid=false;
|
|
$("#stepThrid").addClass("red-text");
|
|
}
|
|
if( $("#menuMissing").text()!="Saved"){
|
|
$("#alertClose").click(function(){
|
|
$("#alert").modal("close");
|
|
$("#createRest").modal("open");
|
|
});
|
|
}
|
|
if(valid && btnMenuSave=="Create"){
|
|
var restName = $("#createRestaurantName").val();
|
|
$("#restaurantMenu").append("<a href='#'><div class='col s12 m3 searchOPRest'><div class='card'><div class='card-image waves-effect waves-block waves-light'><img class='activator' src='images/default.jpg'></div><div class='card-content'><span class='card-title activator grey-text text-darken-4'>"+restName+"</span><a class='dropdown-trigger' href='#' data-target='dropdown"+time+"'><p>Modify</p></a></div><ul id='dropdown"+time+"' class='dropdown-content'><li><a href='#createRest' class='restEdit modal-trigger' id='"+time+"'>Edit</a></li><li><a href='#warningModal' class='red-text restDel'>Delete</a></li></ul></div></div></div></a>");
|
|
time++;
|
|
$('.dropdown-trigger').dropdown();
|
|
$("#menuAlert").html("");
|
|
$("#menuMissing").siblings().html("System Message:");
|
|
$("#menuMissing").html("<h5>Saved</h5>");
|
|
$("#stepOneAlert").html("");
|
|
$("#menuCatAlert").html("");
|
|
$("#secondStep").removeClass("red-text");
|
|
$("#firstStep").removeClass("red-text");
|
|
$("#stepThrid").removeClass("red-text");
|
|
$("#createRestaurantName").val("");
|
|
$("#createRestaureantTel").val("");
|
|
$("#createRestaureantAdde").val("");
|
|
$("#createRestaurantSelect").val("");
|
|
$("#createRestaureantOPTime").val("");
|
|
$("#createRestaureantCLTime").val("");
|
|
$("#menuFoodName").val("");
|
|
$("#menuFoodPrice").val("");
|
|
if( $("#menuMissing").text()=="Saved"){
|
|
$("#alertClose").click(function(){
|
|
$('.modal').modal('close');
|
|
});
|
|
}
|
|
$("#menuCatalog").html("<option value='' disabled selected>Choose your catalog</option>");
|
|
$("#catalogTable").html("<tr><th>Catalog Name</th><th>All Day</th><th>Start Time</th><th>Close Time</th><th>Hidden</th><th>Action</th></tr>");
|
|
$("#resturantMenu").html("<tr><th>Food Name</th><th>Catalog</th><th>Price</th><th>Display</th><th>Action</th></tr>");
|
|
$(".restDel").click(function(){
|
|
var restDel = $(this).parents(".col");
|
|
$(this).addClass("modal-trigger");
|
|
$("#wraningAlert").html('Do you want to delete " '+$(this).parents(".card-content").children(".card-title").text()+'", you cannot recovery deleted menu.');
|
|
$("#closeMenu").click(function(){
|
|
restDel.hide();
|
|
});
|
|
});
|
|
}else if(valid && btnMenuSave =="SAVE"){
|
|
$("#menuMissing").siblings().html("System Message:");
|
|
$("#menuMissing").html("<h5>Saved</h5>");
|
|
if( $("#menuMissing").text()=="Saved"){
|
|
$("#alertClose").click(function(){
|
|
$('#createRest').modal('close');
|
|
$("#alert").modal("close");
|
|
});
|
|
}
|
|
}
|
|
$('.chips-placeholder').chips({
|
|
placeholder: 'The Food tag',
|
|
secondaryPlaceholder: '+Tag',
|
|
});
|
|
|
|
});
|
|
$(".btnCataChange").click(function(){
|
|
var disVal = $(this).parents("tr").children("td:eq(4)").html();
|
|
alert(disVal);
|
|
if(disVal=="false"){
|
|
$(this).parents("tr").children("td:eq(4)").html("true") ;
|
|
}else{
|
|
$(this).parents("tr").children("td:eq(4)").html("false") ;
|
|
}
|
|
});
|
|
$(".btnCataDelete").click(function(){
|
|
$(this).parents("tr").remove();
|
|
});
|
|
$(".btnMenuDelete").click(function(){
|
|
$(this).parents("tr").remove();
|
|
});
|
|
$(".btnMenuChange").click(function(){
|
|
var disVal = $(this).parent().siblings(".menuDisplay").html();
|
|
if(disVal=="false"){
|
|
$(this).parent().siblings(".menuDisplay").html("true");
|
|
}else{
|
|
$(this).parent().siblings(".menuDisplay").html("false");
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
$("#menuTime").hide();
|
|
$("#catalogAllDay").change(function(){
|
|
if(!$("#catalogAllDay").prop("checked"))
|
|
$("#menuTime").show();
|
|
else
|
|
$("#menuTime").hide();
|
|
});
|
|
$("#stepThrid").click(function(){
|
|
$("#menuAlert").html("");
|
|
if($("#catalogTable tr").length<2){
|
|
$("#menuAlert").append("<div class='row'><div class='col s12'><div class='card-panel red lighten-1 left' style=' width: 100%; line-height: 0px; text-align: left'><font size='2' class='white-text'>Please input your catalog in Second collection</font></div></div></div>");
|
|
$("#secondStep").addClass("red-text");
|
|
}else {
|
|
$("#secondStep").removeClass("red-text");
|
|
}
|
|
changeMenuVal();
|
|
$.checkRestaurantInf();
|
|
|
|
});
|
|
changeMenuVal=()=>{
|
|
if($("#catalogTable tr").length<2){
|
|
$("#menuCatalog").attr("disabled", true);
|
|
$("#menuFoodName").attr("disabled", true);
|
|
$("#menuFoodPrice").attr("disabled", true);
|
|
$("#menuDisplay").attr("disabled", true);
|
|
$("#btnAddFood").addClass("disabled");
|
|
}else{
|
|
$("#menuCatalog").removeAttr("disabled");
|
|
$("#menuFoodName").removeAttr("disabled");
|
|
$("#menuFoodPrice").removeAttr("disabled");
|
|
$("#menuDisplay").removeAttr("disabled");
|
|
$("#btnAddFood").removeClass("disabled");
|
|
$("#menuCatalog").html("<option value='' disabled selected>Choose your catalog</option>");
|
|
for(var i=1; i<$("#catalogTable tr").length; i++){
|
|
var text = $("#catalogTable tr:eq("+i+")").children('td:eq(0)').text();
|
|
$("#menuCatalog").append("<option value='"+text+"'>"+text+"</option>");
|
|
}
|
|
$('select').formSelect();
|
|
}
|
|
if($("#menuAlert").children().length>0)
|
|
$("#stepThrid").addClass("red-text");
|
|
else
|
|
$("#stepThrid").removeClass("red-text");
|
|
}
|
|
$("#btnAddFood").click(function(){
|
|
$("#menuAlert").html("");
|
|
var menuCatalog = $("#menuCatalog").val();
|
|
var menuFoodName = $("#menuFoodName").val();
|
|
var menuFoodPrice = $("#menuFoodPrice").val();
|
|
var menuDisplay = $("#menuDisplay").prop("checked");
|
|
var valid = false;
|
|
|
|
if($("#catalogTable tr").length<2){
|
|
$("#menuAlert").append("<div class='row'><div class='col s12'><div class='card-panel red lighten-1 left' style=' width: 100%; line-height: 0px; text-align: left'><font size='2' class='white-text'>Please input your catalog in Second collection</font></div></div></div>");
|
|
return 0;
|
|
}
|
|
if(menuFoodName==""){
|
|
$("#menuAlert").append("<div class='row'><div class='col s12'><div class='card-panel red lighten-1 left' style=' width: 100%; line-height: 0px; text-align: left'><font size='2' class='white-text'>Please input the food name</font></div></div></div>");
|
|
valid= true;
|
|
}
|
|
if(menuFoodPrice==""){
|
|
$("#menuAlert").append("<div class='row'><div class='col s12'><div class='card-panel red lighten-1 left' style=' width: 100%; line-height: 0px; text-align: left'><font size='2' class='white-text'>Please input the food Price</font></div></div></div>");
|
|
valid= true;
|
|
}
|
|
if(menuFoodPrice<0){
|
|
$("#menuAlert").append("<div class='row'><div class='col s12'><div class='card-panel red lighten-1 left' style=' width: 100%; line-height: 0px; text-align: left'><font size='2' class='white-text'>The price don't be postive number/font></div></div></div>");
|
|
valid= true;
|
|
}
|
|
if(menuCatalog==null){
|
|
$("#menuAlert").append("<div class='row'><div class='col s12'><div class='card-panel red lighten-1 left' style=' width: 100%; line-height: 0px; text-align: left'><font size='2' class='white-text'>Please Choice catalog</font></div></div></div>"); valid= true;
|
|
}
|
|
$("#menuAlert").effect("shake");
|
|
if(!valid){
|
|
$("#menuCatalog").val("");
|
|
$("#menuFoodName").val("");
|
|
$("#menuFoodPrice").val("");
|
|
$("#resturantMenu").append("<tr><td>"+menuFoodName+"</td><td>"+menuCatalog+"</td><td>"+menuFoodPrice+"</td><td class='menuDisplay'>"+menuDisplay+"</td><td><a class='btn-floating btn-small waves-effect waves-light red btnMenuDelete'><i class='material-icons'>delete</i></a> <a class='btn-floating btn-small waves-effect waves-light teal lighten-2 btnMenuChange'><i class='material-icons'>repeat</i></a></td></tr>");
|
|
|
|
$(".btnMenuDelete").click(function(){
|
|
$(this).parents("tr").remove();
|
|
});
|
|
$(".btnMenuChange").click(function(){
|
|
var disVal = $(this).parent().siblings(".menuDisplay").html();
|
|
if(disVal=="false"){
|
|
$(this).parent().siblings(".menuDisplay").html("true");
|
|
}else{
|
|
$(this).parent().siblings(".menuDisplay").html("false");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
$("#btnMenuClose").click(function(){
|
|
if(confirm("Do you want to exit? the data will not save.")){
|
|
$("#createRest").modal("close");
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<body>
|
|
<nav>
|
|
<div class="nav-wrapper container">
|
|
<a id="logo-container" href="index.html" class="brand-logo ">Yummy Everywhere</a>
|
|
|
|
<ul class="right">
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<ul id="slide-out" class="sidenav">
|
|
</ul>
|
|
<div id="warningModal" class="modal" style="width: 400px; margin-top: 150px">
|
|
<div class="modal-content">
|
|
<h4 class="red-text">Warning!</h4>
|
|
<p id="wraningAlert"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
|
|
<a href="#!" id="closeMenu" class="modal-close waves-effect waves-green btn-flat red-text">Yes</a>
|
|
</div>
|
|
</div>
|
|
<!--- Fav Box -->
|
|
<div id="modal_box" class="bottom-sheet"></div>
|
|
<div id="createRest" class="modal modal-fixed-footer createRest">
|
|
<div class="modal-content">
|
|
<h4 class="card-panel">Create Restaurant</h4>
|
|
<ul class="collapsible popout" data-collapsible="accordion" id="step">
|
|
<li class="active" id="listepOne">
|
|
<div class="collapsible-header" id="firstStep"><i class="material-icons">create</i>First: Create Your resturant Inforamtion</div>
|
|
<div class="collapsible-body">
|
|
<span>
|
|
<div class="row" id="stepOne">
|
|
<div id="stepOneAlert"></div>
|
|
<div class="input-field col s12">
|
|
<i class="material-icons prefix">restaurant</i>
|
|
<input id="createRestaurantName" type="text" class="validate">
|
|
<label for="createRestaureantName">Restaurant Name</label>
|
|
</div>
|
|
<div class="input-field col s12 m6">
|
|
<i class="material-icons prefix">phone</i>
|
|
<input id="createRestaureantTel" type="number" class="validate">
|
|
<label for="createRestaureantTel">Telephone</label>
|
|
</div>
|
|
<div class="input-field col s12">
|
|
<i class="material-icons prefix">location_on</i>
|
|
<textarea id="createRestaureantAdde" class="materialize-textarea validate"></textarea>
|
|
<label for="createRestaureantAdde">Address</label>
|
|
</div>
|
|
<div class="input-field col s12 m8">
|
|
<i class="material-icons prefix">location_city</i>
|
|
<select id="createRestaurantSelect">
|
|
<option value="Kowloon">Kowloon</option>
|
|
<option value="Hong Kong">Hong Kong</option>
|
|
<option value="New Territories">New Territories</option>
|
|
</select>
|
|
<label>Area</label>
|
|
</div>
|
|
<div class="input-field col s5">
|
|
<i class="material-icons prefix">location_searching</i>
|
|
<input id="createRestaureantOPTime" type="text" class="timepicker">
|
|
<label for="createRestaureantOPTime">Opening hours</label>
|
|
</div>
|
|
<div class="input-field col s2 center"> to</div>
|
|
<div class="input-field col s5">
|
|
<input id="createRestaureantCLTime" type="text" class="timepicker">
|
|
<label for="createRestaureantCLTime">Close hours</label>
|
|
</div>
|
|
<div class="file-field input-field col s12">
|
|
|
|
<div class="btn">
|
|
<span>File</span>
|
|
<input type="file" name="file" id="file">
|
|
</div>
|
|
<div class="file-path-wrapper">
|
|
<input class="file-path validate" type="text" placeholder="Your restaurent Image">
|
|
</div>
|
|
</div>
|
|
<div class="input-field col s12">
|
|
<div id="restChips" class="chips chips-placeholder"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</span>
|
|
</div>
|
|
</li>
|
|
<li id="listepSecond" class="disabled">
|
|
<div class="collapsible-header" id="secondStep"><i class="material-icons">label</i>Second: Create Your Catalog of resturant menu</div>
|
|
<div class="collapsible-body">
|
|
<span>
|
|
<div class="row">
|
|
<div id="menuCatAlert"></div>
|
|
<div class="input-field col s12" style="margin: 0 0 50px 3px" >
|
|
<label>
|
|
<input type="checkbox" class="filled-in" id="catalogHidden" />
|
|
<span>Hidden Catalog</span>
|
|
</label>
|
|
</div>
|
|
<div class="input-field col s12 m8">
|
|
<i class="material-icons prefix">label</i>
|
|
<input type="text" class="autocomplete" id="catalog">
|
|
<label for="catalog">Catalog (E.g. Lunch, Dinner, seasonal)</label>
|
|
|
|
</div>
|
|
|
|
<div class="input-field col s12" style="margin-bottom: 35px">
|
|
<label>
|
|
<input type="checkbox" class="filled-in" checked="checked" id="catalogAllDay" />
|
|
<span>All Day Menu</span>
|
|
</label>
|
|
</div>
|
|
<div id="menuTime">
|
|
<div class="input-field col s5">
|
|
<i class="material-icons prefix">location_searching</i>
|
|
<input id="catalogTo" type="text" class="timepicker">
|
|
<label for="catalogTo">Start Time</label>
|
|
</div>
|
|
<div class="input-field col s1 center"> to</div>
|
|
<div class="input-field col s5">
|
|
<input id="catalogCl" type="text" class="timepicker">
|
|
<label for="catalogCl">Close Time</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-field col s5">
|
|
<button class="btn waves-effect waves-light btn-small" type="submit" name="action" id="btnAddCatalog">ADD Catalog
|
|
<i class="material-icons right">add</i>
|
|
</button>
|
|
</div>
|
|
<div class="col s12">
|
|
<table id="catalogTable" >
|
|
<tr>
|
|
<th>Catalog Name</th>
|
|
<th>All Day</th>
|
|
<th>Start Time</th>
|
|
<th>Close Time</th>
|
|
<th>Hidden</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
<li id="liStepThrid">
|
|
<div class="collapsible-header" id="stepThrid"><i class="material-icons">restaurant_menu</i>Finally: Create Your Resturant Menu</div>
|
|
<div class="collapsible-body">
|
|
<span>
|
|
<div class="row">
|
|
<div id="menuAlert"></div>
|
|
<div class="input-field col s12 m10">
|
|
<select id="menuCatalog">
|
|
<option value="" disabled selected>Choose your catalog</option>
|
|
</select>
|
|
<label>Catalog Select</label>
|
|
</div>
|
|
<div class="input-field col s12 m10">
|
|
<i class="material-icons prefix">restaurant</i>
|
|
<input id="menuFoodName" type="text" class="validate">
|
|
<label for="menuFoodName">Food Name</label>
|
|
</div>
|
|
<div class="input-field col s12 m4">
|
|
<i class="material-icons prefix">attach_money</i>
|
|
<input id="menuFoodPrice" type="number" class="validate">
|
|
<label for="menuFoodPrice">Price</label>
|
|
</div>
|
|
<div class="input-field col s12" style="margin-bottom: 45px">
|
|
<label>
|
|
<input type="checkbox" class="filled-in" checked="checked" id="menuDisplay" />
|
|
<span>Display</span>
|
|
</label>
|
|
</div>
|
|
<div class="input-field col s5">
|
|
<button class="btn waves-effect waves-light btn-small" type="submit" name="action" id="btnAddFood">ADD FOOD
|
|
<i class="material-icons right">add</i>
|
|
</button>
|
|
</div>
|
|
<table id="resturantMenu">
|
|
<tr>
|
|
<th>Food Name</th>
|
|
<th>Catalog</th>
|
|
<th>Price</th>
|
|
<th>Display</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#!" class="waves-effect waves-green btn-flat" id="btnMenuClose">CLOSE</a>
|
|
<a class="waves-effect waves-green btn-flat modal-trigger" href="#alert" id="btnMenuSave">SAVE</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="alert" class="modal" style="width: 300px;">
|
|
<div class="modal-content">
|
|
<h4>Following the missing</h4>
|
|
<p id="menuMissing"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a href="#!" class="modal-close waves-effect waves-green btn-flat" id="alertClose">Close</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="index-banner" class="parallax-container">
|
|
<div class="">
|
|
<div class="container" style="margin-top: 200px;">
|
|
<h2 class="center">Restaurant</h2>
|
|
</div>
|
|
</div>
|
|
<div class="parallax"><img src="images/background1.jpg"></div>
|
|
</div>
|
|
<div class="container">
|
|
|
|
<div class="section">
|
|
<div class="row">
|
|
<div class="col s12 m8 l7">
|
|
<div class="card-panel grey lighten-5 ">
|
|
|
|
<div class="row" style="height: 50px; margin-top: -15px">
|
|
<div class="input-field col s10 m8">
|
|
<i class="material-icons prefix">search</i>
|
|
<input placeholder="Resturant Name" id="foodSearch" type="text" class="validate">
|
|
</div>
|
|
<div class="col s2">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container" style="padding: 0">
|
|
<div class="row" id="operatorRestaurant">
|
|
<div id="restaurantMenu">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Structure -->
|
|
<div id="modal1" class="modal loginModal" style="width: 400px;">
|
|
<div class="row center-align">
|
|
<div class="col s12 modal-content">
|
|
<span class="flow-text" id="loginInfo">
|
|
<div id="loginAlert"></div>
|
|
<h4 style="border-bottom: 1px solid #ebebeb; height: 50px;">LOGIN</h4>
|
|
<div class="input-field col s12">
|
|
<i class="material-icons prefix">account_circle</i>
|
|
<input id="loginEmail" type="text" class="validate" required>
|
|
<label for="loginEmail">Email</label>
|
|
</div><br>
|
|
<div class="input-field col s12">
|
|
<i class="material-icons prefix">vpn_key</i>
|
|
<input id="loginPwd" type="password" class="validate" required>
|
|
<label for="loginPwd">Password</label>
|
|
</div>
|
|
|
|
<a class="waves-effect waves-light btn col s10 offset-s1" style="margin-top: 50px" id="btnSubmitLogin">LOGIN</a>
|
|
<h6 class=" col s12">Don"t have an account? <a href="#" id="createAccount">Sign up here</a></h6>
|
|
</span>
|
|
<span class="flow-text" id="createInfo">
|
|
<div id="pwdAlert"></div>
|
|
<h4 style='border-bottom: 1px solid #ebebeb; height: 50px;'>REGISTER</h4><div class='input-field col s6'><input id='first_name' type='text' class='validate' required><label for='first_name'>First Name</label></div><div class='input-field col s6'><input id='last_name' type='text' class='validate' required><label for='last_name'>Last Name</label></div><div class='input-field col s12'><input id='regEmail' type='email' class='validate' required><label for='regEmail'>Email</label></div><div class='input-field col s12'><input id='regPassword' type='password' class='validate' required><label for='regPassword'>Password</label></div><div class='input-field col s12'><input id='checkPassword' type='password' class='validate' required><label for='checkPassword'>Confirm Password</label></div><a class='waves-effect waves-light btn col s10 offset-s1' style='margin-top: 50px' id='btnSubmitRegister'>REGISTER</a><h6 class='col s12' id="changeLogin">You have an account? <a href='#' id='loginAccount'>Login</a></h6>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="page-footer teal">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col l3 s12">
|
|
<h5 class="white-text">Connect</h5>
|
|
<ul>
|
|
<li><a class="white-text" href="aboutus.html">About Us</a></li>
|
|
<li><a class="white-text" href="userGuide.html">User Guide</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-copyright">
|
|
<div class="container">Copyright © 2019 InnoTech HK Inc. All rights reserved</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts-->
|
|
|
|
</body>
|
|
|
|
</html>
|