218 lines
8.9 KiB
Plaintext
218 lines
8.9 KiB
Plaintext
@using Microsoft.AspNetCore.Mvc.TagHelpers
|
|
@model CompanyManagment.App.Contracts.Workshop.TakePictureModel
|
|
@{
|
|
string clientVersion = _0_Framework.Application.Version.StyleVersion;
|
|
<link href="~/AssetsClient/css/select2.css?ver=@clientVersion" rel="stylesheet" />
|
|
<link href="~/assetsclient/pages/rollcall/css/modaltakeimages.css?ver=@clientVersion" rel="stylesheet" />
|
|
|
|
<style>
|
|
@@media (max-width: 992px) {
|
|
.modal-dialog, .modal-content {
|
|
height: auto;
|
|
}
|
|
}
|
|
</style>
|
|
}
|
|
|
|
|
|
<div class="modal-content">
|
|
<div id="mobileDisplay">
|
|
|
|
<div class="modal-header d-block text-center">
|
|
<button type="button" class="btn-close position-absolute text-start" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
<div class="lableCheckBreakTime">
|
|
<div>ویرایش عکس پرسنل:</div>
|
|
<div>@(Model.FirstNickName + " " + Model.LastNickName)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-body clearfix">
|
|
|
|
<form role="form" method="post" name="create-form" id="create-form" autocomplete="off">
|
|
|
|
<div class="container p-0 m-0" style="height: 480px;">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div class="panel panel-default">
|
|
<form asp-page="./Index" asp-page-handler="TakePicture" id="test"
|
|
method="post"
|
|
data-ajax="true"
|
|
data-callback=""
|
|
data-action="Refresh"
|
|
enctype="multipart/form-data">
|
|
<div class="panel-body text-center">
|
|
<div id="result1" style="margin-bottom: 5px;"></div>
|
|
<div id="result2" style="margin-bottom: 5px;"></div>
|
|
<div id="demoResult1" class="image-show">
|
|
<button type="button" class="upload-image1">
|
|
<p class="textUpload @(Model.HasPicture ? "textUploaded" : "")">
|
|
@(Model.HasPicture ? "عکس اول" : "بارگذاری عکس اول")
|
|
</p>
|
|
</button>
|
|
@* <div class="loadingImage" id="loadingImage1">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div> *@
|
|
@if (Model.HasPicture)
|
|
{
|
|
<img style="width: 100%; height: 100%; border-radius: 10px;" data-uri="data:image/jpeg;base64,@Model.Pic1" id="pic1" src="data:image/jpeg;base64,@Model.Pic1" />
|
|
}
|
|
</div>
|
|
<div id="demoResult2" class="image-show">
|
|
<button type="button" class="upload-image2">
|
|
<p class="textUpload @(Model.HasPicture ? "textUploaded" : "")">
|
|
@(Model.HasPicture ? "عکس دوم" : "بارگذاری عکس دوم")
|
|
</p>
|
|
</button>
|
|
@* <div class="loadingImage" id="loadingImage2">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div> *@
|
|
@if (Model.HasPicture)
|
|
{
|
|
<img style="width: 100%; height: 100%; border-radius: 10px;" id="pic2" data-uri="data:image/jpeg;base64,@Model.Pic2" src="data:image/jpeg;base64,@Model.Pic2" />
|
|
}
|
|
</div>
|
|
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-12 position-relative overflow-hidden" style="height: 20px; direction: ltr;">
|
|
<div class="spinner-loading-progress loading" style="display: none; border-radius: 6px; position: unset;">
|
|
<span id="progressBar" style="color: #ffffff"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<input type="hidden" id="workshopId" asp-for="@Model.WorkshopId" value="@Model.WorkshopId" />
|
|
<input type="hidden" id="employeeId" asp-for="@Model.EmployeeId" value="@Model.EmployeeId" />
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="desktopDisplay" style="height: 620px;">
|
|
<div class="modal-body" style="display: flex; justify-content: center; align-items: center; height: 600px;">
|
|
<div class="d-flex flex-column justify-content-center h-75 text-center">
|
|
<div>
|
|
<svg width="100px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 621.6 721.91">
|
|
<defs>
|
|
<style>
|
|
.clsd-1 {
|
|
fill: url(#linear-gradient-2);
|
|
}
|
|
|
|
.clsd-2 {
|
|
fill: url(#linear-gradient-3);
|
|
}
|
|
|
|
.clsd-3 {
|
|
fill: url(#linear-gradient);
|
|
}
|
|
</style>
|
|
<linearGradient id="linear-gradient" x1="0" y1="481.82" x2="621.6" y2="481.82" gradientUnits="userSpaceOnUse">
|
|
<stop offset="0" stop-color="#30c1c1" />
|
|
<stop offset="1" stop-color="#087474" />
|
|
</linearGradient>
|
|
<linearGradient id="linear-gradient-2" x1="217.07" y1="187.47" x2="523.83" y2="187.47" xlink:href="#linear-gradient" />
|
|
<linearGradient id="linear-gradient-3" x1="1.3" y1="146.6" x2="395.56" y2="146.6" xlink:href="#linear-gradient" />
|
|
</defs>
|
|
<polygon class="clsd-3" points="0 328.82 129.91 244.95 129.91 453.87 310.8 562.4 488.4 453.87 488.4 355.2 310.8 355.2 488.4 241.73 621.6 241.73 621.6 541.02 310.8 721.91 0 541.02 0 328.82" />
|
|
<polygon class="clsd-1" points="217.07 309.16 217.07 192.4 426.8 65.78 523.83 123.33 217.07 309.16" />
|
|
<polyline class="clsd-2" points="308.61 0 395.56 47.69 1.3 293.19 1.3 184.66 308.61 0" />
|
|
</svg>
|
|
<h5 class="mt-2 title-logo">سامانه هوشمند گزارشگیر</h5>
|
|
</div>
|
|
<div>
|
|
<p>برای ساعات حضور و غیاب میباست از گوشی استفاده نمایید!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal-footer d-block text-center m-0">
|
|
|
|
<div class="row" id="footerButtons">
|
|
<div id="closeButton" class="col-6 text-end">
|
|
<button class="w-100 btn-cancel text-white cancelAndRefresh" id="prev-step" type="button" style="display: block" data-bs-dismiss="modal" aria-label="Close">
|
|
<span>انصراف</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="submitButton" class="col-6 text-start">
|
|
<button type="button" class="w-100 btn-primary disable position-relative overflow-auto doNext" id="next-step">
|
|
<span id="textShowBtn">ثبت</span>
|
|
<div class="spinner-loading loading" style="display: none">
|
|
<span class="spinner-border spinner-border-sm loading text-white" role="status" aria-hidden="true"></span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
@* Camera Modal *@
|
|
<div class="md-modal md-effect-12" id="ModalTakePicture">
|
|
<div class="md-content" style="width: 100%;">
|
|
<div class="panel panel-default">
|
|
<div class="panel-body" style="width: 360px;height: 360px;text-align: center;margin: auto;">
|
|
@*<div id="my_camera" style="margin: auto; display: none;"></div>*@
|
|
@* <div id="video" style="margin: auto;"></div> *@
|
|
@* <div id="video" style="margin: auto; width: 100%; height: 100%;"></div> *@
|
|
<div style="display: block; position: relative; width: 360px; height: 360px;">
|
|
@*<div id="video" style="position: absolute; top: 0px; right: 0; margin: auto; width: 100%; height: 100%;"></div>*@
|
|
<video id="videoElement" autoplay></video>
|
|
<img src="~/AssetsClient/images/face.png" style="position: absolute; top: 0; right: 0; width: 360px; transform: scale(1.006); border-radius: 10px;" />
|
|
</div>
|
|
|
|
<div style="margin: 10px 0 0 0; text-align: center;">
|
|
<input type="button" class="btn btn-success take_snapshot1" style="display: none;" value="گرفتن عکس اول" onclick="take_snapshot1()" />
|
|
<input type="button" class="btn btn-success take_snapshot2" style="display: none;" value="گرفتن عکس دوم" onclick="take_snapshot2()" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="camera_close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="35" height="35">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-overlay"></div>
|
|
|
|
<script src="~/assetsclient/libs/cleave/cleave.min.js"></script>
|
|
<script src="~/AssetsClient/libs/jslib-html5-camera/jslib-html5-camera-photo.min.js"></script>
|
|
<script>
|
|
var antiForgeryToken = $('@Html.AntiForgeryToken()').val();
|
|
var takePictureAjax = `@Url.Page("./EmployeeUploadPicture", "TakePicture")`;
|
|
var hasPicture = `@(Model.HasPicture)` === "True" ? true : false;
|
|
var checkFace1 = `@(Model.HasPicture)` === "True" ? true : false;
|
|
var checkFace2 = `@(Model.HasPicture)` === "True" ? true : false;
|
|
var hasUploadedImage = `@(Model.HasUploadedImage)` === "True" ? true : false;
|
|
|
|
var hasErrorPic1 = false;
|
|
var hasErrorPic2 = false;
|
|
</script>
|
|
<script src="~/weights/face-api.js"></script>
|
|
<script src="~/assetsclient/pages/rollcall/js/ModalTakeImagesEdit.js?ver=@clientVersion"></script> |