add webcam to customer create/update

common/assets/WebcamjsAsset.php

@@ -0,0 +1,16 @@
+<?php
+namespace common\assets;
+
+use yii\web\AssetBundle;
+
+class WebcamjsAsset extends AssetBundle
+{
+	public $sourcePath = '@bower';
+	
+	public $js = [
+		'webcamjs/webcam.min.js'
+	];
+	
+	public $depends = [
+	];
+}

common/components/Image.php

@@ -31,6 +31,20 @@ class Image
 
         return Upload::getLink($fileName);
     }
+    public static function saveBinary($binary_data, $dir = '')
+    {
+        $fileName = Upload::getUploadPath($dir) . DIRECTORY_SEPARATOR . Upload::genFileName("jpg");
+
+        $uploaded = file_put_contents( $fileName, $binary_data );
+
+        if(!$uploaded){
+            throw new HttpException(500, 'Cannot upload file "'.$fileName.'". Please check write permissions.');
+        }
+
+        return Upload::getLink($fileName);
+    }
+
+    
     
     /**
      * 

common/components/Upload.php

@@ -47,4 +47,17 @@ class Upload
 
         return $fileName;
     }
+    
+    static function genFileName($extension, $namePostfix = true)
+    {
+    	$baseName =  "image";
+    	$fileName =  StringHelper::truncate(Inflector::slug($baseName), 32, '');
+    	if($namePostfix || !$fileName) {
+    		$fileName .= ($fileName ? '-' : '') . substr(uniqid(md5(rand()), true), 0, 10);
+    	}
+    	$fileName .= '.' . $extension;
+    
+    	return $fileName;
+    }
+    
 }

common/models/Customer.php

@@ -39,6 +39,9 @@ class Customer extends \yii\db\ActiveRecord
 	const SEX_MAN = 10;
 	const SEX_WOMAN = 20;
 	
+	
+	public $photo_data;
+	
     /**
      * @inheritdoc
      */
@@ -146,6 +149,11 @@ class Customer extends \yii\db\ActiveRecord
     			'id' => 'id_user'
     	] );
     }
+    public function getImage1(){
+    	return $this->hasOne ( Image::className (), [
+    			'id_image' => 'id_image'
+    	] );
+    }
     
     public function getCustomerCardNumber(){
     	$result = null;

composer.json

@@ -25,7 +25,8 @@
         "bower-asset/moment": "^2.10",
         "bower-asset/accounting": "^0.3.2",
         "dmstr/yii2-adminlte-asset": "2.*",
-        "bassjobsen/bootstrap-3-typeahead": "^4.0"
+        "bassjobsen/bootstrap-3-typeahead": "^4.0",
+        "bower-asset/webcamjs": "^1.0"
     },
     "require-dev": {
         "yiisoft/yii2-codeception": "*",

composer.lock

@@ -4,8 +4,8 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "hash": "acfc873fb659d08adc23d325138a56b2",
-    "content-hash": "28e2bce30da929c84bd2ac7cffd90f3f",
+    "hash": "fa82e6ba1233a366a5f044d19a7bd69d",
+    "content-hash": "ea0b9fcfc8a270415b8f9292af1c17d3",
     "packages": [
         {
             "name": "almasaeed2010/adminlte",
@@ -410,6 +410,42 @@
                 "remarkable"
             ]
         },
+        {
+            "name": "bower-asset/webcamjs",
+            "version": "v1.0.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/jhuckaby/webcamjs.git",
+                "reference": "1f164b822507977bf746838c66b9e4332764c062"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/jhuckaby/webcamjs/zipball/1f164b822507977bf746838c66b9e4332764c062",
+                "reference": "1f164b822507977bf746838c66b9e4332764c062",
+                "shasum": ""
+            },
+            "type": "bower-asset-library",
+            "extra": {
+                "bower-asset-main": "webcam.js",
+                "bower-asset-ignore": [
+                    "**/.*",
+                    "node_modules",
+                    "bower_components",
+                    "test",
+                    "tests",
+                    "build.sh",
+                    "demos",
+                    "flash"
+                ]
+            },
+            "license": [
+                "MIT"
+            ],
+            "description": "HTML5 Webcam Image Capture Library with Flash Fallback",
+            "keywords": [
+                "webcam"
+            ]
+        },
         {
             "name": "bower-asset/yii2-pjax",
             "version": "v2.0.4",

frontend/assets/CustomerAsset.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * @link http://www.yiiframework.com/
+ * @copyright Copyright (c) 2008 Yii Software LLC
+ * @license http://www.yiiframework.com/license/
+ */
+
+namespace frontend\assets;
+
+use yii\web\AssetBundle;
+
+/**
+ * @author Qiang Xue <qiang.xue@gmail.com>
+ * @since 2.0
+ */
+class CustomerAsset extends AssetBundle
+{
+    public $basePath = '@webroot';
+    public $baseUrl = '@web';
+    public $css = [
+    ];
+     public $js = [
+    	'js/customer.js',
+    ];
+    public $depends = [
+        'frontend\assets\AppAsset',
+        'common\assets\MomentAsset',
+        'common\assets\WebcamjsAsset',
+        'yii\jui\JuiAsset',
+    ];
+}

frontend/controllers/CustomerController.php

@@ -13,6 +13,7 @@ use yii\base\Object;
 use common\models\Card;
 use frontend\models\CustomerUpdate;
 use frontend\models\CustomerCreate;
+use common\models\Image;
 
 /**
  * CustomerController implements the CRUD actions for Customer model.
@@ -119,6 +120,7 @@ class CustomerController extends Controller
         }
         
         if ($model->load(Yii::$app->request->post()) && $model->save()) {
+        	$this->saveBinaryImage($model);
         	\Yii::$app->session->setFlash( 'success','Vendég létrehozva!' );
             return $this->redirect(['update', 'number' => $model->cardNumber]);
         } else {
@@ -160,6 +162,9 @@ class CustomerController extends Controller
         
         if ($model->load(Yii::$app->request->post()) && $model->save()) {
         	
+        	$this->saveBinaryImage($model);
+        	
+        	
         	\Yii::$app->session->setFlash( 'success','Vendég módosításai elmentve' );
             
         	return $this->redirect(['update', 'number' => $card->number]);
@@ -175,6 +180,24 @@ class CustomerController extends Controller
     }
     
 
+    protected function saveBinaryImage($model){
+    	if ( !empty($model->photo_data)){
+    		$encoded_data = $model->photo_data;
+    		$binary_data = base64_decode( $encoded_data );
+    		// save to server (beware of permissions)
+    		$path = \common\components\Image::saveBinary($binary_data,'profile');
+    	
+    		$image = new Image();
+    		$image->path = $path;
+    		$image->save();
+    		
+    		//todo delete old image
+    	
+    		$model->id_image = $image->id_image;
+    		$model->save(false);
+    	}
+    }
+    
     /**
      * Deletes an existing Customer model.
      * If deletion is successful, the browser will be redirected to the 'index' page.

frontend/models/CustomerCreate.php

@@ -100,6 +100,7 @@ class CustomerCreate extends \common\models\Customer
         		[['zip'], 'string', 'max' => 8],
         		
         		[['city'], 'string', 'max' => 30],
+        		[['photo_data'] ,'safe']
         		
 //         		[['email','phone'], 'validateEmailOrPhoneRequired' ],
         ];

frontend/models/CustomerUpdate.php

@@ -100,7 +100,8 @@ class CustomerUpdate extends \common\models\Customer
         		
         		[['zip'], 'string', 'max' => 8],
         		
-        		[['city'], 'string', 'max' => 30]
+        		[['city'], 'string', 'max' => 30],
+        		[['photo_data'] ,'safe']
         ];
     }
 

frontend/views/customer/_camera.php

@@ -0,0 +1,29 @@
+<?php
+use frontend\assets\CustomerAsset;
+use backend\models\CustomerCreate;
+CustomerAsset::register($this);
+$options = [];
+
+
+if ( $model instanceof frontend\models\CustomerCreate){
+	$options['image_data' ] = 'customercreate-photo_data';
+}else{
+}
+$this->registerJs ( 'new Customer( '. json_encode($options).');' );
+?>
+
+<style>
+.photo{
+	border: 1px solid gray;
+}
+</style>
+
+<div class="row">
+	<div class="col-md-4">
+		<div id="my_camera" class='photo pull-left' style="width: 160px; height: 120px; margin-right: 12px;"></div>
+		<div id="my_result" class='photo pull-left' style="width: 160px; height: 120px;"></div>
+	</div>
+	<div class="col-md-4">
+	</div>
+</div>
+<a id="snap" class="btn btn-primary">Fénykép</a>

frontend/views/customer/_form_create.php

@@ -16,7 +16,7 @@ use kartik\widgets\DatePicker;
 <div class="customer-form">
 
     <?php $form = ActiveForm::begin(); ?>
-
+<?= $form->field($model, 'photo_data')->hiddenInput()->label(false) ?>
 
 	<div class='row'>
 		<div class='col-md-3'>

frontend/views/customer/_form_update.php

@@ -18,7 +18,7 @@ use yii\base\Widget;
 
     <?php $form = ActiveForm::begin(); ?>
 
-
+	<?= $form->field($model, 'photo_data')->hiddenInput()->label(false) ?>
 	<div class='row'>
 		<div class='col-md-3'>
 		     <?php //echo $form->field($model, 'cardNumber')->widget(CardNumberTypeahead::className(),[]) ?>

frontend/views/customer/create.php

@@ -20,7 +20,7 @@ $card = $customer->card;
 <div class="customer-create">
 
 	<?php echo ReceptionWidget::widget( ['form' => $receptionForm, 'route' => ['customer/create'] ] )?>
-
+	<?php  echo $this->render('_camera',['model' => $model]); ?>
     <h1><?= Html::encode($this->title) ?></h1>
 
     <?= $this->render('_form_create', [

frontend/views/customer/update.php

@@ -4,10 +4,16 @@ use yii\helpers\Html;
 use frontend\components\ReceptionMenuWidget;
 use frontend\components\ReceptionCardNumberWidget;
 use frontend\components\ReceptionWidget;
+use common\assets\WebcamjsAsset;
+use frontend\assets\CustomerAsset;
+use common\components\Image;
+use yii\helpers\Url;
 
 /* @var $this yii\web\View */
 /* @var $model common\models\Customer */
 
+
+
 $this->title = Yii::t('common/customer', 'Update customer:' ) . ' ' . $model->name;
 $this->params['breadcrumbs'][] = ['label' => Yii::t('common/customer', 'Customers'), 'url' => ['index']];
 $this->params['breadcrumbs'][] = ['label' => $model->name, 'url' => ['view', 'id' => $model->id_customer]];
@@ -16,6 +22,8 @@ $this->params['breadcrumbs'][] = Yii::t('common/customer', 'Update');
 $customer = $model;
 $card = $customer->card;
 
+
+
 ?>
 <div class="customer-update">
 
@@ -23,9 +31,18 @@ $card = $customer->card;
 	<?php echo ReceptionWidget::widget( ['form' => $receptionForm, 'route' => ['customer/reception'] ] )?>
 
 
+	<?php  echo $this->render('_camera',['model' => $model]); ?>
+
     <h1><?= Html::encode($this->title) ?></h1>
+    
+    <?php if ( $model->image1 ){
+   		echo Html::img( Url::base( ) . Image::thumb( $model->image1->path,160,120 )); 	
+    }
+    	
+   	?>
     <?= $this->render('_form_update', [
         'model' => $model,
     ]) ?>
 
 </div>
+

frontend/web/js/customer.js

@@ -0,0 +1,43 @@
+function Customer(o){
+	
+	var defaults =  {
+			'image_data' : 'customerupdate-photo_data'
+			
+	};
+	
+	init();
+	
+	function init(){
+		
+		defaults = $.extend(defaults,o);
+		
+		 Webcam.set({
+		        width: 160,
+		        height: 120,
+		        dest_width: 320,
+		        dest_height: 240,
+		        image_format: 'jpeg',
+		        jpeg_quality: 90,
+//		        force_flash: false,
+//		        flip_horiz: true,
+//		        fps: 45
+		    });
+		
+		Webcam.attach( '#my_camera' );
+		
+		$("#snap").click(snap);
+		
+	}
+	
+	function snap(){
+		Webcam.snap( function(data_uri) {
+	        document.getElementById('my_result').innerHTML = '<img width="160" height="120" src="'+data_uri+'"/>';
+	        
+	        var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
+
+	        document.getElementById(defaults.image_data ).value = raw_image_data;
+	        
+	    } );
+	}
+	
+}