peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 21:06:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactory of the draft validation and add video player

Browse Source
This commit is contained in:
Eudes Inácio
2023-10-31 10:09:12 +01:00
parent 2d08c5b776
commit 4801ea2210
13 changed files with 510 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/gabinete-digital/diplomas-assinar/diploma-assinar/diploma-assinar.page.ts
+7 -4
View File
@@ -39,6 +39,7 @@ export class DiplomaAssinarPage implements OnInit {
customDate: any;
caller: string;
mergedArray: any = [];
draftArray: any = [];
DraftIds = ""
DraftNames = ""
asDraft = true;
@@ -492,6 +493,7 @@ export class DiplomaAssinarPage implements OnInit {
"ownerId": resd.data.ownerId,
"status": resd.data.status,
};
this.draftArray.push(object);
this.mergedArray.push(object);
this.DraftNames += resd.data.description + ";";
this.DraftIds += resd.data.id + ";";
@@ -502,14 +504,15 @@ export class DiplomaAssinarPage implements OnInit {
});
await Promise.all(draftPromises);
if(this.draftArray.length == 0 ) {
console.log('No draft found.');
this.asDraft = false
}
if (this.DraftNames) {
this.DraftNames = this.DraftNames.slice(0, -1);
this.DraftIds = this.DraftIds.slice(0, -1);
} else {
console.log('No draft found.');
this.asDraft = false
}
}
}
src/app/pages/publications/new-publication/new-publication.module.ts
+1
View File
@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
import { NewPublicationPageRoutingModule } from './new-publication-routing.module';
import { NewPublicationPage } from './new-publication.page';
import '@teamhive/capacitor-video-recorder';
@NgModule({
imports: [
src/app/pages/publications/new-publication/new-publication.page.html
+73 -22
View File
@@ -1,17 +1,18 @@
<ion-content>
<div class="content-container d-flex flex-column">
<div class="title-content width-100 ">
<div class="div-title padding">
<ion-label class="title">{{publicationTitle}}</ion-label> <br>
<i style="margin-top: -3px; font-size: 15px;" > Campos marcados com * são obrigatórios</i>
<i style="margin-top: -3px; font-size: 15px;"> Campos marcados com * são obrigatórios</i>
</div>
</div>
<div class="overflow-y-auto padding">
<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)]="pub.Title" name="title" ngDefaultControl placeholder="Título*" ></ion-input>
<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)]="pub.Title" name="title"
ngDefaultControl placeholder="Título*"></ion-input>
</div>
<div *ngIf="publicationType!='1'" class="container-div">
@@ -20,7 +21,8 @@
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
</div>
<div class="ion-textarea-class" [class.input-error]="Form?.get('Message')?.invalid && validateFrom ">
<ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="pub.Message" name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto*"></ion-textarea>
<ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="pub.Message"
name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto*"></ion-textarea>
</div>
</div>
</div>
@@ -32,8 +34,12 @@
<div class="d-flex">
<ion-thumbnail slot="start">
<ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="capturedImage" (click)="imageSize(capturedImage)" ></ion-img>
<ion-img *ngIf="fileType == 'image/jpeg'" [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="capturedImage" (click)="imageSize(capturedImage)" ></ion-img>
<video *ngIf="fileType == 'video/mp4'" controls>
<source type="video/mp4" src="{{capturedVideo}}">
</video>
</ion-thumbnail>
<ion-label class="pl-10">
<p>{{capturedImageTitle}}</p>
@@ -48,42 +54,87 @@
</div>
<div class="picture d-flex pb-5 hide-desktop" *ngIf="publication && !( publication.FileBase64 == 'data:image/jpg;base64,null' || publication.FileBase64 == '' ) && !capturedImage">
<div class="post-img" *ngIf="publication.FileBase64">
<img src="{{publication.FileBase64}}" alt="image" >
<div class="picture d-flex pb-5 hide-desktop"
*ngIf="publication && !( publication.FileBase64 == 'data:image/jpg;base64,null' || publication.FileBase64 == '' ) && !capturedImage">
<div class="post-img" *ngIf="publication.FileBase64">
<img src="{{publication.FileBase64}}" alt="image">
</div>
<div class="d-flex flex-column pl-10" *ngIf="publication.FileBase64">
<div class="picture-file-name">{{publication.OriginalFileName}}.{{publication.FileExtension}}</div>
<!-- <div class="size">75 Kb</div> -->
</div>
<div class="flex-grow-1 d-flex align-center justify-end font-25" *ngIf="publication.FileBase64" (click)="deletePublicationImage()">
<div class="flex-grow-1 d-flex align-center justify-end font-25" *ngIf="publication.FileBase64"
(click)="deletePublicationImage()">
<ion-icon name="close"></ion-icon>
</div>
</div>
<div class="ion-item-container-no-border">
<ion-label (click)="takePicture()">
<ion-label (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>
<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>Tirar Fotografia</ion-label>
<ion-label>Câmera</ion-label>
</div>
</ion-label>
</ion-label>
</div>
<div *ngIf="photoOrVideo" class="ion-item-container-no-border">
<ion-label (click)="takePicture()">
<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>Foto</ion-label>
</div>
</ion-label>
</div>
<div *ngIf="photoOrVideo" class="ion-item-container-no-border">
<ion-label (click)="startVideoRecording()">
<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>Video</ion-label>
</div>
</ion-label>
</div>
<div class="ion-item-container-no-border">
<!-- <div class="ion-item-container-no-border">
<ion-label (click)="laodPicture()" 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>Anexar Fotografia</ion-label>
<ion-label>Galeria</ion-label>
</div>
</ion-label>
</div> -->
<div class="ion-item-container-no-border">
<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>
@@ -94,7 +145,7 @@
<ion-footer class="ion-no-border">
<ion-toolbar class="footer-toolbar">
<ion-buttons slot="start">
<button class="btn-ok" fill="clear" color="#fff" (click)="save()">
<button class="btn-ok" fill="clear" color="#fff" (click)="save()">
<ion-label>Gravar</ion-label>
</button>
</ion-buttons>
@@ -103,6 +154,6 @@
<ion-label>Cancelar</ion-label>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
</ion-footer>
src/app/pages/publications/new-publication/new-publication.page.ts
+189 -87
View File
File diff suppressed because one or more lines are too long
src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html
+5 -2
View File
@@ -23,8 +23,11 @@
</div>
<div class="post-item overflow-y-auto">
<div (click)="openPreview(publication)" *ngIf="publication.FileBase64.length > 30" class="post-img">
<img src="{{publication.FileBase64}}" alt="image" >
<div (click)="play()" *ngIf="publication.FileBase64.length > 30" class="post-img">
<!-- <img src="{{publication.FileBase64}}" alt="image" > -->
<video controls>
<source type="video/mp4" src="{{publication.FileBase64}}">
</video>
</div>
<div *ngIf="publication.FileBase64.length < 30" class="post-img">
<img src="/assets/icon/icon-no-image.svg" alt="image">
src/app/pages/publications/view-publications/publication-detail/publication-detail.page.scss
+70 -61
View File
@@ -1,70 +1,79 @@
:host{
}
ion-content{
--background: transparent;
--border-radius: 30px;
}
ion-footer{
background: #fff;
}
ion-toolbar{
/* --background:#0782c9; */
border-width: 0 !important;
}
.content-top{
background: #f3f2f2;
height: 20px;
margin: 0 auto;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
:host {
}
.content-container{
width: 100%;
margin:0 auto;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background: #ffffff;
height: 100%;
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
padding: 25px 0px 0 0px;
overflow: auto;
}
.title-content {
margin: 0px auto;
}
.back-icon{
width: auto;
float: left;
overflow: auto;
}
.div-title{
/* padding: 0!important; */
float: left;
}
.post-img{
width: 100%;
height: 400px;
margin: 0 auto;
border-radius: 0px!important;
overflow: hidden;
display: flex;
justify-content: center;
height: 420px;
ion-content {
--background: transparent;
--border-radius: 30px;
}
.post-img img{
height: 100%;
object-fit: cover;
ion-footer {
background: #fff;
}
.post-description{
ion-toolbar {
/* --background:#0782c9; */
border-width: 0 !important;
}
.video-container {
position: relative;
}
#playButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.content-top {
background: #f3f2f2;
height: 20px;
margin: 0 auto;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.content-container {
width: 100%;
margin: 0 auto;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background: #ffffff;
height: 100%;
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
padding: 25px 0px 0 0px;
overflow: auto;
}
.title-content {
margin: 0px auto;
}
.back-icon {
width: auto;
float: left;
overflow: auto;
}
.div-title {
/* padding: 0!important; */
float: left;
}
.post-img {
width: 100%;
height: 400px;
margin: 0 auto;
border-radius: 0px !important;
overflow: hidden;
display: flex;
justify-content: center;
height: 420px;
}
.post-img img {
height: 100%;
object-fit: cover;
}
.post-description {
margin: 0 auto;
margin-bottom: 35px;
}
.font-14-rem {
font-size: rem(14) !important;
}
}
src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts
+13 -2
View File
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ModalController } from '@ionic/angular';
import { Publication } from 'src/app/models/publication';
@@ -20,11 +20,13 @@ import { PublicationFolderService } from 'src/app/store/publication-folder.servi
styleUrls: ['./publication-detail.page.scss'],
})
export class PublicationDetailPage implements OnInit {
@ViewChild('videoPlayer', { static: true }) videoPlayer: ElementRef;
showLoader: boolean;
DocumentId: string;
folderId: string;
publication: Publication;
isModal = false
videoControls = false;
constructor(
private modalController: ModalController,
@@ -93,7 +95,7 @@ export class PublicationDetailPage implements OnInit {
Title:res.Title,
Message: res.Message,
DatePublication: res.DatePublication,
FileBase64: "data:image/jpeg;base64," + res.FileBase64,
FileBase64: "data:video/mp4;base64," +res.FileBase64,
OriginalFileName: res.OriginalFileName,
FileExtension: res.FileExtension,
}
@@ -194,4 +196,13 @@ export class PublicationDetailPage implements OnInit {
modal.present();
}
play() {
const video = this.videoPlayer.nativeElement;
if (video.paused) {
video.play();
} else {
video.pause();
}
}
}
src/app/pages/publications/view-publications/view-publications.page.ts
+7
View File
@@ -14,6 +14,7 @@ import { PermissionService } from 'src/app/services/permission.service';
import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
import { Storage } from '@ionic/storage';
import { PublicationFolderService } from 'src/app/store/publication-folder.service';
import { CapacitorVideoPlayer } from 'capacitor-video-player';
@Component({
@@ -34,6 +35,8 @@ export class ViewPublicationsPage implements OnInit {
publicationPipe = new PublicationPipe()
publicationDitails: any;
getpublication = [];
private videoplayer: any;
private videoUrl: any;
constructor(
@@ -66,6 +69,7 @@ export class ViewPublicationsPage implements OnInit {
ngOnInit() {
this.videoplayer = CapacitorVideoPlayer;
if (typeof (this.folderId) == 'object') {
this.folderId = this.folderId['ProcessId']
}
@@ -98,6 +102,9 @@ export class ViewPublicationsPage implements OnInit {
this.getFromDB();
}
playVideo() {
const rest: any = this.videoplayer.initPlayer({mode:"fullscreen",url: this.videoUrl})
}
createPublicationList(folderId = this.folderId) {
console.log('create')