not work
Fri Mar 22 2024 09:44:25 GMT+0000 (Coordinated Universal Time)
Saved by @knugen0839 #javascript #c# #html
@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>
Comments