developer/lk.zachem.info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

crete zoomable for images in contarcts deteil page

Browse Source
This commit is contained in:
Thekindbull 2025-08-29 17:40:09 +08:00
parent 96362d7ed4
commit c20da10d1d
3 changed files with 88 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/Modules/Contracts/Http/Livewire/ContractsTableLivewire.php
View File

@ -62,13 +62,19 @@ private function appendMode(&$query)
ContractStatus::SUCCESS,
]);
}
if ($this->mode == 'finished')
if ($this->mode == 'successed')
{
$query->whereIn('status', [
ContractStatus::DECLINE,
ContractStatus::SUCCESS,
ContractStatus::TREATY
]);
}
if ($this->mode == 'declined')
{
$query->whereIn('status', [
ContractStatus::DECLINE
]);
}
}
private function appendFilter(&$query)
{

10
app/Modules/Contracts/Views/index.blade.php
View File

@ -11,9 +11,13 @@
onclick="this.form.submit()" {{ $mode == 'active' ? 'checked' : '' }}>
<label class="btn p-2 fs-5" for="mode_active">Активные</label>
<input type="radio" class="btn-check" name="mode" value="finished" id="mode_finished"
autocomplete="off" onclick="this.form.submit()" {{ $mode == 'finished' ? 'checked' : '' }}>
<label class="btn p-2 fs-5" for="mode_finished">Оконченные</label>
<input type="radio" class="btn-check" name="mode" value="successed" id="mode_successed"
autocomplete="off" onclick="this.form.submit()" {{ $mode == 'successed' ? 'checked' : '' }}>
<label class="btn p-2 fs-5" for="mode_successed">Успешные</label>
<input type="radio" class="btn-check" name="mode" value="declined" id="mode_declined"
autocomplete="off" onclick="this.form.submit()" {{ $mode == 'declined' ? 'checked' : '' }}>
<label class="btn p-2 fs-5" for="mode_declined">Отмененные</label>
</div>
<div class="ms-auto hstack gap-2">
<button type="button" class="lh-1 btn bg-white p-3 fw-bold border rounded-3 border-1"

64
resources/views/clients/contract/index.blade.php
View File

@ -107,11 +107,23 @@ class="bi bi-pen" viewBox="0 0 16 16">
</div>
</div>
<div class="col col-lg-4 p-3">
<div class="rounded-4 h-100 w-100" style="background-color:#ebeef5"
data-base64="{{ $contract->base64_image }}">
<div class="rounded-4 ratio ratio-1x1 rounded overflow-hidden" style="background-color:#ebeef5"
data-base64="">
@if ($contract->base64_image)
<img style='display:block;' class="h-100 w-100" id='base64image'
src='data:image/jpeg;base64, {{ $contract->base64_image }}' />
<div class="w-100 h-100 d-flex align-items-center overflow-hidden zoomable-container"
style='background-image:url("data:image/jpeg;base64, {{ $contract->base64_image }}");'>
<div class="text-center mx-auto zoom-button">
<svg class="text-white" xmlns="http://www.w3.org/2000/svg" width="70" height="70"
fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0" />
<path
d="M10.344 11.742q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1 6.5 6.5 0 0 1-1.398 1.4z" />
<path fill-rule="evenodd"
d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5" />
</svg>
</div>
</div>
@endif
</div>
</div>
@ -144,4 +156,48 @@ class="bi bi-record-circle-fill align-middle" viewBox="0 0 16 16">
@endif
</div>
</div>
<style>
.zoomable-container {
backdrop-filter: blur(10px);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.zoomable-container:not(.zoomed):hover {
transform: scale(1.5);
background-color: rgb(33 33 33 / 60%);
background-blend-mode: multiply;
background-repeat: no-repeat;
background-position: center;
}
.zoomable-container.zoomed {
position: fixed;
top: 0;
left: 0;
margin: 0 auto;
}
.zoomable-container.zoomed .zoom-button {
display: none;
}
</style>
<script>
var images = document.querySelectorAll(".zoomable-container");
Array.prototype.forEach.call(images, function(img) {
// Do stuff here
img.addEventListener('click', function() {
console.log(img.classList.contains('zoomed'));
if (!img.classList.contains('zoomed')) {
img.classList.add('zoomed');
} else {
img.classList.remove('zoomed');
}
});
});
</script>
@endsection