doneit-web/src/app/shared/publication/new-publication/new-publication.page.html

<ion-header class="ion-no-border background-white px-20 pt-25">
  <div class="title-content d-flex">
    <!--     <div class="back-icon">
      <ion-icon class="font-35-rem" (click)="goBack()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
    </div> -->
    <div class="div-title" >
      <ion-label class="title">{{ publicationTitle }}</ion-label> <br>
      <i style="margin-top: -3px; font-size: 15px;"> Campos marcados com * são obrigatórios</i>
    </div>
  </div>
</ion-header>

<ion-content>
  <div class="content-container">
    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>

    <div *ngIf="publicationType!='1'" class="ion-item-container"
      [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
      <ion-input autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="PublicationFromMvService.form.Title" name="title"
        placeholder="Título*"></ion-input>
    </div>

    <div *ngIf="publicationType!='1' " class="container-div pb-20">
      <div class="ion-item-class-2 d-flex">
        <div class="ion-icon-class">
          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
        </div>
        <div class="ion-textarea-class flex-grow-1"
          [class.input-error]="Form?.get('Message')?.invalid && validateFrom ">
          <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="PublicationFromMvService.form.Message"
            name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto*"></ion-textarea>
        </div>
      </div>
    </div>


    <!-- <div *ngIf="publication">
    OriginalFileName: {{ publication.OriginalFileName }}
  </div> -->


    <!-- Captured -->
    <div *ngIf="PublicationFromMvService.form.Files.length > 0">
      <ion-label class="attached-title pb-10">Anexos</ion-label>
      <div>
        <div class="d-flex" >

          <div *ngFor="let seleted of PublicationFromMvService.form.Files.slice(0, displayLimit), let i = index" lot="start" class="mr-10">

            <div>

              <div class="text-center cursor-pointer"  (click)="deleteFromSeletedContent(i)" style="font-weight: 700;color: #c63527; text-align-last: right;">
                X
              </div>

              <div *ngIf="checkFileType.checkFileType(seleted.FileExtension)  == 'video' && seleted.chucksManager">

                <mat-progress-bar

                  mode="determinate"
                  [style.width]="seleted.chucksManager.uploadPercentage"
                ></mat-progress-bar>

              </div>

              <ion-img *ngIf="checkFileType.checkFileType(seleted.FileExtension) == 'image'"
                name="image" ngDefaultControl [src]="'data:image/jpg;base64,' + seleted.Base64" style="height: 69px; width: 69px;"></ion-img>

              <video class="sdf" *ngIf="checkFileType.checkFileType(seleted.FileExtension)  == 'video' " width="70" height="70"
                preload="metadata" webkit-playsinline="webkit-playsinline">
                <source type="video/mp4" [src]="seleted.url">
              </video>

            </div>

          </div>

        </div>
        <!-- <button class="btn-no-color" (click)="clear()">
          <ion-icon name="close"></ion-icon>
        </button> -->
      </div>
    </div>




    <div *ngIf="checkTableDivice()" style="display: flex;">
      <div (click)="chossePhotoOrVideo()">
        <div class="attach-icon">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' "
            src="assets/images/icons-add-photo.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "
            src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>

        </div>
        <div class="attach-document">
          <ion-label>Câmera</ion-label>
        </div>
      </div>
    </div>

    <div *ngIf="photoOrVideo" class="container-multiselect pt-10" style="width: 200px;">
      <button id="container-multiselect" class="multiselect-button" (click)="takePicture()">Fotografia</button>
      <button id="container-multiselect" class="multiselect-button" (click)="startVideoRecording()">Video</button>
    </div>


    <div *ngIf="checkTableDivice()" >
      <ion-label (click)="loadVideoTablet()" class="cursor-pointer">
        <div class="attach-icon">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "
            src="assets/images/theme/gov/icons-add-photos.svg"></ion-icon>
        </div>
        <div class="attach-document cursor-pointer">
          <ion-label>Galeria</ion-label>
        </div>
      </ion-label>
    </div>

    <div *ngIf="checkDesktop()" >
      <ion-label (click)="loadVideo()" class="cursor-pointer">
        <div class="attach-icon">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "
            src="assets/images/theme/gov/icons-add-photos.svg"></ion-icon>
        </div>
        <div class="attach-document cursor-pointer">
          <ion-label>Galeria</ion-label>
        </div>
      </ion-label>
    </div>


  </div>

</ion-content>

<ion-footer class="ion-no-border">
  <ion-toolbar class="footer-toolbar width-100 px-20">
    <ion-buttons slot="start">
      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
        <ion-label>Gravar</ion-label>
      </button>
    </ion-buttons>
    <ion-buttons slot="end">
      <button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
        <ion-label>Cancelar</ion-label>
      </button>
    </ion-buttons>

  </ion-toolbar>
</ion-footer>