401 lines
21 KiB
Plaintext
401 lines
21 KiB
Plaintext
@page
|
|
@model ServiceHost.Areas.Camera.Pages.IndexModel
|
|
@using System.Diagnostics
|
|
|
|
|
|
@{
|
|
string adminVersion = _0_Framework.Application.Version.AdminVersion;
|
|
|
|
Layout = "Shared/_Layout";
|
|
ViewData["Title"] = " - " + "حضور غیاب";
|
|
// <link href="~/assetscamera/css/index.css" rel="stylesheet" />
|
|
<link href="~/assetscamera/css/index.min.css" rel="stylesheet" />
|
|
}
|
|
|
|
@section Styles
|
|
{
|
|
<link rel="stylesheet" href="~/AssetsClient/css/webcam.css">
|
|
<style>
|
|
/* #my_camera,
|
|
#my_camera video {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
min-width: 100%;
|
|
min-height: 500px;
|
|
} */
|
|
|
|
#video {
|
|
/* width: 360px !important;
|
|
height: 360px !important; */
|
|
background-color: #000;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.title-logo {
|
|
color: #20a2a2;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.title-logo-mobile {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
/* margin: 0 0 40px 0; */
|
|
}
|
|
.logoutBtn {
|
|
background-color: #22a6a6;
|
|
padding: 7px 70px;
|
|
border-radius: 5px;
|
|
color: #ffffff !important;
|
|
}
|
|
</style>
|
|
}
|
|
|
|
<div id="loader" class="loader-container">
|
|
<div class="loader">
|
|
<svg version="1.1" class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 621.6 721.91" x="0px" y="0px" style="enable-background:new 0 0 97.4 71.4;" xml:space="preserve">
|
|
<defs>
|
|
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#30c1c1;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#087474;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<polygon class="cls-3 letter letter--gradient" 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="cls-1 letter letter--gradient" points="217.07 309.16 217.07 192.4 426.8 65.78 523.83 123.33 217.07 309.16" />
|
|
<polyline class="cls-2 letter letter--gradient" points="308.61 0 395.56 47.69 1.3 293.19 1.3 184.66 308.61 0" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="content" style="display: none">
|
|
<div class="keypad-section" id="keypadSection">
|
|
<div class="p-3">
|
|
<div class="row align-items-center">
|
|
<div class="col-2">
|
|
<div class="text-center">
|
|
<button type="button" class="" onclick="openPersonnelModal()" style="border: 1px solid #373a3d;background-color: #2b333f;border-radius: 10px;">
|
|
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="7" cy="9" r="3" fill="#8FFAFA" />
|
|
<circle cx="17" cy="9" r="3" fill="#8FFAFA" />
|
|
<circle cx="12" cy="9" r="4" fill="#23A8A8" />
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5685 18H19.895C20.4867 18 20.9403 17.4901 20.7966 16.9162C20.4284 15.4458 19.448 13 17 13C16.114 13 15.4201 13.3205 14.8781 13.7991C16.3858 14.7773 17.1654 16.4902 17.5685 18Z" fill="#8FFAFA" />
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.12197 13.7991C8.57989 13.3205 7.88609 13 7 13C4.55208 13 3.57166 15.4458 3.20343 16.9162C3.05971 17.4901 3.51335 18 4.10498 18H6.43155C6.83464 16.4902 7.61422 14.7773 9.12197 13.7991Z" fill="#8FFAFA" />
|
|
<path d="M12 14C15.7087 14 16.6665 17.301 16.9139 19.0061C16.9932 19.5526 16.5523 20 16 20H8C7.44772 20 7.00684 19.5526 7.08614 19.0061C7.33351 17.301 8.29134 14 12 14Z" fill="#23A8A8" />
|
|
</svg>
|
|
<p class="m-0" style="font-size: 14px; color: #ffffff">جستجو</p>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="text-center">
|
|
<img src="~/assetsclient/images/gozareshgir-gr.svg" width="50px" />
|
|
<h5 class="mt-1 title-logo title-logo-mobile">سامانه هوشمند گزارشگیر</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="text-center">
|
|
<a data-bs-toggle="modal" data-bs-target="#passwordModal">
|
|
<svg width="25" height="25" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<ellipse cx="6" cy="6" rx="6" ry="6" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 20 18)" fill="#2dbbbb" fill-opacity="0.50"/>
|
|
<path d="M7.7 12C7.7 8.52061 10.5206 5.7 14 5.7C17.4794 5.7 20.3 8.52061 20.3 12C20.3 15.4794 17.4794 18.3 14 18.3C10.5206 18.3 7.7 15.4794 7.7 12Z" stroke="#2dbbbb" stroke-opacity="0.50" stroke-width="0.6"/>
|
|
<path d="M8 18.9282C9.21615 19.6303 10.5957 20 12 20C13.4043 20 14.7838 19.6303 16 18.9282C17.2162 18.2261 18.2261 17.2162 18.9282 16C19.6303 14.7838 20 13.4043 20 12C20 10.5957 19.6303 9.21615 18.9282 8C18.2261 6.78385 17.2162 5.77394 16 5.0718C14.7838 4.36965 13.4043 4 12 4C10.5957 4 9.21615 4.36965 8 5.0718" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round"/>
|
|
<path d="M6 7L2 12M2 12L6 17M2 12H11" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round"/>
|
|
</svg>
|
|
<p style="font-size: 14px; color: #ffffff">خاموش</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h4 class="text-center text-white mt-2">لطفا کد پرسنلی خود را وارد کنید</h4>
|
|
<p id="errorMessage" class="errorMessage mt-2"></p>
|
|
</div>
|
|
<div class="keypadContainer">
|
|
|
|
<div class="keypad dark" tabindex="0">
|
|
<div class="keypad-input-field">
|
|
<div class="entered-numbers-wrapper">
|
|
<input type="hidden" id="inputField" readonly>
|
|
<div class="entered-numbers">
|
|
<div class="num"></div>
|
|
</div>
|
|
</div>
|
|
<div class="backspace">
|
|
<div class="hover-dot backspace-icon">
|
|
<i class="fa fa-times"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="keypad-numbers">
|
|
<div class="item-wrapper hover-dot">
|
|
<div class="item">
|
|
<h1>1</h1>
|
|
</div>
|
|
</div><div class="item-wrapper hover-dot">
|
|
<div class="item">
|
|
<h1>2</h1>
|
|
</div>
|
|
</div><div class="item-wrapper hover-dot">
|
|
<div class="item">
|
|
<h1>3</h1>
|
|
</div>
|
|
</div><div class="item-wrapper hover-dot">
|
|
<div class="item">
|
|
<h1>4</h1>
|
|
</div>
|
|
</div><div class="item-wrapper hover-dot">
|
|
<div class="item">
|
|
<h1>5</h1>
|
|
</div>
|
|
</div><div class="item-wrapper hover-dot">
|
|
<div class="item">
|
|
<h1>6</h1>
|
|
</div>
|
|
</div><div class="item-wrapper hover-dot">
|
|
<div class="item">
|
|
<h1>7</h1>
|
|
</div>
|
|
</div><div class="item-wrapper hover-dot">
|
|
<div class="item">
|
|
<h1>8</h1>
|
|
</div>
|
|
</div><div class="item-wrapper hover-dot">
|
|
<div class="item">
|
|
<h1>9</h1>
|
|
</div>
|
|
</div>
|
|
<div class="item-wrapper hover-dot" id="cleanBtn" style="border: 1px solid #ef4444;">
|
|
<div class="item">
|
|
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0001 6H3.00006V9C4.10463 9 5.00006 9.89543 5.00006 11V15C5.00006 17.8284 5.00006 19.2426 5.87874 20.1213C6.75742 21 8.17163 21 11.0001 21H13.0001C15.8285 21 17.2427 21 18.1214 20.1213C19.0001 19.2426 19.0001 17.8284 19.0001 15V11C19.0001 9.89543 19.8955 9 21.0001 9V6ZM10.5001 11C10.5001 10.4477 10.0523 10 9.50006 10C8.94778 10 8.50006 10.4477 8.50006 11V16C8.50006 16.5523 8.94778 17 9.50006 17C10.0523 17 10.5001 16.5523 10.5001 16V11ZM15.5001 11C15.5001 10.4477 15.0523 10 14.5001 10C13.9478 10 13.5001 10.4477 13.5001 11V16C13.5001 16.5523 13.9478 17 14.5001 17C15.0523 17 15.5001 16.5523 15.5001 16V11Z" fill="#ffffff" />
|
|
<path d="M10.0681 3.37059C10.1821 3.26427 10.4332 3.17033 10.7825 3.10332C11.1318 3.03632 11.5597 3 12 3C12.4403 3 12.8682 3.03632 13.2175 3.10332C13.5668 3.17033 13.8179 3.26427 13.9319 3.37059" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="item-wrapper hover-dot">
|
|
<div class="item">
|
|
<h1>0</h1>
|
|
</div>
|
|
</div><div class="item-wrapper hover-dot" onclick="enterPersonnelCode()" style="border: 1px solid #84cc16;">
|
|
<div class="item1">
|
|
تائید
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="desktopDisplay">
|
|
<div class="d-flex flex-column justify-content-center vh-100 text-center">
|
|
<div>
|
|
<img src="~/assetsclient/images/gozareshgir-gr.svg" width="110px" />
|
|
<h5 class="mt-2 title-logo">سامانه هوشمند گزارشگیر</h5>
|
|
</div>
|
|
<div>
|
|
<p class="text-white">برای ساعات حضور و غیاب میباست از گوشی استفاده نمایید!</p>
|
|
<a class="logoutBtn" asp-page="/Index" asp-page-handler="Logout">خروج</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mobileDisplay" class="container">
|
|
<div class="row text-center">
|
|
|
|
<div class="col-12">
|
|
<div class="row align-items-center mt-3">
|
|
<div class="col-2">
|
|
</div>
|
|
<div class="col-8">
|
|
<div style="">
|
|
<img src="~/assetsclient/images/gozareshgir-gr.svg" width="50px" />
|
|
<h5 class="mt-1 title-logo title-logo-mobile">سامانه هوشمند گزارشگیر</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<div class="text-center">
|
|
<a data-bs-toggle="modal" data-bs-target="#passwordModal">
|
|
<svg width="25" height="25" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<ellipse cx="6" cy="6" rx="6" ry="6" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 20 18)" fill="#2dbbbb" fill-opacity="0.50"/>
|
|
<path d="M7.7 12C7.7 8.52061 10.5206 5.7 14 5.7C17.4794 5.7 20.3 8.52061 20.3 12C20.3 15.4794 17.4794 18.3 14 18.3C10.5206 18.3 7.7 15.4794 7.7 12Z" stroke="#2dbbbb" stroke-opacity="0.50" stroke-width="0.6"/>
|
|
<path d="M8 18.9282C9.21615 19.6303 10.5957 20 12 20C13.4043 20 14.7838 19.6303 16 18.9282C17.2162 18.2261 18.2261 17.2162 18.9282 16C19.6303 14.7838 20 13.4043 20 12C20 10.5957 19.6303 9.21615 18.9282 8C18.2261 6.78385 17.2162 5.77394 16 5.0718C14.7838 4.36965 13.4043 4 12 4C10.5957 4 9.21615 4.36965 8 5.0718" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round"/>
|
|
<path d="M6 7L2 12M2 12L6 17M2 12H11" stroke="#ef4444" stroke-width="1.2" stroke-linecap="round"/>
|
|
</svg>
|
|
<p style="font-size: 14px; color: #ffffff">خاموش</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12 text-center mx-auto p-0">
|
|
<!--<div id="display" style="display: block; position: relative">
|
|
<video style="object-fit: cover" id="video" width="340" height="340" autoplay></video>
|
|
<img src="~/AssetsClient/images/face.png" style="position: absolute;top: 0;right: 0;width: 340px; border-radius: 100%;" />
|
|
</div> -->
|
|
<div class="w-100 d-flex align-items-center justify-content-center">
|
|
<div id="display" class="cameraSection">
|
|
<video style="position: absolute; top: 0px; right: 0; object-fit: cover" id="video" width="360" height="360" autoplay></video>
|
|
<img src="~/AssetsClient/images/face.png" class="faceImageCamera" />
|
|
</div>
|
|
</div>
|
|
@* <div id="display" style="position: relative;width: 1400px;height: 1400px;padding: 735px;display: flex;align-items: center;justify-content: center;">
|
|
<video style="object-fit: cover" id="video" width="1000" height="1000" autoplay></video>
|
|
<img src="~/AssetsClient/images/face.png" style="position: absolute;top: 35px;width: 1400px;border-radius: 1400px;transform: scale(1.006);" />
|
|
</div> *@
|
|
<p id="notFound" class="mt-2 text-white" style="font-size: 16px; display: none;">شناسایی نشد!</p>
|
|
<div id="users" class="mt-2 text-white" style="font-size: 16px;"></div>
|
|
<!-- <img src="./images/mobile-rollcall.png" alt=""> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="" style="margin: 10px 0 0 0;">
|
|
<div class="">
|
|
<input type="hidden" id="workshopId" asp-for="@Model.WorkshopId" value="@Model.WorkshopId" />
|
|
<div style="display: block;font-size: 16px;width: 100%;">
|
|
<div class="mb-2" id="btnOutOrIn">
|
|
</div>
|
|
|
|
<div id="reAnalyz" class="row" style="position: fixed;bottom: 12px;right: 12px;display: flex;justify-content: center;width: 100%;padding: 0 20px;">
|
|
<div class="col-6">
|
|
<a id="reloadRec" class="btn-start mb-1">شناسایی مجدد</a>
|
|
</div>
|
|
<div class="col-6">
|
|
<a onclick="roloadAgain()" id="roloadAgain" class="btn-start mb-1 d-none">انصراف</a>
|
|
</div>
|
|
@* <a id="reEnterCodeBox" class="btn-start">تلاش مجدد</a> *@
|
|
@* <a onclick="sendPersonelCodeToGetEmployeeId(86)" class="btn-start">تایید کد پرسنلی</a> *@
|
|
<!--<a id="reloadRec" class="btn btn-primary" style="border-radius: 15px;display: none;">شروع شناسایی </a>
|
|
<a id="notFound" class="btn btn-warning" style="border-radius: 15px;display: none;"> شناسایی نشد </a>-->
|
|
</div>
|
|
<div id="waiting" class="d-none" style=" display: none; color: #ffffff;">
|
|
<i class="ion-loading-a"> </i> آماده سازی...
|
|
</div>
|
|
<div id="recognizing" style="display: none; color: #ffffff;">
|
|
<i class="ion-loading-a"> </i> در حال شناسایی...
|
|
</div>
|
|
|
|
@* <div id="users" style="">
|
|
</div> *@
|
|
</div>
|
|
|
|
<!--
|
|
<div id="btn1">
|
|
<button id="detect" class="btn-start w-100">شروع شناسایی</button>
|
|
</div>
|
|
<div id="btn2" style="display: none;">
|
|
<button id="enter" class="btn-enter w-100">ثبت ورود</button>
|
|
</div>
|
|
<div id="btn3" style="display: none;">
|
|
<button id="leaveStartTime" class="btn-enter w-50 mx-1">ثبت شروع مرخصی ساعتی</button>
|
|
<button id="exit1" class="btn-exit w-50 mx-1">ثبت خروج</button>
|
|
</div>
|
|
<div id="btn4" style="display: none;">
|
|
<button id="leaveEndTime" class="btn-start w-100">ثبت پایان مرخصی ساعتی</button>
|
|
</div>
|
|
<div id="btn5" style="display: none;">
|
|
<button id="exit2" class="btn-exit w-100">ثبت خروج</button>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@* <div style="display: block; position: relative; width: 1600px; height: 200px;">
|
|
<div id="testDistance" dir="ltr">
|
|
</div>
|
|
</div> *@
|
|
|
|
@* <div id="imageData">
|
|
@foreach (var item in @Model.ImageDataList)
|
|
{
|
|
<img style="display: none" class="imageData" data-imageId="@item.Id@item.ImageNumber" src="data:image/jpeg;base64,@item.ImagePath" />
|
|
}
|
|
|
|
</div> *@
|
|
|
|
<div class="modal fade" id="MainModal" tabindex="-1" aria-labelledby="personalLabel" aria-hidden="true" style="display: none;">
|
|
<div class="modal-dialog modal-fullscreen-sm-down">
|
|
<div class="w-100 h-100" id="ModalContent">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Modal -->
|
|
<partial name="AddPasswordModal" />
|
|
|
|
@section Script
|
|
{
|
|
|
|
@* <script src="~/weights/face-api.js"></script> *@
|
|
@* <script src="@Model.faceApiJs"></script> *@
|
|
|
|
<script src="~/assetsclient/js/site.js?ver=@adminVersion"></script>
|
|
<script src="~/weights/face-api.js"></script>
|
|
|
|
<script>
|
|
const video = document.getElementById("video");
|
|
|
|
const waiting = document.getElementById("waiting");
|
|
const recognizing = document.getElementById("recognizing");
|
|
const reloadRec = document.getElementById("reloadRec");
|
|
const notFound = document.getElementById("notFound");
|
|
const workshopId = Number('@Model.WorkshopId');
|
|
const urlPath = "@Model.UrlPath";
|
|
|
|
var antiForgeryToken = $(`@Html.AntiForgeryToken()`).val();
|
|
var AjaxSendPersonelCodeToGetEmployeeId = `@Url.Page("./Index", "SendPersonelCodeToGetEmployeeId")`;
|
|
var AjaxEmployeeFlag = `@Url.Page("./Index", "EmployeeFlag")`;
|
|
var AjaxOut = `@Url.Page("./Index", "Out")`;
|
|
var AjaxInCom = `@Url.Page("./Index", "InCom")`;
|
|
|
|
</script>
|
|
|
|
@* <script src="~/assetscamera/js/index.js"></script> *@
|
|
<script src="~/assetscamera/js/index.min.js"></script>
|
|
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#form').attr('autocomplete', 'off');
|
|
$('#password').attr('autocomplete', 'new-password');
|
|
|
|
$('#password').on('keypress', function (e) {
|
|
var persianLetters = /[\u0600-\u06FF]/;
|
|
if (persianLetters.test(String.fromCharCode(e.which))) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
$('#passwordModal').on('shown.bs.modal', function () {
|
|
$('#password').focus();
|
|
});
|
|
|
|
$('#toggle-password').on('click', function () {
|
|
var passwordInput = $('#password');
|
|
var passwordFieldType = passwordInput.attr('type');
|
|
|
|
if (passwordFieldType === 'password') {
|
|
passwordInput.attr('type', 'text');
|
|
$(this).html(`
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="18" height="18">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
|
|
</svg>
|
|
`);
|
|
} else {
|
|
passwordInput.attr('type', 'password');
|
|
$(this).html(`
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="18" height="18">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
`);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
} |