Skip to content

smart_core_connect / core-connect

Go to a project
Commit 45b027dd by Prasong Putichanchai
Options

update view card

parent dfe63f32
Showing with 214 additions and 182 deletions
www/src/Template/UserCards/view_card.ctp
<?php
use Cake\I18n\Time;
?>
<div class="owl-carousel owl-theme" data-plugin-options="{'items': 1}">
<?php foreach ($UserCards as $value) { #pr($value);die;?>
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 box-arrow">
<div>
<i class = "fa fa-angle-left prev" > </i>
</div>
<div class="owl-carousel owl-theme" data-plugin-options="{'items': 1}">
<?php foreach ($UserCards as $value) { ?>
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 box-arrow left">
<i class="fa fa-angle-left prev"> </i>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 box-card">
<div class="col-xs-10 col-sm-10 col-md-10">
<div class="box-card">
<div data-toggle="modal" data-target="#defaultModal" style="cursor: pointer; padding-right: 10px; padding-left: 10px;">
<div class="row">
<!-- <div class="col-xs-1">
</div> -->
<div class="col-xs-8">
<div style="font-size: 17px">
<br>
......@@ -23,7 +21,8 @@ use Cake\I18n\Time;
<?php echo $value['card_code'] ?>
</div>
<div>
<label style="font-size: 17px">ชื่อ</label> <?php echo $value['prefix_name_th'].$value['firstname_th'].' '.$value['lastname_th'] ?>
<label style="font-size: 17px">ชื่อ</label>
<?php echo $value['prefix_name_th'].$value['firstname_th'].' '.$value['lastname_th'] ?>
</div>
</div>
<div class="col-xs-4">
......@@ -31,15 +30,12 @@ use Cake\I18n\Time;
</div>
</div>
<div class="row">
<!-- <div class="col-xs-1">
</div> -->
<div class="col-xs-10">
<label style="font-size: 17px">ตำแหน่ง</label> <?php echo $value['position_name'] ?>
<label style="font-size: 17px">ตำแหน่ง</label>
<?php echo $value['position_name'] ?>
</div>
</div>
<div class="row text-center">
<!-- <div class="col-xs-1">
</div> -->
<br>
<div class="col-xs-6">
<?php
......@@ -57,8 +53,6 @@ use Cake\I18n\Time;
</div>
</div>
<div class="row text-center">
<!-- <div class="col-xs-1">
</div> -->
<div class="col-xs-6">
<label style="font-size: 17px">วันออกบัตร</label>
</div>
......@@ -68,11 +62,10 @@ use Cake\I18n\Time;
</div>
</div>
</div>
<!--/.box-card -->
<div class="col-xs-1 col-sm-1 col-md-1 box-arrow">
<div>
<i class = "fa fa-angle-right next" ></i>
</div>
<!--/.box-card -->
<div class="col-xs-1 col-sm-1 col-md-1 box-arrow right">
<i class="fa fa-angle-right next"></i>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group has-feedback">
......@@ -131,41 +124,52 @@ use Cake\I18n\Time;
</div>
</div>
</div>
<!--/.col-xs-12 -->
</div>
<!--/.row -->
<?php } ?>
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 box-arrow">
<i class = "fa fa-angle-left prev" > </i>
<div class="col-xs-12">
<div class="col-xs-1 col-sm-1 col-md-1 box-arrow left">
<i class="fa fa-angle-left prev"> </i>
</div>
<div class="col-xs-9 col-sm-9 col-md-9">
<div class="col-xs-10 col-sm-10 col-md-10">
<img src="/img/core/img/bloc-plus@3x.png" class="img-responsive" style="width: 100%">
</div>
<div class="col-xs-1 col-sm-1 col-md-1 box-arrow"></div>
<div class="col-xs-1 col-sm-1 col-md-1 box-arrow right"></div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<?php echo $this->Form->create('UserCards', ['id' => 'frmSignIn', 'type' => 'file', 'onsubmit' => 'return check();']); ?>
<?php echo $this->Form->create('UserCards', [
'id' => 'frmSignIn',
'type' => 'file',
'onsubmit' => 'return check();',
'url' => ['controller' => 'user-cards', 'action' => 'view-card']
]); ?>
<div class="form-group has-feedback">
<div class="col-xs-12 col-sm-12 col-md-12">
<?php echo $this->Flash->render(); ?>
<?php echo $this->Form->hidden('UserCards.user_id', ['class' => 'form-control-reg border-bottom-from label-text-sub required', 'id' => 'userId', 'type' => 'text', 'placeholder' => 'USERNAME']); ?>
<?php echo $this->Form->hidden('UserCards.organize_id', ['class' => 'form-control-reg border-bottom-from label-text-sub required', 'id' => 'organize_id', 'type' => 'text', 'label' => __('ไอดีใช้งาน'), 'placeholder' => 'USERNAME', 'required']); ?>
<?php echo $this->Form->input('UserCards.organize_code', ['class' => 'form-control-reg border-bottom-from label-text-sub required', 'id' => 'organize_code', 'type' => 'text', 'label' => __('Company Code'), 'placeholder' => 'Company Code', 'required']); ?>
<label id = "nameorg_th" style="color: green"></label>
<label id = "noorg_th" style="color: red"></label>
<label id="nameorg_th" style="color: green"></label>
<label id="noorg_th" style="color: red"></label>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-xs-12 col-sm-12 col-md-12">
<?php echo $this->Form->input('UserCards.employee', ['class' => 'form-control-reg border-bottom-from label-text-sub required', 'id' => 'employee', 'type' => 'text', 'label' => __('Ref 1'), 'placeholder' => 'Ref 1', 'disabled']); ?>
<label id = "nameemp_th" style="color: green"></label>
<label id = "noepm_th" style="color: red"></label>
<label id="nameemp_th" style="color: green"></label>
<label id="noepm_th" style="color: red"></label>
</div>
</div>
<div class="form-group has-feedback bootstrap-iso">
<div class="col-xs-12 col-sm-12 col-md-12">
<label class="label-text-sub"><?php echo __('Ref 2');?></label>
<input type="text" name="UserCards[birthdate]" id="date" placeholder="Ref 2" value="" readonly placeholder="DD-MM-YYYY" data-date-format="mm/dd/yyyy" class="form-control-reg border-bottom-from" disabled>
<label class="label-text-sub">
<?php echo __('Ref 2');?>
</label>
<input type="text" name="UserCards[birthdate]" id="date" placeholder="Ref 2" value="" readonly placeholder="DD-MM-YYYY" data-date-format="mm/dd/yyyy"
class="form-control-reg border-bottom-from" disabled>
<span class="glyphicon glyphicon-calendar form-control-feedback"></span>
</div>
</div>
......@@ -176,21 +180,20 @@ use Cake\I18n\Time;
</div>
</div>
</div>
</div>
<div class="row">
<!--/.row -->
</div>
<!--/.owl-carousel -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
<div class="modal-dialog box-ads">
<a class="close-modal" data-dismiss="modal">X </a>
<div class="container login-container">
<div class = "">
<div class="">
<div class="owl-carousel owl-theme" data-plugin-options="{'items': 1}">
<div class = "row rotate270 form_1">
<div class="row rotate270 form_1">
<?php echo $this->Html->image('/img/core/img/card-bg-front@3x.png', array('div' => false, 'class' => 'img-responsive img-rounded','style' => 'position: absolute;')); ?>
<div class="row date-name">
<!-- <div class="col-xs-1">
</div> -->
<div class="col-xs-8 ">
<br>
<div>
......@@ -200,7 +203,8 @@ use Cake\I18n\Time;
<?php echo $value['card_code'] ?>
</div>
<div>
<labe>ชื่อ</label> <?php echo $value['prefix_name_th'].$value['firstname_th'].' '.$value['lastname_th'] ?>
<labe>ชื่อ</label>
<?php echo $value['prefix_name_th'].$value['firstname_th'].' '.$value['lastname_th'] ?>
</div>
</div>
<div class="col-xs-4">
......@@ -208,15 +212,12 @@ use Cake\I18n\Time;
</div>
</div>
<div class="row date-position">
<!-- <div class="col-xs-1">
</div> -->
<div class="col-xs-12">
<label>ตำแหน่ง</label> <?php echo $value['position_name'] ?>
<label>ตำแหน่ง</label>
<?php echo $value['position_name'] ?>
</div>
</div>
<div class="row text-center date-time">
<!-- <div class="col-xs-1">
</div> -->
<div class="col-xs-6">
<?php
$now = new Time($value['date_issued']);
......@@ -233,8 +234,6 @@ use Cake\I18n\Time;
</div>
</div>
<div class="row text-center date-label">
<!-- <div class="col-xs-1">
</div> -->
<div class="col-xs-6">
<label>วันออกบัตร</label>
</div>
......@@ -255,35 +254,35 @@ use Cake\I18n\Time;
</div>
</div>
</div>
</div>
<style>
</div>
</div>
<style>
#alertBox {
position:relative;
width:300px;
min-height:100px;
position: relative;
width: 300px;
min-height: 100px;
/*margin-top:50px;*/
border:1px solid #666;
background-color:#fff;
background-repeat:no-repeat;
background-position:20px 30px;
border: 1px solid #666;
background-color: #fff;
background-repeat: no-repeat;
background-position: 20px 30px;
left: 0;
right: 0;
top: 100px;
z-index: 2;
}
#modalContainer > #alertBox {
position:fixed;
#modalContainer>#alertBox {
position: fixed;
}
#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:#000;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
margin: 0;
font: bold 0.9em verdana, arial;
background-color: #000;
color: #FFF;
border-bottom: 1px solid #000;
padding: 2px 0 2px 5px;
}
#alertBox p {
......@@ -295,92 +294,109 @@ use Cake\I18n\Time;
}
#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:7px;
border:0 none;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#000;
display: block;
position: relative;
margin: 5px auto;
padding: 7px;
border: 0 none;
width: 70px;
font: 0.7em verdana, arial;
text-transform: uppercase;
text-align: center;
color: #FFF;
background-color: #000;
border-radius: 3px;
text-decoration:none;
text-decoration: none;
}
/* unrelated styles */
#mContainer {
position:relative;
width:600px;
margin:auto;
padding:5px;
border-top:2px solid #000;
border-bottom:2px solid #000;
font:0.7em verdana,arial;
}
h1,h2 {
margin:0;
padding:4px;
font:bold 1.5em verdana;
border-bottom:1px solid #000;
position: relative;
width: 600px;
margin: auto;
padding: 5px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
font: 0.7em verdana, arial;
}
h1,
h2 {
margin: 0;
padding: 4px;
font: bold 1.5em verdana;
border-bottom: 1px solid #000;
text-align: center;
}
code {
font-size:1.2em;
color:#069;
font-size: 1.2em;
color: #069;
}
#credits {
position:relative;
margin:25px auto 0px auto;
width:350px;
font:0.7em verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
padding-top:4px;
position: relative;
margin: 25px auto 0px auto;
width: 350px;
font: 0.7em verdana;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
height: 90px;
padding-top: 4px;
}
#credits img {
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
float: left;
margin: 5px 10px 5px 0px;
border: 1px solid #000000;
width: 80px;
height: 79px;
}
.important {
background-color:#F5FCC8;
padding:2px;
background-color: #F5FCC8;
padding: 2px;
}
code span {
color:green;
color: green;
}
</style>
<style>
.box-card{
</style>
<style>
.box-card {
border: 1px solid #ccc;
height: 200px;
margin-top: 10px;
border-radius: 20px;
box-shadow: 2px 2px 4px #ccc;
margin-bottom: 10px;
}
.box-arrow{
font-size:36px;
}
.box-arrow {
font-size: 36px;
height: 200px;
padding-top:20%;
padding-top: 20%;
cursor: pointer;
}
.box-ads{
.box-arrow.left {
padding-right: 0px;
text-align: right;
}
.box-arrow.right {
padding-left: 0px;
}
.box-ads {
width: 1%;
display: table;
margin: auto;
......@@ -388,9 +404,10 @@ use Cake\I18n\Time;
padding-top: 10px;
margin-top: 5px;
}
.box-ads .close-modal{
position:absolute;
top:0;
.box-ads .close-modal {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
......@@ -404,52 +421,54 @@ use Cake\I18n\Time;
text-align: center;
z-index: 9999;
}
.box-ads .close-modal:hover{
.box-ads .close-modal:hover {
text-decoration: none;
}
.rotate270 .row{
.rotate270 .row {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: rl-tb;
position: absolute;
font-size: 30px;
}
}
.form_1 .date-name{
.form_1 .date-name {
width: 500px;
margin: 55% 0% 0% -40%;
border-bottom:0px solid red;
}
border-bottom: 0px solid red;
}
.date-name div div{
height:35px;
}
.date-name div div {
height: 35px;
}
.form_1 .date-position{
.form_1 .date-position {
width: 500px;
margin: 70% 0% 0% -15%;
border-bottom:0px solid #000;
}
border-bottom: 0px solid #000;
}
.form_1 .date-time{
.form_1 .date-time {
width: 500px;
margin: 70% 0% 0% 10%;
border-bottom:0px solid #000;
}
border-bottom: 0px solid #000;
}
.form_1 .date-label{
.form_1 .date-label {
width: 500px;
margin: 70% 0% 0% 20%;
border-bottom:0px solid #000;
}
</style>
border-bottom: 0px solid #000;
}
</style>
<?php $this->append('scriptBottom'); ?>
<script>
<?php $this->append('scriptBottom'); ?>
<script>
var ALERT_TITLE = "";
var ALERT_BUTTON_TEXT = "Ok";
......@@ -458,6 +477,7 @@ use Cake\I18n\Time;
createCustomAlert(txt);
}
}
function createCustomAlert(txt) {
d = document;
if (d.getElementById("modalContainer"))
......@@ -495,16 +515,18 @@ use Cake\I18n\Time;
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
function ful() {
alert('Alert this pages');
}
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop:false,
items:1,
rewindNav : false,
onTranslated:callBack
loop: false,
items: 1,
rewindNav: false,
onTranslated: callBack
});
owl = $('.owl-carousel').owlCarousel();
$(".prev").click(function () {
......@@ -515,12 +537,12 @@ use Cake\I18n\Time;
owl.trigger('next.owl.carousel');
});
function callBack(){
if($('.owl-carousel .owl-item').last().hasClass('active')){
function callBack() {
if ($('.owl-carousel .owl-item').last().hasClass('active')) {
$('.next').hide();
$('.prev').show();
}else if($('.owl-carousel .owl-item').first().hasClass('active')){
} else if ($('.owl-carousel .owl-item').first().hasClass('active')) {
$('.prev').hide();
$('.next').show();
}
......@@ -529,68 +551,78 @@ use Cake\I18n\Time;
var organize_id = $("#organize_id");
var employee = $("#employee");
var date = $("#date");
$(document).ready(function() {
$("#organize_code").on('change',function(){
$(document).ready(function () {
$("#organize_code").on('change', function () {
// alert(moment("05/22/2012", 'MM/DD/YYYY',true).isValid()); //true
var organize_code = $("#organize_code").val();
$('#employee').attr("disabled",true);
$('#date').attr("disabled",true);
$('#checkbutton').attr("disabled",true);
$('#employee').attr("disabled", true);
$('#date').attr("disabled", true);
$('#checkbutton').attr("disabled", true);
organize_id.val('');
employee.val('');
date.val('');
$.post("/UserCards/checkOrg", {organize_code: organize_code}, function(data) {
if(data!='false'){
$.post("/UserCards/checkOrg", {
organize_code: organize_code
}, function (data) {
if (data != 'false') {
data = jQuery.parseJSON(data);
if(data['chkuser'] == true){
$("#noorg_th").text('ลงทะเบียนกับ '+data[0]['org_name_th']+' แล้ว');
if (data['chkuser'] == true) {
$("#noorg_th").text('ลงทะเบียนกับ ' + data[0]['org_name_th'] +
' แล้ว');
$("#nameorg_th").text('');
$('#employee').attr("disabled",true);
$('#employee').attr("disabled", true);
organize_id.val('');
employee.val('');
}else if(data['chkuser'] == false){
} else if (data['chkuser'] == false) {
$("#nameorg_th").text(data[0]['org_name_th']);
$("#noorg_th").text('');
$("#checkbutton").removeAttr("disabled");
$("#employee").removeAttr("disabled");
organize_id.val(data[0]['id']);
}
}else{
} else {
$("#noorg_th").text('ไม่พบข้อมูล');
$("#nameorg_th").text('');
$('#employee').attr("disabled",true);
$('#employee').attr("disabled", true);
organize_id.val('');
employee.val('');
}
});
});
$("#employee").on('change',function(){
$("#employee").on('change', function () {
var employee_val = employee.val();
var organize_code = $("#organize_code").val();
$('#date').attr("disabled",true);
$('#date').attr("disabled", true);
date.val('');
$.post("/UserCards/checkEmp", {employee_val: employee_val,organize_code: organize_code}, function(data) {
if(data!='false'){
$.post("/UserCards/checkEmp", {
employee_val: employee_val,
organize_code: organize_code
}, function (data) {
if (data != 'false') {
data = jQuery.parseJSON(data);
if(data['chkuser'] == true){
if (data['chkuser'] == true) {
$("#noepm_th").text('ลงทะเบียนแล้ว');
$("#nameemp_th").text('');
$('#date').attr("disabled",true);
$('#date').attr("disabled", true);
date.val('');
}else if(data['chkuser'] == false){
$("#nameemp_th").text(data['prefix_name_th']+data['firstname_th']+' '+data['lastname_th']);
} else if (data['chkuser'] == false) {
$("#nameemp_th").text(data['prefix_name_th'] + data['firstname_th'] +
' ' + data['lastname_th']);
$("#noepm_th").text('');
$("#date").removeAttr("disabled");
}
}else{
$("#noepm_th").text('"ไม่พบข้อมูลที่ต้องการ" กรุณากรอกรหัสข้อมูลที่ถูกต้องและกดตรวจสอบ');
} else {
$("#noepm_th").text(
'"ไม่พบข้อมูลที่ต้องการ" กรุณากรอกรหัสข้อมูลที่ถูกต้องและกดตรวจสอบ'
);
$("#nameemp_th").text('');
$('#date').attr("disabled",true);
$('#date').attr("disabled", true);
date.val('');
}
});
});
});
function check() {
if (employee.val() == '') {
alert('กรุณากรอก Ref1');
......@@ -603,10 +635,10 @@ use Cake\I18n\Time;
return false;
}
}
$(document).ready(function(){
var date_input=$('input[id="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
$(document).ready(function () {
var date_input = $('input[id="date"]'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
......@@ -614,5 +646,6 @@ use Cake\I18n\Time;
};
date_input.datepicker(options);
})
</script>
<?php $this->end();?>
\ No newline at end of file
</script>
<?php $this->end();?>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment