index.php 8.22 KB
<?php
    /**
     * @var \common\models\Author $user
     * @var \common\models\Book $books
     * @var \yii\web\View $this
     */
    
    use frontend\helpers\Url;
    use frontend\models\ChangePassword;
    use yii\web\View;
    use yii\widgets\ActiveForm;
    use yii\widgets\LinkPager;
    use yii\widgets\ListView;
    
    $this->params[ 'breadcrumbs'][] = 'Особистий кабінет';
    $js = <<<JS
    var maxFileSize = 3000000;
    var types = [
        'image/png',
        'image/jpeg',
        'image/jpg',
        'image/gif'
    ];
     var removeFileSelector = document.getElementsByClassName('remove-img-file')[0];
     var fileInput = document.getElementById('qa');
      fileInput.addEventListener('change', function(event){
        event.preventDefault();
        var file = event.target.files[0];
        if(validateFiles(file)){
            displayImage(file);
        }

    });
     function validateFiles(file) {
            if (types.indexOf(file.type) !== -1 && file.size < maxFileSize) {
                return true;
            }else{
                return false;

            }
    }

    function displayImage(file) {

            var fr = new FileReader();
            console.log(fr);
            fr.onload = (function(file) {
                return function() {
                    console.log(this.result);
                    var selector = $(".img-file");
                    selector.find('img').attr('src', this.result);
                    selector.addClass('vis_');
                }
            })(file);
            fr.readAsDataURL(file);
//            imageFile = file;
    }
    
     removeFileSelector.addEventListener('click', function(event) {
        console.log('remove');
       event.preventDefault();
       document.getElementsByClassName('img-file')[0].classList.remove('vis_');
       fileInput.value = '';
    });
JS;
$this->registerJs($js, View::POS_READY);
$model = new ChangePassword();
?>


<section class="section-books-support section-block-account">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="title-blocks title-support">Особистий кабінет</div>
            </div>
        </div>
        <div class="row">
            <div class="hidden-xs col-sm-2"></div>
            <div class="col-xs-12 col-sm-8 support-form-col">
                <div class="style tabs-account">
                    <ul>
                        <li class="active"><span>Налаштування</span></li>
                        <li><span>Проекти</span></li>
                    </ul>
                </div>
                <div class="style card-form-add-wrapp">
                    <div class="active style tabs-account-forms" id="tab1">
                        <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']])?>
                            <div class="add-book-form-column">
                                <div class="input-wr">
                                    <?=$form->field($user, 'name')->label('Ім\'я')?>
                                </div>
                                
                                <div class="input-wr">
                                    <?=$form->field($user, 'secondname')->label('Прізвище')?>
                                </div>
                                
                                <div class="input-wr">
                                    <?=$form->field($user, 'email')->label('Пошта')?>
                                </div>
                                
                                <div class="input-wr phones_mask">
                                   <?=$form->field($user, 'phone')->label('Телефон')?>
                                </div>
                                <div class="input-wr">
                                   <?=$form->field($model, 'password')->passwordInput()->label('Пароль')?>
                                </div>
  
                              <div class="input-wr">
                               <?=$form->field($model, 'confirmPassword')->passwordInput()->label('Пароль ще раз')?>
                              </div>
                                
                                <div class="input-wr change-password-link">
                                  <span>змінити пароль</span>
                                </div>
                            </div>
                            <div class="add-book-form-column" style="text-align: center;">
                                <div class="input-wr-file-wrapp">
                                    <label for="">Фото користувача (аватар)</label>
                                    <div class="input-wr-file">
                                        <label for="qa"></label>
                                        <input type="hidden" name="avatar" value="">
                                        <input type="file" id="qa" name="avatar">
                                        
                                        <div class="img-size">182 x 182</div>
                                        
                                        <!--если картинка загруженна то добавить для .img-file класс ".vis_"-->
                                        <div class="img-file <?=(!empty($user->avatar)) ? 'vis_': ''?>" style="display: none;">
                                            <!--124x84-->
                                            <div class="remove-img-file"></div>
                                            <img src="<?=(!empty($user->avatar)) ? '/storage/author/'.$user->id.'/'.$user->avatar : ''?>" alt="">
                                        </div>
                                    
                                    </div>
                                </div>
                            </div>
                            
                            
                            
                            <div class="button-wr account-save">

                                <button type="submit">зберегти</button>
                                <a href="#" class="account-cancel"><b>вийти</b></a>
                            </div>
                        <?php ActiveForm::end()?>
                    </div>
                    <div class="style tabs-account-forms" id="tab2">
                        <div class="style add-project-btn">
                            <a href="<?=Url::to(['book/add'])?>">додати проект</a>
                        </div>
                        <div class="style">
                          <?php
                            /* @var \yii\data\ActiveDataProvider $dataProvider*/
                              $count = round($dataProvider->getCount()/2, 0, PHP_ROUND_HALF_DOWN);
    
                              echo ListView::widget([
                                'dataProvider' => $dataProvider,
                                'itemView' => '_book',
                                'options' => ['class' => 'account-columns'],
                                'itemOptions' => [
                                  'class' => 'account-columns-row',
                                ],
                                'afterItem' => function ($model, $key, $index) use ($count) {
                                    if ($index == $count){
                                        return "
                                  </div>
                                  <div class=\"account-columns\">
                                  ";
                                    }
                                },
                                'layout'       => '{items}',
                                              ])?>
                            <div class="style account-pagination">
                                <?=LinkPager::widget([
                                                         'pagination'     => $dataProvider->pagination,
                                                         'maxButtonCount' => 5,
                                                     ])?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>