angularProject/app/views/user-page.html

<div class="user-page" ng-controller="UserPageController">
  <div class="user-page-wrapper">
    <div class="navigation">
      <div class="navigation-profile">
        <div class="profile-img">
          <img ng-if="userAvatarUrl" ng-src="{{userAvatarUrl}}">
          <img ng-if="!userAvatarUrl" ng-src="content\images\user-page\male-user-silhouette_318-35708.jpg">
        </div>
        <div class="profile-name">
          {{userObject.name}} {{userObject.surname}}
        </div>
        <div class="profile-change-img-btn">
          <label>
            Change Image
            <input type="file" id="select-file" custom-on-change="changeImg">
          </label>

        </div>
      </div>
      <div class="navigation-btns">
        <div ng-class="{'navigation-btn-active': activeBtn == 'personal info'}" ng-click="activeBtn = 'personal info'" class="navigation-btn">
          <span class="fa fa-user"></span>
          <div>personal info</div>
        </div>
        <div ng-class="{'navigation-btn-active': activeBtn == 'your diets'}" ng-click="activeBtn = 'your diets'" class="navigation-btn">
          <span class="fa fa-cutlery"></span>
          <div>your diets</div>
        </div>
        <div ng-class="{'navigation-btn-active': activeBtn == 'write us'}" ng-click="activeBtn = 'write us'" class="navigation-btn">
          <span class="fa fa-edit"></span>
          <div>write us</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div ng-if="activeBtn == 'personal info'" class="personal-info">
        <div class="personl-info-wrapper">
          <h2>Personal Information</h2>
          <div class="personal-info-items-wrapper" ng-class="{'edit-active': isShowInputs}">
            <div class="personal-info-item">
              <div class="personal-info-item-title">
                Name
              </div>
              <div class="personal-info-item-value">
                <span ng-if="!isShowInputs">{{userObject.name || '-'}}</span>
                <input ng-if="isShowInputs" type="text" value="{{userObject.name}}" ng-model="newUserObject.name">
              </div>
            </div>
            <div class="personal-info-item">
              <div class="personal-info-item-title">
                Surname
              </div>
              <div class="personal-info-item-value">
                <span ng-if="!isShowInputs">{{userObject.surname || '-'}}</span>
                <input ng-if="isShowInputs" type="text" value="{{userObject.surname}}" ng-model="newUserObject.surname">
              </div>
            </div>
            <div class="personal-info-item">
              <div class="personal-info-item-title">
                Telefone
              </div>
              <div class="personal-info-item-value">
                <span ng-if="!isShowInputs">{{userObject.phoneNumber || '-'}}</span>
                <input ng-if="isShowInputs" type="text" value="{{userObject.phoneNumber}}" ng-model="newUserObject.phoneNumber">
              </div>
            </div>
            <div class="personal-info-item">
              <div class="personal-info-item-title">
                Date of birth
              </div>
              <div class="personal-info-item-value">
                <span ng-if="!isShowInputs && userObject.dayOfBirth && userObject.monthOfBirth && userObject.yearOfBirth">{{userObject.dayOfBirth}} - {{userObject.monthOfBirth}} - {{userObject.yearOfBirth}}</span>
                <span ng-if="!isShowInputs && !(userObject.dayOfBirth && userObject.monthOfBirth && userObject.yearOfBirth)">-</span>
                <input ng-if="isShowInputs" type="text" value="{{userObject.dayOfBirth}}" ng-model="newUserObject.dayOfBirth" placeholder="day">
                <select ng-if="isShowInputs" value="{{userObject.monthOfBirth}}" ng-model="newUserObject.monthOfBirth">
                  <option>-</option>
                  <option value="01">january</option>
                  <option value="02">february</option>
                  <option value="03">march</option>
                  <option value="04">april</option>
                  <option value="05">may</option>
                  <option value="06">june</option>
                  <option value="07">july</option>
                  <option value="08">august</option>
                  <option value="09">september</option>
                  <option value="10">october</option>
                  <option value="11">november</option>
                  <option value="12">december</option>
                </select>
                <input ng-if="isShowInputs" type="text" value="{{userObject.yearOfBirth}}" ng-model="newUserObject.yearOfBirth" placeholder="year">
              </div>
            </div>
            <div class="personal-info-item">
              <div class="personal-info-item-title">
                Gender
              </div>
              <div class="personal-info-item-value">
                <span ng-if="!isShowInputs">{{userObject.gender || '-'}}</span>
                <select ng-if="isShowInputs" value="{{userObject.gender}}" ng-model="newUserObject.gender">
                  <option selected>-</option>
                  <option>Male</option>
                  <option>Female</option>
                </select>
              </div>
            </div>
            <div class="personal-info-item">
              <div class="personal-info-item-title">
                Country
              </div>
              <div class="personal-info-item-value">
                <span ng-if="!isShowInputs">{{userObject.country}}</span>
                <select ng-if="isShowInputs" value="{{userObject.country}}" ng-model="newUserObject.country">
                  <option ng-selected="true">-</option>
                  <option ng-repeat="(key,country) in countriesObject track by $index" value="{{key}}">{{key}}</option>
                </select>
              </div>
            </div>
            <div class="personal-info-item">
              <div class="personal-info-item-title">
                City
              </div>
              <div class="personal-info-item-value">
                <span ng-if="!isShowInputs">{{userObject.city || '-'}}</span>
                <select ng-if="isShowInputs" value="{{userObject.city}}" ng-model="newUserObject.city">
                  <option ng-selected="true">-</option>
                  <option ng-repeat="city in countriesObject[newUserObject.country] track by $index" value="{{city}}">{{city}}</option>
                </select>
              </div>
            </div>
          </div>
          <div class="personal-info-adit-btn">
            <span ng-if="!isShowInputs" ng-click="toggleIsShowInputs()">Edit Profile</span>
            <span ng-if="isShowInputs" ng-click="toggleIsShowInputs()">Save</span>
          </div>
        </div>
      </div>
      <div ng-if="activeBtn == 'your diets'" class="your-diets">
        <div class="header">
          <div class="product">
            Product
          </div>
          <div class="duration">
            Duration
          </div>
          <div class="days-left">
            Days left
          </div>
          <div class="price">
            Price
          </div>
        </div>
        <div class="no-diets-user-page" ng-if="!userDiets">
          no diets selected
        </div>
        <div class="items-wrapper">
          <div class="item" ng-repeat="diet in userDiets">
            <div class="item-product">
              <div class="item-product-name">
                {{diet.title}}
              </div>
              <!-- <div class="item-product-img">
                <img ng-src="{{diet.imageUrl}}">
              </div> -->
            </div>
            <div class="item-duration">
              {{diet.weekCount > 1 ? diet.weekCount + ' weeks' : diet.weekCount + ' week'}}
            </div>
            <div class="item-days-left">
              {{diet.weekCount * 7}} days
            </div>
            <div class="item-price">
              {{diet.price}} USD
            </div>
          </div>
        </div>
      </div>
      <div ng-if="activeBtn == 'write us'" class="write-us">
        <div class="chat">
          <div ng-class="message.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'?'admin-message':'user-message'" ng-repeat="message in messages">
            <div class="message-info">
              <div class="message-img">
                <img ng-if="(message.uid != 'uRkqD9GmNxUsdgF1XtmPicDJwAz1') && userAvatarUrl" ng-src="{{userAvatarUrl}}">
                <img ng-if="(message.uid != 'uRkqD9GmNxUsdgF1XtmPicDJwAz1') && !userAvatarUrl" src="content\images\user-page\male-user-silhouette_318-35708.jpg">
                <img ng-if="message.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'" src="content\images\user-page\admin.png">
              </div>
              <div class="message-date">
                {{message.date}}
              </div>
            </div>
            <div class="message-text-wrapper">
              <div class="message-name">
                <div ng-if="message.uid != 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'">
                  {{userObject.name}} {{userObject.surname}}
                </div>
                <div ng-if="message.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'">
                  Admin
                </div>
              </div>
              <div class="message-text">
                {{message.userMessage}}
              </div>
            </div>
          </div>
        </div>
        <div class="write-message">
          <form>
            <div class="write-input">
              <input type="text" placeholder="Type your message..." ng-model="messageObject.userMessage">
            </div>
            <div class="write-btn">
              <div class="write-btn-wrapper" ng-click="sendMessage()">
                <span class="fa fa-paper-plane"></span>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>