274 lines
8.2 KiB
Plaintext
274 lines
8.2 KiB
Plaintext
@page "{Transaction_UID}"
|
|
@using System.Text.Json
|
|
@using Syncfusion.EJ2
|
|
@model EnotaryoPH.Web.Pages.Participant.VideoCall.RoomModel
|
|
@{
|
|
Layout = "_Blank";
|
|
}
|
|
|
|
@section Head {
|
|
<style>
|
|
|
|
.modal-dialog-right {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: auto;
|
|
right: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 350px; /* Adjust the width as needed */
|
|
height: 100%;
|
|
}
|
|
|
|
.modal-content-right {
|
|
border-radius: 0;
|
|
height: 100vh;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.list-group {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.list-group-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: #007bff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.modal-header.draggable {
|
|
cursor: move;
|
|
}
|
|
</style>
|
|
|
|
<link href="~/lib/ej2/css/bootstrap5.3.css" rel="stylesheet" />
|
|
<script src="~/lib/ej2/js/ej2.min.js"></script>
|
|
<script type="text/javascript">
|
|
var pdfViewer;
|
|
window.onload = function () {
|
|
pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
|
|
|
|
document.getElementById('btnUpdateFormFields').onclick = function () {
|
|
debugger;
|
|
let formFieldCollections = pdfViewer.formFieldCollections;
|
|
let otherFormFieldDetails = formFieldCollections.filter(formField => formField.customData.author === 'mangjose');
|
|
let currentFormFieldDetails = formFieldCollections.filter(formField => formField.customData.author === 'andrew');
|
|
}
|
|
}
|
|
|
|
function formFieldClick(arg) {
|
|
}
|
|
|
|
function documentLoaded(arg) {
|
|
}
|
|
|
|
|
|
</script>
|
|
}
|
|
<div class="vh-100" id="videoGrid-container"></div>
|
|
|
|
<input type="hidden" id="Participants" value="@(System.Web.HttpUtility.JavaScriptStringEncode(JsonSerializer.Serialize(Model.Participants)).Replace("\\", ""))" />
|
|
<input type="hidden" asp-for="CommunicationUserToken" />
|
|
<input type="hidden" asp-for="CommunicationUserId" />
|
|
<input type="hidden" asp-for="CommunicationRoomId" />
|
|
<input type="hidden" asp-for="DisplayName" />
|
|
<input type="hidden" asp-for="ParticipantType" />
|
|
|
|
<form method="post" asp-page-handler="StartRecording">
|
|
<input type="hidden" asp-for="ServerCallID" />
|
|
<input type="hidden" asp-for="Transaction_UID" />
|
|
</form>
|
|
|
|
|
|
<div class="modal fade right" id="RightSidebarModal" tabindex="-1" role="dialog" aria-labelledby="rightSidebarModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-right" role="document">
|
|
<div class="modal-content modal-content-right">
|
|
<!-- Modal Header -->
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="rightSidebarModalLabel">Participants</h5>
|
|
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
<!-- Modal Body -->
|
|
<div class="modal-body">
|
|
<ul class="list-group" id="ParticipantListGroup">
|
|
<li class="list-group-item">
|
|
<div class="avatar">JD</div>
|
|
John Doe
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="avatar">SM</div>
|
|
Sarah Miller
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="avatar">AM</div>
|
|
Alex Martin
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="avatar">CW</div>
|
|
Chris Wilson
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template id="TemplateParticipantItem">
|
|
<li class="list-group-item participant-item" data-participant-uid="">
|
|
<div class="avatar participant-avatar">JD</div>
|
|
<span class="participant-name">John Doe</span>
|
|
</li>
|
|
</template>
|
|
|
|
|
|
<div class="modal fade " id="DraggableModal" data-bs-backdrop="false">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
|
|
<!-- Modal Header -->
|
|
<div class="modal-header draggable">
|
|
<h4 id="SignatoryName" class="modal-title">Signatory Name</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
<!-- Modal Body -->
|
|
<div class="modal-body">
|
|
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#tabIdentification">Identification</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tabSelfie">Selfie</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tabOTP">OTP</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" href="#tabDetails">Details</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content mt-2">
|
|
<div id="tabIdentification" class="container tab-pane active">
|
|
<img id="IdentificationImage" src="https://placehold.co/600x400?text=World" alt="Image 2" class="img-fluid"
|
|
style="height:350px;">
|
|
</div>
|
|
<div id="tabSelfie" class="container tab-pane fade">
|
|
<img id="SelfieImage" src="https://placehold.co/600x400?text=Hello" alt="Image 1" class="img-fluid">
|
|
</div>
|
|
<div id="tabOTP" class="container tab-pane fade">
|
|
<span id="Otp" class="h1">user has not yet entered OTP</span>
|
|
</div>
|
|
<div id="tabDetails" class="container tab-pane fade">
|
|
<div class="mb-3">
|
|
<label for="device" class="form-label">Device</label>
|
|
<input type="text" class="form-control" id="device" placeholder="Android" readonly="readonly">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="location" class="form-label">Location</label>
|
|
<input type="text" class="form-control" id="location" placeholder="Metro Manila" readonly="readonly">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div class="modal-footer justify-content-start">
|
|
<div class="flex-fill">
|
|
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Approve</button>
|
|
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Reject</button>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="PdfViewer" data-bs-backdrop="false" data-bs-keyboard="false">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header draggable">
|
|
<h4 class="modal-title">@Model.DocumentType</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<ejs-pdfviewer id="pdfviewer" enableFormDesigner="true" enableFormDesignerToolbar="true" designerMode="true"
|
|
documentPath="https://localhost:7121/Participant/VideoCall/Room/@Model.Transaction_UID?handler=Document"
|
|
style="height:641px;"
|
|
documentLoad="documentLoaded"
|
|
formFieldClick="formFieldClick">
|
|
</ejs-pdfviewer>
|
|
</div>
|
|
|
|
<div class="modal-footer justify-content-start">
|
|
<div class="flex-fill">
|
|
<button id="btnUpdateFormFields" class="btn btn-primary">Ready for Signature</button>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="OtpForm">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
|
|
<div class="modal-header draggable">
|
|
<h4 class="modal-title">Enter your One Time Password</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<input type="text" id="Otp" class="form-control" placeholder="Enter your One-Time-Password" asp-action="Otp" />
|
|
</div>
|
|
|
|
<div class="modal-footer justify-content-start">
|
|
<div class="flex-fill">
|
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Submit</button>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<ejs-scripts></ejs-scripts>
|
|
<script type="text/javascript" src="/dist/_jfa.js"></script>
|
|
<script type="text/javascript" src="/lib/azure-communication-service/callComposite.js"></script>
|
|
<script src="~/Pages/Participant/VideoCall/Room.cshtml.js" asp-append-version="true"></script>
|
|
}
|