Krissh

Can you help me out for the issue? My requirement is, Show a smaller image in comment field. When you click on the image, a bigger image should be loaded in a dialog box. UI is using the daiseyui so use their dialog box solution. https://daisyui.com/components/modal/

Sure

<li class="mb-10 ms-6"> <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3 ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900"> {{ substr($comment->user->name, 0, 1) }} </span> <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-700 dark:border-gray-600"> <div class="items-center justify-between mb-3 sm:flex"> <time class="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">{{ $comment->created_at }}</time> <div class="text-sm font-normal text-gray-500 dark:text-gray-300"> {{ $comment->user->name }} bild av ärendet </div> </div> <div id="image-read-view-{{ $comment->id }}" data-id="{{ $comment->id }}"> <div class="flex justify-end"> @if($user->user_role == 3) <button id="image-edit-btn-{{ $comment->id }}" class="btn btn-sm btn-square btn-ghost" data-id="{{ $comment->id }}"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="18" height="18" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg> </button> @endif </div> <div class="text-sm"> @if(!is_null($comment->fileName)) @php $image = 'data:image/jpg;base64,' . base64_encode(Storage::disk('local')->get('images/' . $serviceRequest->customer->image_folder . '/' . $comment->fileName)); @endphp <div class="image-wrapper"> <img src="{{ $image }}" class="comment-image" data-id="{{ $comment->id }}" data-image="{{ $image }}" /> </div> @else <i>Ingen bild</i> @endif </div> </div> <!-- Edit view for the image (hidden by default) --> <div id="image-edit-view-{{ $comment->id }}" class="hidden" data-id="{{ $comment->id }}"> <div> <label class="form-control w-full"> <div class="label"> <span class="label-text">Bild</span> </div> <input type="file" name="imageUpdate" class="file-input file-input-bordered w-full" /> </label> <span id="image_update_error-{{ $comment->id }}" class="text-error text-sm"></span> </div> <div class="flex justify-end items-center pt-6 gap-4"> <button id="image-cancel-btn-{{ $comment->id }}" class="btn btn-ghost" data-id="{{ $comment->id }}">Avbryt</button> <button id="image-save-btn-{{ $comment->id }}" class="btn btn-success" data-id="{{ $comment->id }}">Spara</button> </div> <div> <button id="image-remove-btn-{{ $comment->id }}" class="btn btn-outline btn-error btn-xs" data-id="{{ $comment->id }}">Ta bort bilden</button> </div> </div> </div> </li> <!-- Modal for showing the bigger image --> <dialog id="image_modal_{{ $comment->id }}" class="modal"> <div class="modal-box max-w-full max-h-full p-0"> <img id="modal_image_{{ $comment->id }}" src="" class="w-full h-full object-contain" /> <div class="modal-action"> <button class="btn" onclick="document.getElementById('image_modal_{{ $comment->id }}').close()">Close</button> </div> </div> </dialog> <script> $(document).on('click', '[id^="image-edit-btn-"]', function() { var id = $(this).data('id'); $('#image-read-view-' + id).addClass('hidden'); $('#image-edit-view-' + id).removeClass('hidden'); $('[name="imageUpdate"]').val(''); $('#image_update_error-' + id).html(''); }); $(document).on('click', '[id^="image-cancel-btn-"]', function() { var id = $(this).data('id'); $('#image-edit-view-' + id).addClass('hidden'); $('#image-read-view-' + id).removeClass('hidden'); $('#image-edit-btn-' + id).removeClass('hidden'); $('#image_update_error-' + id).html(''); }); $(document).on('click', '[id^="image-save-btn-"]', async function() { var id = $(this).data('id'); var image = $('[name="imageUpdate"]'); var token = $('meta[name="csrf-token"]').attr('content'); var formData = new FormData(); formData.append('image', image.get(0).files[0]); formData.append('_token', token); formData.append('_method', 'PATCH'); const res = await fetch('/service-requests/' + id + '/partial/update/image', { method: 'POST', body: formData }); const data = await res.json(); if (res.ok) { $('#image-read-view-' + id).find('div:eq(1)').html('<img src="' + data + '" class="comment-image cursor-pointer" data-id="' + id + '" data-image="' + data + '" />'); $('#image-edit-view-' + id).addClass('hidden'); $('#image-read-view-' + id).removeClass('hidden'); $('#image_update_error-' + id).html(''); } else { $('#image_update_error-' + id).html(data.image); } }); $(document).on('click', '[id^="image-remove-btn-"]', async function() { var id = $(this).data('id'); var token = $('meta[name="csrf-token"]').attr('content'); var formData = new FormData(); formData.append('_token', token); formData.append('_method', 'DELETE'); const res = await fetch('/service-requests/' + id + '/partial/remove/image', { method: 'POST', body: formData }); if (res.ok) { $('#image-read-view-' + id).find('div:eq(1)').html('<i>Ingen bild</i>'); $('#image-edit-view-' + id).addClass('hidden'); $('#image-read-view-' + id).removeClass('hidden'); $('#image-edit-btn-' + id).removeClass('hidden'); } }); // Show the bigger image in the modal on image click $(document).on('click', '.comment-image', function() { var imageSrc = $(this).data('image'); var id = $(this).data('id'); $('#modal_image_' + id).attr('src', imageSrc); document.getElementById('image_modal_' + id).showModal(); }); </script> Show a smaller image in the comment field. A bigger image should be loaded in a dialog box when you click on the small image. UI is using the daiseyui so use their dialog box solution. https://daisyui.com/components/modal/

If test within a year, For example. The start date is 2020-01-01 and the end date is 2020-12-31. The code works fine with the requirement.

Here you can see that rum A1 is getting added twice. For jan month it should be 31 days. But it shows 62 days which is wrong. Test scenario here. The start date is 2020-01-01 and the end date is 2021-12-31. While testing between years it is not fetching the correct no.of days for each month.

Hi, I have attached the full code for your reference. Test scenario: Start date: 2020-01-01-and end date: 2024-07-31. Here no.of nights needs to be fetched for each month from the year 2020 to 2024. Reports.txt

The purpose of the code is to fetch the no.of nights in each month and should not calculate the end date. So the start date will be 2020-01-01 and the end date will be 2024-07-31. So the output should be Jan-31 Feb-29 Mar-31. But the output here shown is Jan -155 Feb -142 and Mar -155, where it is getting multiplied for all year.

<?php $guestRoomsResult = mysqli_query($con,"SELECT * FROM product WHERE category = 'Guestroom' AND status 'Active' ORDER BY productName ASC") if (mysqli_num_rows($guestRoomsResult) > 0) { $month1 = []; $month2 = []; $month3 = []; while ($row= mysqli_fetch_array($guestRoomsResult)) { $productId = $row["id"]; $month1_total = 0; $month2_total = 0; $month3_total = 0; $sql = "SELECT bookingItem.* FROM bookingItem, product WHERE bookingItem.productId = product.id AND bookingItem.productId = $productId AND product.status = 'Active' AND bookingItem.startTime <= '$month3_endTime'AND bookingItem.endTime >= '$month1_startTime'"; $booking_result = mysqli_query($con,$sql); if (mysqli_num_rows($booking_result) > 0) { while($booking_row = mysqli_fetch_array($booking_result)) { $start_date = new DateTime($booking_row["startTime"]); $end_date = new DateTime($booking_row["endTime"]); $end_date->modify('-1 day'); // Exclude the end date while ($start_date <= $end_date) { $month = $start_date->format("n"); if ($_GET["quarters"] == "Q1") { switch ($month) { case 1: $month1_total += $booking_row["quantity"]; $month1[] =$booking_row[ "quantity"]; break; case 2: $month2_total +=$booking_row["quantity"]; $month2[] =$booking_row["quantity"]; break; case 3: $month3_total +=$booking_row["quantity"]; $month3[] =$booking_row["quantity"]; break; } } } echo "<tr>"; echo "<td>" . $row["productName"] . "</td>"; if ($_GET["quarters"] == "Q1") { echo "<td>" . $month1_total ."</td>"; echo "<td>" . $month2_total . "</td>"; echo "<td>" . $month3_total . "</td>";echo "<td><strong>" . ($month1_total +$month2_total + $month3_total) . "</strong></td>"; } echo "</tr>"; } } else { echo "<tr>"; echo '<td colspan="4">Inga produkter hittades</td>'; echo "</tr>"; } ?> // Display the product total row echo "<tr>"; echo "<td><strong>Total</strong></td>"; if ($_GET["quarters"] == "Q1") { $month1_total = array_sum($month1); $month2_total = array_sum($month2); $month3_total = array_sum($month3); $quarterTotal = $month1_total + $month2_total + $month3_total; echo "<td><strong>{$month1_total}</strong></td>"; echo "<td><strong>{$month2_total}</strong></td>"; echo "<td><strong>{$month3_total}</strong></td>"; echo "<td><strong>{$quarterTotal}</strong></td>"; } echo "</tr>"; ?> </div> <br /><br /> Test Scenario: Start date: 2020-01-01 and end date: 2024-07-31. It should fetch the no. of days correctly on the guestroom table. Instead, it multiplies or adds according to the year. So each month is calculated as 155 days(jan 31 days X 5 years) instead of 31 days. The output should be Jan 30 Feb 29 Mar 31. But it shows as Jan 155 Feb 142 Mar 155. Please check the code and share the revised as per requirement.

Thanks for your reply. I am not in position to share the dump structure right now.

This is how my page looks,

Based on the booking items there should be total of 9 nights for “Room 1” in (june) and (july) with quantity 1 Expected result in june= 5 nights Expected result in july = 4 nights Got 6 nights in june and 4 nights in july code.txt