s444386/mgr-frontend
2
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

error handling button color fix

Browse Source
This commit is contained in:
szymonj98 2023-06-05 19:29:11 +02:00
parent 3fbf4c7edb
commit 67e65a48cb
14 changed files with 187 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/demo-models-page/advertise-analysis/advertise-analysis.component.html
View File

@ -1,12 +1,12 @@
<div class="sentiment-container">
<div class="title-container">
<div class="title">ANAIZA TEKSTU REKLAMY</div>
<button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
<button (click)="goToMainPage()" class="button-primary main-page-button advertise-btn">strona główna</button>
</div>
<div class="text">Ola J cos tu se wpiszesz albo nie xD</div>
<div class="ready-examples-button">
<button (click)="analyseAdvert(true)" class="button-primary">Wyolsuj gotowy przykład</button>
<button (click)="analyseAdvert(true)" class="button-primary advertise-btn">Wyolsuj gotowy przykład</button>
</div>
<div class="form-container">
<div [formGroup]="errorsForm">
@ -15,7 +15,7 @@
</div>
</div>
<div class="button-container">
<button [disabled]="!errorsForm.valid" (click)="analyseAdvert(false)" class="button-primary">Analizuj tekst</button>
<button [disabled]="!errorsForm.valid" (click)="analyseAdvert(false)" class="button-primary advertise-btn">Analizuj tekst</button>
</div>
</div>
<div *ngIf="correctedTextSet" class="corrected-text-container">

15
src/app/demo-models-page/advertise-analysis/advertise-analysis.component.scss
View File

@ -67,3 +67,18 @@
justify-content: center;
padding-top: 40px
}
.advertise-btn {
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(135, 135, 21) 50%, rgba(0, 0, 0, 1) 100%) !important;
background-repeat: no-repeat;
&:hover {
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(152, 152, 48) 50%, rgba(0, 0, 0, 1) 100%) !important;
background-repeat: no-repeat;
}
&:disabled {
background: linear-gradient(35deg, rgba(106, 106, 106, 1) 0%, rgb(166, 166, 166) 50%, rgba(106, 106, 106, 1) 100%) !important;
background-repeat: no-repeat;
}
}

16
src/app/demo-models-page/errors-correction-page/errors-correction-page.component.html
View File

@ -1,12 +1,12 @@
<div class="sentiment-container">
<div class="title-container">
<div class="title">POPRAWIANIE BŁĘDÓW</div>
<button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
<button (click)="goToMainPage()" class="button-primary main-page-button error-btn">strona główna</button>
</div>
<div class="text">ja cos tu se wpiszesz albo nie xD</div>
<div class="ready-examples-button">
<button (click)="correctErrors(true)" class="button-primary">Wyolsuj gotowy przykład</button>
<button (click)="correctErrors(true)" class="button-primary error-btn">Wyolsuj gotowy przykład</button>
</div>
<div class="form-container">
<div [formGroup]="errorsForm">
@ -15,13 +15,16 @@
</div>
</div>
<div class="button-container">
<button [disabled]="!errorsForm.valid" (click)="correctErrors(false)" class="button-primary">Popraw tekst</button>
<button [disabled]="!errorsForm.valid" (click)="correctErrors(false)" class="button-primary error-btn">Popraw
tekst</button>
</div>
</div>
<div *ngIf="correctedTextSet" class="corrected-text-container">
<ng-container *ngIf="correctedTextLoading; else loading">
<div class="corrected-title">Poprawiony tekst:</div>
<div class="corrected-text">{{correctedText}}</div>
<ng-container *ngIf="!error; else error">
<div class="corrected-title">Poprawiony tekst:</div>
<div class="corrected-text">{{correctedText}}</div>
</ng-container>
</ng-container>
</div>
</div>
@ -29,3 +32,6 @@
<ng-template #loading>
<div class="spinner"><mat-spinner></mat-spinner></div>
</ng-template>
<ng-template #error>
<div class="spinner error">Wystąpił nieoczekiwany błąd.</div>
</ng-template>

17
src/app/demo-models-page/errors-correction-page/errors-correction-page.component.scss
View File

@ -67,3 +67,20 @@
justify-content: center;
padding-top: 40px
}
.error {
color: white
}
.error-btn{
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(19, 133, 17) 50%, rgba(0, 0, 0, 1) 100%) !important;
background-repeat: no-repeat;
&:hover{
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(38, 163, 36) 50%, rgba(0, 0, 0, 1) 100%) !important;
background-repeat: no-repeat;
}
&:disabled{
background: linear-gradient(35deg, rgba(106, 106, 106, 1) 0%, rgb(166, 166, 166) 50%, rgba(106, 106, 106, 1) 100%) !important;
background-repeat: no-repeat;
}
}

9
src/app/demo-models-page/errors-correction-page/errors-correction-page.component.ts
View File

@ -12,7 +12,8 @@ import { environment } from 'src/environments/environment';
export class ErrorsCorrectionPageComponent implements OnInit {
correctedTextLoading = false;
correctedTextSet= false;
correctedTextSet = false;
error = false;
correctedText!: string;
randomSampleList = [
'krul wladyslaw jagiello zwyciezyl w bitwie pod grunwaldem',
@ -39,6 +40,7 @@ export class ErrorsCorrectionPageComponent implements OnInit {
}
correctErrors(isRandomSample: boolean): void {
this.error = false
let sentence = ''
this.correctedTextSet = true
this.correctedTextLoading = false;
@ -53,6 +55,11 @@ export class ErrorsCorrectionPageComponent implements OnInit {
next: (resp: any) => {
this.correctedText = resp.predictions[0].generated_text
this.correctedTextLoading = true;
},
error: () => {
this.correctedTextLoading = true;
this.error = true
console.log('error')
}
})

58
src/app/demo-models-page/facebook-analysis/facebook-analysis.component.html
View File

@ -1,7 +1,7 @@
<div class="facebook-analysis-container">
<div class="title-container">
<div class="title">ANALIZA POSTA Z FACEBOOKA</div>
<button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
<button (click)="goToMainPage()" class="button-primary main-page-button face-btn">strona główna</button>
</div>
<div class="text">cos tu sie wpisze</div>
<div class="form-container">
@ -11,39 +11,41 @@
</div>
</div>
<div class="button-container">
<button [disabled]="!linkForm.valid" (click)="getComments()" class="button-primary">Analizuj
<button [disabled]="!linkForm.valid" (click)="getComments()" class="button-primary face-btn">Analizuj
komentarze</button>
</div>
</div>
<div class="results-table" *ngIf="analysisStart">
<ng-container *ngIf="analysisLoading; else loading">
<ng-container *ngIf="commentStatus; else commentError">
<div class="info-container">
<div class="post-title">Treść posta</div>
<div class="post">
{{post}}
</div>
</div>
<div class="analysis-results">
<div>
<div class="post-title">Komentarze</div>
<div *ngFor="let res of results">
<div class="result-row">
<div class="sentence">{{res.sentence}}</div>
<div [ngSwitch]="res.label">
<div class="label-0" *ngSwitchCase="0">Negatywny</div>
<div class="label-1" *ngSwitchCase="1">Pozytywny</div>
<div class="label-2" *ngSwitchCase="2">Neutralny</div>
</div>
<ng-container *ngIf="!error; else error">
<div class="info-container">
<div class="post-title">Treść posta</div>
<div class="post">
{{post}}
</div>
</div>
</div>
<div class="chart">
<canvas baseChart width="300" height="300" [data]="barChartData" [options]="barChartOptions"
[plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
</canvas>
</div>
</div>
<div class="analysis-results">
<div>
<div class="post-title">Komentarze</div>
<div *ngFor="let res of results">
<div class="result-row">
<div class="sentence">{{res.sentence}}</div>
<div [ngSwitch]="res.label">
<div class="label-0" *ngSwitchCase="0">Negatywny</div>
<div class="label-1" *ngSwitchCase="1">Pozytywny</div>
<div class="label-2" *ngSwitchCase="2">Neutralny</div>
</div>
</div>
</div>
</div>
<div class="chart">
<canvas baseChart width="300" height="300" [data]="barChartData" [options]="barChartOptions"
[plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
</canvas>
</div>
</div>
</ng-container>
</ng-container>
</ng-container>
</div>
@ -55,3 +57,7 @@
<ng-template #commentError>
<div class="comment-error">Nie udało się pobrać komentarzy</div>
</ng-template>
<ng-template #error>
<div class="comment-error">Wystąpił nieoczekiwany błąd.</div>
</ng-template>

13
src/app/demo-models-page/facebook-analysis/facebook-analysis.component.scss
View File

@ -104,3 +104,16 @@
color:white;
font-size:20px
}
.face-btn{
background: linear-gradient(35deg, rgb(34, 34, 34) 0%, rgb(20, 43, 159) 50%, rgb(46, 46, 46) 100%) !important;
background-repeat: no-repeat;
&:hover{
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(52, 77, 200) 50%, rgba(0, 0, 0, 1) 100%) !important;
background-repeat: no-repeat;
}
&:disabled{
background: linear-gradient(35deg, rgba(106, 106, 106, 1) 0%, rgb(166, 166, 166) 50%, rgba(106, 106, 106, 1) 100%) !important;
background-repeat: no-repeat;
}
}

8
src/app/demo-models-page/facebook-analysis/facebook-analysis.component.ts
View File

@ -18,7 +18,8 @@ export class FacebookAnalysisComponent implements OnInit {
results: { label: number, score: number, sentence: string }[] = []
analysisStart = false;
analysisLoading = false;
commentStatus = false;
commentStatus = true;
error = false;
post!: string;
public barChartLegend = true;
public barChartPlugins = [];
@ -79,6 +80,11 @@ export class FacebookAnalysisComponent implements OnInit {
next: () => {
console.log(2)
this.analysisLoading = true
},
error: () => {
this.analysisLoading = true
this.error = true
console.log('error')
}
})
}

8
src/app/demo-models-page/irony-analysis/irony-analysis.component.html
View File

@ -1,12 +1,12 @@
<div class="sentiment-container">
<div class="title-container">
<div class="title">WYKRYWANIE IRONII</div>
<button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
<button (click)="goToMainPage()" class="button-primary main-page-button irony-btn">strona główna</button>
</div>
<div class="text">Ola G cos tu se wpiszesz albo nie xD</div>
<div class="ready-examples-button">
<button (click)="analyzeSentiment(true)" class="button-primary">Wyolsuj gotowe przykłady</button>
<button (click)="analyzeSentiment(true)" class="button-primary irony-btn">Wyolsuj gotowe przykłady</button>
</div>
<div class="form-container">
<div class="form">
@ -21,9 +21,9 @@
</ng-container>
</div>
<div class="button-container">
<button (click)="duplicateField()" class="button-primary">Dodaj pole</button>
<button (click)="duplicateField()" class="button-primary irony-btn">Dodaj pole</button>
<button [disabled]="!sentimentForm.valid" (click)="analyzeSentiment(false)"
class="button-primary">Analizuj tekst</button>
class="button-primary irony-btn">Analizuj tekst</button>
</div>
</div>
<div class="results-table" *ngIf="analysisStart">

21
src/app/demo-models-page/irony-analysis/irony-analysis.component.scss
View File

@ -81,11 +81,26 @@
width: 400px
}
.ready-examples-button{
padding-bottom:20px;
.ready-examples-button {
padding-bottom: 20px;
}
.spinner{
.spinner {
display: flex;
justify-content: center;
}
.irony-btn {
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(134, 18, 122) 50%, rgba(0, 0, 0, 1) 100%);
background-repeat: no-repeat;
&:hover {
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(160, 47, 149) 50%, rgba(0, 0, 0, 1) 100%);
background-repeat: no-repeat;
}
&:disabled {
background: linear-gradient(35deg, rgba(106, 106, 106, 1) 0%, rgb(166, 166, 166) 50%, rgba(106, 106, 106, 1) 100%) !important;
background-repeat: no-repeat;
}
}

39
src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.html
View File

@ -1,12 +1,12 @@
<div class="sentiment-container">
<div class="title-container">
<div class="title">ANALIZA SENTYMENTU</div>
<button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
<button (click)="goToMainPage()" class="button-primary main-page-button sentiment-btn">strona główna</button>
</div>
<div class="text">Maciek cos tu se wpiszesz albo nie xD</div>
<div class="ready-examples-button">
<button (click)="analyzeSentiment(true)" class="button-primary">Wyolsuj gotowe przykłady</button>
<button (click)="analyzeSentiment(true)" class="button-primary sentiment-btn">Wyolsuj gotowe przykłady</button>
</div>
<div class="form-container">
<div class="form">
@ -21,28 +21,30 @@
</ng-container>
</div>
<div class="button-container">
<button (click)="duplicateField()" class="button-primary">Dodaj pole</button>
<button (click)="duplicateField()" class="button-primary sentiment-btn">Dodaj pole</button>
<button [disabled]="!sentimentForm.valid" (click)="analyzeSentiment(false)"
class="button-primary">Analizuj tekst</button>
class="button-primary sentiment-btn">Analizuj tekst</button>
</div>
</div>
<div class="results-table" *ngIf="analysisStart">
<ng-container *ngIf="analysisLoading; else loading">
<div *ngFor="let res of results">
<div class="result-row">
<div class="sentence">{{res.sentence}}</div>
<div [ngSwitch]="res.label">
<div class="label-0" *ngSwitchCase="0">Negatywny</div>
<div class="label-1" *ngSwitchCase="1">Pozytywny</div>
<div class="label-2" *ngSwitchCase="2">Neutralny</div>
<ng-container *ngIf="!error; else error">
<div *ngFor="let res of results">
<div class="result-row">
<div class="sentence">{{res.sentence}}</div>
<div [ngSwitch]="res.label">
<div class="label-0" *ngSwitchCase="0">Negatywny</div>
<div class="label-1" *ngSwitchCase="1">Pozytywny</div>
<div class="label-2" *ngSwitchCase="2">Neutralny</div>
</div>
</div>
</div>
</div>
<div class="chart">
<canvas baseChart width="300" height="300" [data]="barChartData" [options]="barChartOptions"
[plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
</canvas>
</div>
<div class="chart">
<canvas baseChart width="300" height="300" [data]="barChartData" [options]="barChartOptions"
[plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
</canvas>
</div>
</ng-container>
</ng-container>
</div>
</div>
@ -58,3 +60,6 @@
<ng-template #loading>
<div class="spinner"><mat-spinner></mat-spinner></div>
</ng-template>
<ng-template #error>
<div class="spinner error">Wystąpił nieoczekiwany błąd.</div>
</ng-template>

25
src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.scss
View File

@ -81,11 +81,30 @@
width: 400px
}
.ready-examples-button{
padding-bottom:20px;
.ready-examples-button {
padding-bottom: 20px;
}
.spinner{
.spinner {
display: flex;
justify-content: center;
}
.error {
color: white
}
.sentiment-btn {
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(20, 123, 137) 50%, rgba(0, 0, 0, 1) 100%);
background-repeat: no-repeat;
&:hover {
background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(64, 164, 177) 50%, rgba(0, 0, 0, 1) 100%);
background-repeat: no-repeat;
}
&:disabled {
background: linear-gradient(35deg, rgba(106, 106, 106, 1) 0%, rgb(166, 166, 166) 50%, rgba(106, 106, 106, 1) 100%) !important;
background-repeat: no-repeat;
}
}

9
src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.ts
View File

@ -27,7 +27,8 @@ export class SentimentAnalysisComponent implements OnInit {
analysisStart = false;
analysisLoading = false;
results: { label: number, score: number, sentence: string }[] = []
results: { label: number, score: number, sentence: string }[] = [];
error = false;
public barChartLegend = true;
public barChartPlugins = [];
public barChartOptions: ChartConfiguration<'bar'>['options'] = {
@ -68,6 +69,7 @@ export class SentimentAnalysisComponent implements OnInit {
}
analyzeSentiment(isRandomSample: boolean) {
this.error = false
this.analysisStart = true
this.analysisLoading = false
let sentences = []
@ -92,6 +94,11 @@ export class SentimentAnalysisComponent implements OnInit {
setTimeout(() => {
this.duplicateField()
}, 50)
},
error: () => {
this.analysisLoading = true
this.error = true
console.log('error')
}
})
}

10
src/styles.scss
View File

@ -44,9 +44,13 @@ body {
transition: 0.3s;
&:hover:enabled {
background-color: white;
color: #0097A7;
border: 2px solid #0097A7;
background-color: rgb(41, 41, 41);
color: #bebebe;
border: 2px solid #9d9d9d;
}
&:disabled{
background-color: #869b9d;
}
&:disabled{