IMMREX7
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>School MIS</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{asset('plugins/bootstrap/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{asset('dist/css/main.css')}}">
<link rel="stylesheet" href="{{asset('dist/css/hm-style.css')}}">
<link rel="stylesheet" href="{{asset('dist/css/color_skins.css')}}">
<style type="text/css">
section {
margin-top: 65px;
}
.menu-items{
list-style-type: none;
justify-content: center;
align-items: center;
}
.item-list{
margin: 10px;
color: #fff;
}
.item-list-label{
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
color: #fff;
}
.item-list-select{
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.excel-data{
cursor: move;
}
.textfield{
background-color: #fcfcfc;
padding: 10px;
min-width: 200px;
height: 40px;
top: 150px;
left: 150px;
}
.resizable .resizers .resizer{
width: 5px;
height: 5px;
background: white;
border: 1px solid #000;
position: absolute;
}
.resizable .resizers .resizer.top-left {
left: -5px;
top: -5px;
cursor: nwse-resize; /*resizer cursor*/
}
.resizable .resizers .resizer.top-right {
right: -5px;
top: -5px;
cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-left {
left: -5px;
bottom: -5px;
cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-right {
right: -5px;
bottom: -5px;
cursor: nwse-resize;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #8c99e0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.middle-content{
width: 250px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.main-menu{
font-size:30px;
color: white;
cursor:pointer;
margin: 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body class="theme-purple ls-toggle-menu" style="background-color: #fcfcfc;">
<div class="page-loader-wrapper" style="display: none;" id="loader">
<div class="loader">
<div class="m-t-30"><img class="zmdi-hc-spin" src="https://online-login.online/dist/images/logo.svg" width="48" height="48" alt="schholMIS"></div>
<p>Please wait...</p>
</div>
</div>
<!-- Right Click -->
<div class="btn-group show" id="right_click" style="display: none;top:0px;left:0px;">
<div class="dropdown-menu dropdown-menu-right show">
<button class="dropdown-item" type="button" onclick="createTextBox()">TextBox</button>
<button class="dropdown-item" type="button" onclick="createImage()">Image</button>
<button class="dropdown-item" type="button" onclick="createBarcode()">Barcode</button>
</div>
</div>
<input type="hidden" value="" id="selectedId">
<!-- Left Click -->
<div class="btn-group show" id="left_click" style="display: none;top:0px;left:0px;">
<div class="dropdown-menu dropdown-menu-right show">
<?php $i=0;?>
@foreach($headerRow as $var)
<button class="dropdown-item" type="button" id="{{$var}}" onclick="insertValue(this.id)">{{$var}}</button>
<?php $i++;?>
@endforeach
</div>
</div>
<nav class="navbar p-l-5 p-r-5">
<ul class="nav navbar-nav navbar-left">
<li>
<div class="navbar-header">
<a href="javascript:void(0);" class="bars"></a>
<a class="navbar-brand" href="https://online-login.online/school"><img src="https://online-login.online/storage/schools/1/logo_1.png" width="50" alt="School MIS" style="margin-top: 10px;"></a>
</div>
</li>
<li class="middle-content">
<span onclick="openFont()"><i class="zmdi zmdi-format-color-text main-menu" ></i></span>
<span onclick="openSize()"><i class="zmdi zmdi-photo-size-select-small main-menu" ></i></span>
<span onclick="openColor()"><i class="zmdi zmdi-format-color-fill main-menu" ></i></span>
<span onclick="printDocument()"><i class="zmdi zmdi-print main-menu" ></i></span>
</li>
<li class="hidden-sm-down">
</li>
<li class="float-right">
<a href="javascript:void(0);" class="fullscreen hidden-sm-down" data-provide="fullscreen" data-close="true"><i class="zmdi zmdi-fullscreen"></i></a>
<a href="https://online-login.online/school/logout" class="mega-menu" data-close="true"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="zmdi zmdi-power"></i>
</a>
<form id="logout-form" action="https://online-login.online/school/logout" method="POST" style="display: none;">
<input type="hidden" name="_token" value="MnXlWg5ZcGKjBMF4EjFKjF2tYH1n1NNytMHw4HyS">
</form>
<!--<a href="sign-in.html" class="mega-menu" data-close="true"><i class="zmdi zmdi-power"></i></a>-->
<a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i class="zmdi zmdi-settings zmdi-hc-spin"></i></a>
</li>
</ul>
</nav>
<div id="fontNav" class="sidenav">
<a href="javascript:void(0)" style="padding-top: 50px;" class="closebtn" onclick="closeNav()">×</a>
<div class="row clearfix" style="margin-top: 20px;">
<ul class="menu-items menu-design">
<li class="item-list">Font Name </li>
<li>
<select class="form-control show-tick ms select2 item-list-select" onchange="changeFonts(this)" id="fontselect">
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="sans-serif">Sans-serif</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Times">Times</option>
</select>
</li>
<li class="item-list">Font Size </li>
<li class="item-list"><input type="text" id="font_size" value="14" min="10" max="100" onKeyUp="return changeFontSize()" style="width: 50px;"></li>
<li class="item-list"><input type="checkbox" id="mbold" name="bold"> Bold</li>
<li class="item-list"><input type="checkbox" id="mitalic" name="italic"> Italic</li>
<li class="item-list"><input type="checkbox" id="munderline" name="underline"> Underline</li>
<li class="item-list"><input type="checkbox" id="mstrikeout" name="strikeout"> Strikeout</li>
<li class="item-list">Text align </li>
<li>
<select class="form-control show-tick ms select2 item-list-select" onchange="changeAlign(this)" id="alignselect">
<option value="left">Left</option>
<option value="right">Right</option>
<option value="center">Center</option>
<option value="justify">Justify</option>
</select>
</li>
</ul>
</div>
</div>
<div id="sizeNav" class="sidenav">
<a href="javascript:void(0)" style="padding-top: 50px;" class="closebtn" onclick="closeSize()">×</a>
<div class="row clearfix" style="margin-top: 20px;">
<ul class="menu-items menu-design">
<li class="item-list">Width : </li>
<li class="item-list"><input type="text" id="font_width" value="200" min="10" max="100" onKeyUp="return changeWidth()" style="width: 100px;"></li>
<li class="item-list">Height : </li>
<li class="item-list"><input type="text" id="font_height" value="30" min="10" max="100" onKeyUp="return changeHeight()" style="width: 100px;"></li>
</ul>
</div>
</div>
<div id="colorNav" class="sidenav">
<a href="javascript:void(0)" style="padding-top: 50px;" class="closebtn" onclick="closeColor()">×</a>
<div class="row clearfix" style="margin-top: 20px;">
<ul class="menu-items menu-design">
<li class="item-list">Select Color : </li>
<li class="item-list"><input type="color" id="myColor"><button onclick="changeColor()">Done</button></li>
</ul>
</div>
</div>
<section class="col-sm-8 offset-sm-2" id="printContext">
<div class="content" id="print">
<img src="{{asset('storage/schools/'.$background)}}" alt="template design">
</div>
</section>
<div class="row clearfix col-sm-8 offset-sm-2" id="preview" style="display: none;">
<h4 >Preview</h4>
<img id="myCanvas" style="border:1px solid #d3d3d3;">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.js" type="text/javascript"></script>
<script>
function openFont() {
document.getElementById("fontNav").style.width = "250px";
}
function closeNav() {
document.getElementById("fontNav").style.width = "0";
}
function openSize() {
document.getElementById("sizeNav").style.width = "250px";
}
function closeSize() {
document.getElementById("sizeNav").style.width = "0";
}
function openColor() {
document.getElementById("colorNav").style.width = "250px";
}
function closeColor() {
document.getElementById("colorNav").style.width = "0";
}
function changeFontSize(){
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
if( document.getElementById("font_size").value != undefined){
element.style.fontSize = document.getElementById("font_size").value+"px";
}
}
}
function changeFonts(selectObject){
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
element.style.fontFamily = selectObject.value;
}
}
function changeWidth(selectObject){
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
element.style.width = document.getElementById("font_width").value+"px";
}
}
function changeHeight(selectObject){
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
element.style.height = document.getElementById("font_height").value+"px";
}
}
function changeAlign(selectObject){
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
element.style.textAlign = selectObject.value;
}
}
function changeColor(){
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
element.style.color = document.getElementById("myColor").value;
}
}
function printDocument() {
$('.resizers').hide();
$('#preview').show();
$(".resizable").css("background-color", "transparent");
$('#loader').show();
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
html2canvas(document.getElementById('printContext')).then(function(canvas) {
var myImage = canvas.toDataURL();
document.getElementById('myCanvas').src = canvas.toDataURL("image/png");
});
sendHtml();
}
</script>
<script type="text/javascript">
var notepad = document.getElementById("printContext");
notepad.addEventListener("contextmenu",function(event){
event.preventDefault();
var ctxMenu = document.getElementById("right_click");
ctxMenu.style.display = "block";
ctxMenu.style.position = "absolute";
ctxMenu.style.left = (event.pageX - 10)+"px";
ctxMenu.style.top = (event.pageY - 10)+"px";
},false);
notepad.addEventListener("click",function(event){
if(!isValued){
var ctxMenu = document.getElementById("left_click");
ctxMenu.style.display = "none";
ctxMenu.style.left = "0px";
ctxMenu.style.top = "0px";
}
isValued = false;
hideMenu();
},false);
</script>
<script type="text/javascript">
var id =1;
var isValued = false;
var notepad = document.getElementById("print");
function createImage(){
var x = document.createElement("div");
x.setAttribute("id", "element_"+id);
x.classList.add("resizable");
x.style.width = "100px";
x.style.height = "100px";
var img = document.createElement("img");
img.setAttribute("id", "image_student");
x.classList.add("excel-image");
img.classList.add("rounded-circle");
img.setAttribute("src", "{{asset('storage/schools/'.Auth::guard('school')->user()->idSchool.'/students/'.$firstValue['image'])}}");
img.style.width = "100px";
img.style.height = "100px";
var root = document.createElement("div");
root.classList.add("resizers");
root.setAttribute("id", "resizer_element_"+id);
var tl = document.createElement("div");
tl.classList.add("resizer");
tl.classList.add("top-left");
root.appendChild(tl);
var tr = document.createElement("div");
tr.classList.add("resizer");
tr.classList.add("top-right");
root.appendChild(tr);
var bl = document.createElement("div");
bl.classList.add("resizer");
bl.classList.add("bottom-left");
root.appendChild(bl);
var br = document.createElement("div");
br.classList.add("resizer");
br.classList.add("bottom-right");
root.appendChild(br);
x.appendChild(root);
x.appendChild(img);
notepad.appendChild(x);
moveDiv(id);
hideMenu();
id=id+1;
}
function createBarcode(){
var x = document.createElement("div");
x.setAttribute("id", "element_"+id);
x.classList.add("resizable");
x.style.width = "150px";
x.style.height = "40px";
var img = document.createElement("img");
x.classList.add("excel-bar");
img.setAttribute("id", "bar_element");
img.setAttribute("src", "data:image/png;base64,{{$firstValue['barcode']}}");
img.style.width = "150px";
img.style.height = "40px";
var root = document.createElement("div");
root.classList.add("resizers");
root.setAttribute("id", "resizer_element_"+id);
var tl = document.createElement("div");
tl.classList.add("resizer");
tl.classList.add("top-left");
root.appendChild(tl);
var tr = document.createElement("div");
tr.classList.add("resizer");
tr.classList.add("top-right");
root.appendChild(tr);
var bl = document.createElement("div");
bl.classList.add("resizer");
bl.classList.add("bottom-left");
root.appendChild(bl);
var br = document.createElement("div");
br.classList.add("resizer");
br.classList.add("bottom-right");
root.appendChild(br);
x.appendChild(root);
x.appendChild(img);
notepad.appendChild(x);
moveDiv(id);
hideMenu();
id=id+1;
}
function createTextBox(){
var x = document.createElement("div");
x.setAttribute("id", "element_"+id);
// x.classList.add("textfield");
x.style.width = "150px";
x.style.height = "30px";
x.classList.add("resizable");
x.addEventListener("click", function(event){
if (event.target !== this)
return;
isValued = true;
event.preventDefault();
document.getElementById("selectedId").value=this.id;
var ctxMenu = document.getElementById("left_click");
ctxMenu.style.display = "block";
ctxMenu.style.position = "absolute";
ctxMenu.style.left = (event.pageX - 100)+"px";
ctxMenu.style.top = (event.pageY - 50)+"px";
},false);
var root = document.createElement("div");
root.classList.add("resizers");
root.setAttribute("id", "resizer_element_"+id);
var tl = document.createElement("div");
tl.classList.add("resizer");
tl.classList.add("top-left");
root.appendChild(tl);
var tr = document.createElement("div");
tr.classList.add("resizer");
tr.classList.add("top-right");
root.appendChild(tr);
var bl = document.createElement("div");
bl.classList.add("resizer");
bl.classList.add("bottom-left");
root.appendChild(bl);
var br = document.createElement("div");
br.classList.add("resizer");
br.classList.add("bottom-right");
root.appendChild(br);
x.appendChild(root);
notepad.appendChild(x);
moveDiv(id)
hideMenu();
//resetMenu();
id=id+1;
}
function resetMenu(){
$("#mbold").prop("checked", false);
$("#mitalic").prop("checked", false);
$("#munderline").prop("checked", false);
$("#mstrikeout").prop("checked", false);
}
function applyDefaultStyle(){
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
if(document.getElementById("mbold").checked) {
// Checkbox is checked..
element.style.fontWeight = "bold";
} else {
// Checkbox is not checked..
element.style.fontWeight = "normal";
}
if(document.getElementById("mitalic").checked) {
// Checkbox is checked..
element.style.fontStyle = "italic";
} else {
// Checkbox is not checked..
element.style.fontStyle = "normal";
}
if(document.getElementById("munderline").checked) {
// Checkbox is checked..
element.style.fontStyle = "italic";
} else {
// Checkbox is not checked..
element.style.fontStyle = "normal";
}
if(document.getElementById("mstrikeout").checked) {
// Checkbox is checked..
element.style.fontStyle = "italic";
} else {
// Checkbox is not checked..
element.style.fontStyle = "normal";
}
if( document.getElementById("font_size").value != undefined){
element.style.fontSize = document.getElementById("font_size").value+"px";
}
element.style.width = document.getElementById("font_width").value+"px";
element.style.height = document.getElementById("font_height").value+"px";
element.style.color = document.getElementById("myColor").value;
element.style.fontFamily = document.getElementById("fontselect").value;
element.style.textAlign = document.getElementById("alignselect").value;
}
}
function hideMenu(){
var ctxMenu = document.getElementById("right_click");
ctxMenu.style.display = "none";
ctxMenu.style.left = "0px";
ctxMenu.style.top = "0px";
}
var dump = JSON.parse('<?php echo $firstValue;?>');
function insertValue(id){
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if( element != 'undefined' && dump[id] != null){
element.innerHTML = '<span class="excel-data" id="data_'+selectedId+'" data-src="'+id+'">'+dump[id]+'</span>';
var root = document.createElement("div");
root.classList.add("resizers");
root.setAttribute("id", "resizer_"+selectedId);
var tl = document.createElement("div");
tl.classList.add("resizer");
tl.classList.add("top-left");
root.appendChild(tl);
var tr = document.createElement("div");
tr.classList.add("resizer");
tr.classList.add("top-right");
root.appendChild(tr);
var bl = document.createElement("div");
bl.classList.add("resizer");
bl.classList.add("bottom-left");
root.appendChild(bl);
var br = document.createElement("div");
br.classList.add("resizer");
br.classList.add("bottom-right");
root.appendChild(br);
element.appendChild(root);
var ctxMenu = document.getElementById("left_click");
ctxMenu.style.display = "none";
ctxMenu.style.left = "0px";
ctxMenu.style.top = "0px";
applyDefaultStyle();
//addResizers()
}
}
function moveDiv(id){
var offset = [0,0];
var isDown = false;
var div =document.getElementById("element_"+id);
div.style.position = "absolute";
div.addEventListener('mousedown', function(e) {
//unselecteResizers();
$('.resizers').hide();
document.getElementById("resizer_"+this.id).style.display = "block";
document.getElementById("selectedId").value=this.id;
//resetMenu();
//addResizers();
isDown = true;
offset = [
div.offsetLeft - e.clientX,
div.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
if(isDown){
var ctxMenu = document.getElementById("left_click");
ctxMenu.style.display = "none";
ctxMenu.style.left = "0px";
ctxMenu.style.top = "0px";
}
isDown = false;
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
div.style.left = (mousePosition.x + offset[0]) + 'px';
div.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
}
</script>
<script type="text/javascript">
var checkbox = document.querySelector("input[name=bold]");
checkbox.addEventListener( 'change', function() {
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
if(this.checked) {
// Checkbox is checked..
element.style.fontWeight = "bold";
} else {
// Checkbox is not checked..
element.style.fontWeight = "normal";
}
}
});
</script>
<script type="text/javascript">
var checkbox = document.querySelector("input[name=italic]");
checkbox.addEventListener( 'change', function() {
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
if(this.checked) {
// Checkbox is checked..
element.style.fontStyle = "italic";
} else {
// Checkbox is not checked..
element.style.fontStyle = "normal";
}
}
});
</script>
<script type="text/javascript">
var checkbox = document.querySelector("input[name=strikeout]");
checkbox.addEventListener( 'change', function() {
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
if(this.checked) {
// Checkbox is checked..
element.style.textDecoration = "line-through";
} else {
// Checkbox is not checked..
element.style.textDecoration = "none";
}
}
});
</script>
<script type="text/javascript">
var checkbox = document.querySelector("input[name=underline]");
checkbox.addEventListener( 'change', function() {
var selectedId = document.getElementById("selectedId").value;
var element = document.getElementById(selectedId);
if(element != null){
if(this.checked) {
// Checkbox is checked..
element.style.textDecoration = "underline";
} else {
// Checkbox is not checked..
element.style.textDecoration = "none";
}
}
});
</script>
<script type="text/javascript">
var results = [];
function sendHtml(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type:"POST",
url: "{{url('school/exam/view')}}",
processData: false,
contentType: false,
data: JSON.stringify({ "excel_id" : <?php echo $excel->idExcel; ?>}),
success:function(data){
var obj = jQuery.parseJSON(data);
$.each(obj, function(key,value) {
var ids = document.querySelectorAll('.excel-data');
Array.prototype.forEach.call( ids, function( el, i ) {
var element = document.getElementById(el.id);
var obj = $('#'+el.id).data("src");
element.innerHTML = value[obj];
});
var element = document.getElementById('bar_element');
if(element != null)
element.src = 'data:image/png;base64,'+value['barcode'];
element = document.getElementById('image_student');
if(element != null)
element.src = "{{asset('storage/schools/'.Auth::guard('school')->user()->idSchool.'/students/')}}"+value['image'];
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
html2canvas(document.getElementById('printContext'), {logging:false}).then(function(canvas) {
var myImage = canvas.toDataURL();
storeResults(canvas.toDataURL("image/png"),value,key);
});
});
},
error: function(data){}
});
}
function storeResults(data,id,position){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var myObj =
{
"image" : data,
"data": id,
"position":position,
"idTemplate" : {{$template->idTemplate}}
}
$.ajax({
type:"POST",
url: "{{url('school/exam/generate')}}",
processData: false,
contentType: false,
data: JSON.stringify(myObj),
success:function(data){
if(data['count'] == {{$total - 1}})
{
$('#loader').hide();
window.location = "{{url('school/exam/report')}}";
}
},
error: function(data){
}
});
}
</script>
</html>
Copyright © 2021 -