Your IP : 216.73.216.79
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\bootstrap\Alert;
use yii\bootstrap\Modal;
/* @var $this yii\web\View */
/* @var $form yii\widgets\ActiveForm */
$this->title = yii::t('app', 'Profile');
$this->params['breadcrumbs'][] = 'Profile';
$this->params['extra-asset']['JS'][] = 'plugins/cropper/cropper.min.js';
$this->params['extra-asset']['CSS'][] = 'plugins/cropper/cropper.min.css';
$this->registerJs(<<<JS
var imgcrop = $('#image-crop-src')
imgcrop.cropper({
aspectRatio: 1,
preview: ".img-prev",
done: function(data) {
// Output the result data for cropping image.
}
});
var inputImage = $("#profileform-file");
if (window.FileReader) {
inputImage.change(function() {
var fileReader = new FileReader(),
files = this.files,
file;
if (!files.length) {
return;
}
file = files[0];
$('#editbutton').removeClass('hide')
if (/^image\/\w+$/.test(file.type)) {
fileReader.readAsDataURL(file);
fileReader.onload = function () {
imgcrop.cropper("reset", true).cropper("replace", this.result);
};
} else {
showMessage("Please choose an image file.");
}
});
} else {
inputImage.addClass("hide");
}
$("#zoomIn").click(function() {
imgcrop.cropper("zoom", 0.1);
});
$("#zoomOut").click(function() {
imgcrop.cropper("zoom", -0.1);
});
$("#rotateLeft").click(function() {
imgcrop.cropper("rotate", 45);
});
$("#rotateRight").click(function() {
imgcrop.cropper("rotate", -45);
});
$("#save").click(function() {
let base64 = imgcrop.cropper("getDataURL")
// Convert it to a blob to upload
$('#base64Image').val(base64);
$('#cropmodal').modal('hide');
});
JS
)
?>
<style>
.col-md-5{
margin-bottom:15px;
}
.col-md-4{
text-align:right;
margin-top : 0.5em;
}
.gradient-bg {
background: white;
/* background: #7F7FD5;
background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);*/
}
</style>
<div class="wrapper wrapper-content">
<div class="col-md-12">
<?php if (Yii::$app->session->hasFlash('success')): ?>
<div class="alert alert-success alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close"
type="button">x</button>
<?= Yii::$app->session->getFlash('success') ?>
</div>
<?php endif; ?>
<?php
if (Yii::$app->session->hasFlash('error')) {
echo Alert::widget([
'options' => [
'class' => 'alert-danger'
],
'body' => Yii::$app->session->getFlash('error')
]);
}
?>
<div class="widget-head-color-box gradient-bg p-sm text-center">
<?php
$form = ActiveForm::begin([
'options' => [
'class' => 'form-horizontal',
'enctype' => 'multipart/form-data'
],
'fieldConfig' => [
'template' => "{label}\n<div class=\"col-md-5\">{input}</div>\n<div class=\"col-md-offset-4 col-md-5\">{error}</div>"
]
]);
?>
<div class="text-center m-b">
<?php
if (strlen($staff->staff_photo) > 0) {
echo Html::img('@web/' . Yii::$app->params['avatarSetting']['avatarUploadPath'] . '/' . Yii::$app->user->identity->staff->id . '.jpg?' . time(), [
'class' => 'img-circle img-thumbnail',
'width' => '200',
'style' => 'height:200px'
]);
} else {
echo Html::img('@web/images/user_icon.png', [
'class' => 'img-circle img-thumbnail',
'width' => '200'
]);
}
?>
</div>
<div class="clearfix"></div>
</div>
<div class="widget-text-box">
<?= $form->field($model, 'file', ['labelOptions' => ['class' => 'control-label col-md-4']])->input('file')->label('<button id="editbutton" class="btn btn-success btn-sm btn-rounded hide" type="button" data-target="#cropmodal" data-toggle="modal"><i class="fa fa-crop"></i> Crop</button>'); ?>
<input type="hidden" name="fileBase64" id="base64Image">
<?= $form->field($model, 'username', ['labelOptions' => ['class' => 'control-label col-md-4']])->textInput(['readonly' => (isset($model->username) ? $model->username : ''), 'maxlength' => true]); ?>
<?= $form->field($model, 'fullname', ['labelOptions' => ['class' => 'control-label col-md-4']])->textInput(['maxlength' => true]) ?>
<?php //= $form->field($model, 'gender', ['labelOptions' => ['class' => 'control-label col-md-4']])->dropDownList(['L' => 'Lelaki', 'P' => 'Perempuan']) ?>
<?= $form->field($model, 'email', ['labelOptions' => ['class' => 'control-label col-md-4']])->textInput(['text' => (isset($model->email) ? $model->email : ''), 'maxlength' => true]); ?>
<?php //= $form->field($model, 'phone_no', ['labelOptions' => ['class' => 'control-label col-md-4']])->textInput(['maxlength' => true]) ?>
<div class="clearfix"></div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-md-12 text-right">
<?= Html::submitButton("<i class=\"glyphicon glyphicon-edit\"></i> " . Yii::t('app', 'Save'), ['class' => 'btn btn-primary']) ?>
</div>
</div>
<?php ActiveForm::end(); ?>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<?php
/* start modal */
Modal::begin([
'header' => Yii::t('app', 'Image editor'),
'size' => 'modal-md',
'id' => 'cropmodal',
'footer' => '<button class="btn btn-sm btn-default" id="zoomIn">Zoom In</button>' .
'<button class="btn btn-sm btn-default" id="zoomOut">Zoom out</button>' .
'<button class="btn btn-sm btn-default" id="rotateLeft">Rotate left</button>' .
'<button class="btn btn-sm btn-default" id="rotateRight">Rotate Right</button>' .
'<button class="btn btn-sm btn-primary" id="save">Save</button>'
]);
echo '<div class="row">';
echo '<div class="col-md-6"><h2>Image Crop</h2><div class="image-crop"><img id="image-crop-src" width="100%" /></div></div>';
echo '<div class="col-md-6"><h2>Preview</h2><div style="width:190px;height:190px;" class="img-prev img-preview"></div></div>';
echo '</div>';
echo '<br>';
echo '<div class="clearfix"></div>';
Modal::end();
?>