Skip to content

add error messages #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: release/2.0.2
Choose a base branch
from
Open

add error messages #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/app/pcdc-header/pcdc-header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<div slot="start">
<ion-img
src="assets/images/gigameter_logo.png"
[routerLink]="['/home']"
class="giga_meter_logo"
></ion-img>
</div>
Expand Down
135 changes: 100 additions & 35 deletions src/app/searchcountry/searchcountry.page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,125 @@
<app-pcdc-header></app-pcdc-header>
<ion-content class="font_open_sans">
<ion-button class="button_disable_hover" fill="clear" [routerLink]="['/register-school']">
<ion-img src="assets/images/back_button.svg" name="arrow-back-outline" class="backIcon"></ion-img>
<ion-button
class="button_disable_hover"
fill="clear"
[routerLink]="['/register-school']"
>
<ion-img
src="assets/images/back_button.svg"
name="arrow-back-outline"
class="backIcon"
></ion-img>
</ion-button>
<div class="container">
<div class="welcomebg1">
<div>
<div class="search-label" [translate]="'searchCountry.detected-auto'"></div>
<ion-item lines="none" class="searchCountry"
[ngClass]="(selectedCountry !== '' && selectedCountry !== detectedCountry && isPcdcCountry !== false) ? 'warning_color' : this.isPcdcCountry === false ? 'error_color' : ''">
<ion-label class="label" [translate]="'searchCountry.country'"></ion-label>
<ion-searchbar [(ngModel)]="searchTerm" (ionInput)="onSearchInput($event)" debounce="300"
placeholder="Search country..."></ion-searchbar>
<ion-img *ngIf="this.isPcdcCountry === false " class="img_wifi"
src="assets/images/error_country.svg"></ion-img>
<div
class="search-label"
[translate]="'searchCountry.detected-auto'"
></div>
<ion-item
lines="none"
class="searchCountry"
[ngClass]="(selectedCountry !== '' && selectedCountry !== detectedCountry && isPcdcCountry !== false) ? 'warning_color' : this.isPcdcCountry === false ? 'error_color' : ''"
>
<ion-label
class="label"
[translate]="'searchCountry.country'"
></ion-label>
<ion-searchbar
[(ngModel)]="searchTerm"
(ionInput)="onSearchInput($event)"
debounce="300"
placeholder="Search country..."
></ion-searchbar>
<ion-img
*ngIf="this.isPcdcCountry === false "
class="img_wifi"
src="assets/images/error_country.svg"
></ion-img>

<ion-img
*ngIf="this.selectedCountry !=='' && this.selectedCountry !== this.detectedCountry && (this.isPcdcCountry !== false)"
class="img_wifi"
[ngClass]="{'margin_on_condition': this.selectedCountry !=='' && this.selectedCountry !== this.detectedCountry && this.isPcdcCountry === false}"
src="assets/images/Warning.svg"></ion-img>

src="assets/images/Warning.svg"
></ion-img>
</ion-item>

<ion-list *ngIf="filteredCountries.length > 0" class="scrollable scrollable_content ">
<ion-item button="true" class="dropdown_list half-border-bottom" lines="none"
*ngFor="let country of filteredCountries" (click)="selectCountry(country)"> {{
country.name }}
<ion-list
*ngIf="filteredCountries.length > 0"
class="scrollable scrollable_content"
>
<ion-item
button="true"
class="dropdown_list half-border-bottom"
lines="none"
*ngFor="let country of filteredCountries"
(click)="selectCountry(country)"
>
{{ country.name }}
</ion-item>
</ion-list>
<div *ngIf="automaticSearched" class="search-label change-country" [translate]="'searchCountry.change-country'">
</div>
<div
*ngIf="automaticSearched"
class="search-label change-country"
[translate]="'searchCountry.change-country'"
></div>
<span class="error_message" *ngIf="this.isPcdcCountry === false">
<ion-img *ngIf="this.isPcdcCountry === false" class="error_icon"
src="assets/images/error_country.svg"></ion-img>

<ion-img
*ngIf="this.isPcdcCountry === false"
class="error_icon"
src="assets/images/error_country.svg"
></ion-img>

<div class="search-label-error" [translate]="'searchCountry.not-available'"
[translateParams]="{ appName, appNameSuffix }">
</div>
<div
class="search-label-error"
[translate]="'searchCountry.not-available'"
[translateParams]="{ appName, appNameSuffix }"
></div>
</span>
<span class="error_message"
*ngIf="this.selectedCountry !=='' && this.selectedCountry !== this.detectedCountry && this.isPcdcCountry !== false">
<span
class="error_message"
*ngIf="this.selectedCountry !=='' && this.selectedCountry !== this.detectedCountry && this.isPcdcCountry !== false"
>
<ion-img class="error_icon" src="assets/images/Warning.svg"></ion-img>
<div class="search-label-error" [translate]="'searchCountry.country-not-accurate'"></div>
<div
class="search-label-error"
[translate]="'searchCountry.country-not-accurate'"
></div>
</span>
<div *ngIf="this.selectedCountry !=='' && this.selectedCountry !== this.detectedCountry" class="search-label"
[translate]="'searchCountry.please-double-check'"></div>


<!-- <div
*ngIf="this.selectedCountry !=='' && this.selectedCountry !== this.detectedCountry"
class="search-label"
[translate]="'searchCountry.please-double-check'"
></div> -->
</div>
<div class="bottom-layout">
<ion-button color="primary" appEnterKeyClick tabindex="0" block class="dailycheck_btn btn_margin"
[disabled]="!selectedFromList && !automaticSearched || this.isPcdcCountry === false || !searchTerm.length" (click)="confirmCountry()"><span
class="submit_button_size" [translate]="'searchCountry.confirm'"></span></ion-button>
<div *ngIf="isCheckingEligibility" class="search-label">
<ion-spinner
name="crescent"
style="zoom: 0.6; margin-right: 10px"
></ion-spinner>
<span
style="font-size: 12px"
[translate]="'searchCountry.loading'"
></span>
</div>
<ion-button
color="primary"
appEnterKeyClick
tabindex="0"
block
class="dailycheck_btn btn_margin"
[disabled]="isCheckingEligibility || (!selectedFromList && !automaticSearched) || this.isPcdcCountry === false || !searchTerm.length"
(click)="confirmCountry()"
><span
class="submit_button_size"
[translate]="'searchCountry.confirm'"
></span
></ion-button>
</div>
</div>
</div>
</ion-content>
</ion-content>
87 changes: 49 additions & 38 deletions src/app/searchcountry/searchcountry.page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ import { Country } from '../shared/country.model';
import { CountryService } from '../services/country.service';
import { TranslateService } from '@ngx-translate/core';
import { environment } from 'src/environments/environment';
import { finalize } from 'rxjs/operators';
@Component({
selector: 'app-searchcountry',
templateUrl: 'searchcountry.page.html',
styleUrls: ['searchcountry.page.scss'],
standalone: false

standalone: false,
})
export class SearchcountryPage {
@ViewChild(IonAccordionGroup, { static: true })
Expand Down Expand Up @@ -1033,6 +1033,7 @@ export class SearchcountryPage {
appNameSuffix = environment.appNameSuffix;
searchTerm: string = '';
filteredCountries: Country[] = [];
isCheckingEligibility: boolean = false;

constructor(
private storage: StorageService,
Expand All @@ -1055,7 +1056,7 @@ export class SearchcountryPage {
this.filteredCountries = [];
} else {
const searchTerm = event.target.value.toLowerCase();
this.filteredCountries = this.countries.filter(country =>
this.filteredCountries = this.countries.filter((country) =>
country.name.toLowerCase().includes(searchTerm)
);
this.selectedFromList = false;
Expand All @@ -1075,28 +1076,35 @@ export class SearchcountryPage {
validateSelectedCountry(country: Country) {
// if (!this.selectedCountry) return;

this.countryService.getPcdcCountryByCode(country.code).subscribe(
(response) => {
this.pcdcCountry = response;
if (this.pcdcCountry.length > 0) {
this.isPcdcCountry = true;
this.selectedCountry = country.code;

} else {
this.isCheckingEligibility = true;
this.countryService
.getPcdcCountryByCode(country.code)
.pipe(
finalize(() => {
this.isCheckingEligibility = false;
})
)
.subscribe(
(response) => {
this.pcdcCountry = response;
if (this.pcdcCountry.length > 0) {
this.isPcdcCountry = true;
this.selectedCountry = country.code;
} else {
this.isPcdcCountry = false;
// this.selectedCountry = country.code;
}
},
(err) => {
console.log('Validation error:', err);
this.isPcdcCountry = false;
// this.selectedCountry = country.code;
}
},
(err) => {
console.log('Validation error:', err);
this.isPcdcCountry = false;
// this.selectedCountry = country.code;

}
);
);
}

confirmCountry() {
if (this.isCheckingEligibility) return;
if (!this.selectedCountry || !this.isPcdcCountry) return;

if (this.detectedCountry === undefined || this.detectedCountry === null) {
Expand All @@ -1108,33 +1116,37 @@ export class SearchcountryPage {
'searchschool',
this.selectedCountry,
this.detectedCountry,
selectedCountryName
selectedCountryName,
]);
}

getCountry() {
/* Store school id and giga id inside storage */
let countryData = {};

this.networkService.getNetInfo().then((c) => {
console.log(c);
this.selectedCountry = c.country;
this.detectedCountry = c.country;
countryData = {
ip_address: c.ip,
country_code: c.country,
};
this.automaticSearched = true;
this.searchTerm = this.filterCountryByCode(this.selectedCountry).name;
this.selectCountry({name: this.searchTerm, code: c.country})

}, error => {
this.automaticSearched = false;
});
this.networkService.getNetInfo().then(
(c) => {
console.log(c);
this.selectedCountry = c.country;
this.detectedCountry = c.country;
countryData = {
ip_address: c.ip,
country_code: c.country,
};
this.automaticSearched = true;
this.searchTerm = this.filterCountryByCode(this.selectedCountry).name;
this.selectCountry({ name: this.searchTerm, code: c.country });
},
(error) => {
this.automaticSearched = false;
}
);
}

filterCountryByCode(countryCode: string): any {
return this.countries.find(country => country.code.toLowerCase() === countryCode.toLowerCase());
return this.countries.find(
(country) => country.code.toLowerCase() === countryCode.toLowerCase()
);
}

// onCountryChange(event) {
Expand Down Expand Up @@ -1227,5 +1239,4 @@ export class SearchcountryPage {
this.isPcdcCountry = true; // temporarily assume it's valid during input
this.filterCountries(event);
}

}
}
Loading