@page
@model WebUI.Pages.Shared.ServitörVyModel
@{
var swedishTimeZone = TimeZoneInfo.FindSystemTimeZoneById("Central European Standard Time");
var nowSwedishTime = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, swedishTimeZone);
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Välj Bord</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/StyleFoodMenu.css" asp-append-version="true">
<style>
.table-button {
width: 100%;
margin-bottom: 20px;
height: 60px;
}
.iframe-container {
width: 100%;
border: none;
height: 400px;
}
</style>
</head>
<div class="container" style="display:flex; flex-direction:column;" >
<button class="btn btn-warning" id="offcanvasbutton" style=" color:black;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div id="accordion">
<div class="card">
<button class="btn btn-warning" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Välj bord
</button>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Välj bord
<select id="tableSelect" class="form-control">
@foreach (var table in Model.TablesProp)
{
<option value="@table.Number">@table.Number</option>
}
</select>
<button class="btn btn-success" id="confirmButton">Bekräfta </button>
</div>
</div>
</div>
<div class="card">
<button class="btn btn-warning collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Beställning
</button>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
<button class="btn btn-success" id="orderButton">Ny Beställning </button>
</div>
</div>
</div>
<div class="card">
<button class="btn btn-warning collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Välj maträtt
</button>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<div class="row special-list">
@if (Model.Foods != null)
{
foreach (var food in Model.Foods)
{
if ((food.PublishDate == null || food.PublishDate <= nowSwedishTime) &&
(food.RemoveDate == null || food.RemoveDate > nowSwedishTime))
{
<div class="col-lg-4 col-md-6 special-grid menu-card" data-food-id="@food.Id"
data-food-title="@food.Title" data-food-description="@food.Description"
data-food-price="@food.Price" data-food-category="@food.Category"
data-food-ingredients="@food.Ingredients">
<div class="gallery-single fix">
@if (!string.IsNullOrEmpty(food.ImagePath))
{
<img src="@Url.Content($"~/{food.ImagePath}")" class="img-fluid" alt="Bild av @food.Title">
}
<div class="why-text">
@if (User.IsInRole("Admin") || User.IsInRole("Owner"))
{
<div class="options-menu" style="display:none;">
</div>
}
<h4>@food.Title</h4>
<button class="button btn-success add-to-cart" id="addtocart" data-food-id="@food.Id">Lägg till</button>
<h5>@food.Price kr</h5>
</div>
</div>
</div>
}
}
}
</div>
</div>
</div>
</div>
</div>
</div>
<title>Offcanvas Button Example</title>
<!-- Include Bootstrap CSS -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small" id="ordersContainer">
</div>
</div>
<button class="btn-btn btn-success" id="confirmorder"> Bekräfta beställning </button>
<!-- Include Bootstrap JavaScript (popper.js and bootstrap.js are also required) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
document.getElementById('confirmButton').addEventListener('click', function () {
// Get the selected table number
var selectedTableNumber = document.getElementById('tableSelect').value;
// Do something with the selected table number
console.log('Selected table number:', selectedTableNumber);
// You can perform further actions here, such as sending the selected table number to the server
// using AJAX or submitting a form.
});
let orderId;
let guest;
let waiter;
let date;
let receit
let status
let table;
//POST Order
document.getElementById('orderButton').addEventListener('click', function () {
// Prepare the order data
const currentDate = new Date();
const orderData = {
table:document.getElementById('tableSelect').value
};
// Send the order data to the server using Fetch API
fetch('/api/Order/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(orderData)
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Handle the response data if needed
console.log('Order created successfully:', data);
console.log('Order Id: ', data.id)
console.log('Order Guest: ', data.guest)
console.log('Order Table: ', data.table )
console.log('Order WaiterId: ', data.waiterId)
console.log('Order Date: ', data.date)
console.log('Order ReceitId: ', data.receitId)
console.log('Order Status: ', data.status)
date = order.date;
orderId = data.id;
guest = data.guest;
table = data.table;
waiter = data.waiterId;
receit = data.receitId;
status = data.status;
// You can redirect or show a success message here
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
// Handle errors appropriately, e.g., show an error message to the user
});
});
//POST OrderItem
document.querySelectorAll('.add-to-cart').forEach(item => {
item.addEventListener('click', function () {
var foodId = $(this).data('food-id');
var data = {
FoodId: foodId,
Quantity: 1,
OrderId: orderId
};
fetch('/api/OrderItem/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Handle success
console.log('Success:', data);
})
.catch(error => {
// Handle error
console.error('Error:', error);
});
});
});
//GET OrderItems
function fetchOrders() {
fetch(`/api/OrderItem/?columnName=orderid&columnValue=${orderId}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Work with the JSON data retrieved from the endpoint
const ordersContainer = document.getElementById('ordersContainer');
// Clear existing content
ordersContainer.innerHTML = '';
// Iterate over the data and append to the container
data.forEach(order => {
const orderElement = document.createElement('div');
orderElement.textContent = `Quantity: ${order.quantity} FoodId:${order.foodId}, OrderId: ${order.orderId}`;
ordersContainer.appendChild(orderElement);
});
})
console.log()
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
}
document.getElementById('confirmorder').addEventListener('click', function () {
const itemIdToUpdate = orderId; // Example item ID to update
const updatedData = {
id : orderId,
guest : guest,
table : table,
waiterId : waiter,
date : date,
receitId : receit,
confirmed : true,
status : status
// Example updated data for the item
// Add other fields as needed
};
// Construct the URL targeting the specific item
const url = `/api/Order/${itemIdToUpdate}`;
// Prepare the request object
const requestOptions = {
method: 'PUT', // or 'PATCH' depending on the server's API
headers: {
'Content-Type': 'application/json', // Specify content type as JSON
// Add any other headers if required
},
body: JSON.stringify(updatedData), // Convert data to JSON format
};
// Send the request
fetch(url, requestOptions)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // Parse response JSON if needed
})
.then(data => {
// Handle successful response (if required)
console.log('Item updated successfully:', data);
})
.catch(error => {
// Handle errors
console.error('There was a problem updating the item:', error);
});
});
// Attach an event listener to the button
const refreshButton = document.getElementById('addtocart');
refreshButton.addEventListener('click', fetchOrders);
const refreshButton2 = document.getElementById('offcanvasbutton');
refreshButton2.addEventListener('click', fetchOrders);
</script>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter