First of all, sorry for my English…
I’m trying to develop an Ionic app with Capacitor using standalone Angular.
I would like it to have pre-established styles by default and for them to be declared in my variables file within the theme folder.
At the beginning of loading the app I check whether or not it is configured to redirect to the configuration page in the ‘/config’ path to collect some user values and download its configuration file:
private async ionViewDidEnter(): Promise<void> {
Promise.all([
this._services._storage.getItem('configClient', true),
this._services._storage.getItem('news', true),
this._services._storage.getItem('chg_pin', true),
this._services._storage.getItem('user', true),
this._services._storage.getItem('remember', true),
])
.then(async (responses) => {
// Show configuration page or not if it is the first time you connect.
if(responses[0] == null) {
this._services._router.navigate(['/config']);
}else {
// Loading client settings and styles if you have ever connected
await this._services._configuration.getStorageClientConfig();
}
})
.catch((e) => {
console.error('ErrorInitLogin', e.message);
})
.finally(() => {
this._services.splashscreen.hide();
});
}
If you do not have previous configuration:
public async sendConfig(configForm): Promise<void> {
if(this.configForm.invalid) return;
await this._services._loading.showLoading(this._services._translate.instant('pages.configuration.sending_data'), 0);
this._services._configuration.initClientConfig()
.then(() => {
this._services._loading.dismiss();
this._services._menu.swipeGesture(true, 'menu-ctx');
this._services._router.navigate(['login']);
})
.catch(() => {
this._services._loading.dismiss();
this._services._toast.showToast(this._services._translate.instant('pages.configuration.error_sending_data'), 'bottom', 'danger');
});
}
Then I call a configuration service that downloads a configuration file for that user from an ftp server.
public initClientConfig(): Promise<boolean> {
return new Promise((resolve, reject) => {
// Recover Settings from Server
this.getConfig()
.then((response) => {
// Set Servers
this.setAppServer();
// Initialize Modules
this.setAppModules();
resolve(true);
});
});
}
The service downloads the file as follows:
public getConfig(): Promise<ConfiguracionCliente> {
return new Promise((resolve) => {
this._http.send(
this.currentClient.url,
'GET',
{},
[
{
"x-auth-header": "**********************************"
}
]
)
.then(async (response: ConfiguracionCliente) => {
this.clientConfig = response;
if(this.clientConfig && !GenericMethods.isNullOrEmpty(this.clientConfig.build)) {
this._storage.setItem('configClient', this.clientConfig, true);
this._theme.initClientTheme(this.clientConfig);
if(this.clientConfig.servers?.length > 0) {
this._server.servers = this.clientConfig.servers;
}
if(this.clientConfig.modulos?.length > 0) {
this._modules.arrayModules = this.clientConfig.modulos;
}
if(!GenericMethods.isNullOrEmpty(this._app.appInfo.version) && (this._app.appInfo.version < this.clientConfig.version)) {
this.showPermissions = true;
const version = await this._modal.create({
component: ModalVersion,
id: 'version',
initialBreakpoint: 1,
breakpoints: [0, 1],
backdropDismiss: false
});
await version.present();
}
}
resolve(this.clientConfig);
})
.catch((e) => {
console.error('ErrorGetClientConfig: ', e.message);
this.getStorageClientConfig()
.then((response) => {
if(response) {
resolve(this.clientConfig);
}else {
resolve(null);
}
})
});
})
}
From that file I get the name of the client, its logo, servers, modules and a property with the styles as follows
{
"version": "3.0.0",
"build": 81,
"usuario": "NombreUsuario",
"logo": "https://url_que_apunta_al_logo",
"servers": [
{...},
{...}
],
"modules": [
{...},
{...}
],
"theme": {
"primary": "#FF6600 !important",
"primary-rgb": "255,102,0 !important",
"primary-contrast": "#ffffff !important",
"primary-contrast-rgb": "0,0,0 !important",
"primary-shade": "#e05a00 !important",
"primary-tint": "#ff751a !important",
"secondary": "#FF8D00 !important",
"secondary-rgb": "255,141,0 !important",
"secondary-contrast": "#ffffff !important",
"secondary-contrast-rgb": "0,0,0 !important",
"secondary-shade": "#e07c00 !important",
"secondary-tint": "#ff981a !important",
"tertiary": "#FFC299 !important",
"tertiary-rgb": "255,194,153 !important",
"tertiary-contrast": "#ffffff !important",
"tertiary-contrast-rgb": "0,0,0 !important",
"tertiary-shade": "#e0ab87 !important",
"tertiary-tint": "#ffc8a3 !important",
"success": "#439467 !important",
"success-rgb": "67,148,103 !important",
"success-contrast": "#ffffff !important",
"success-contrast-rgb": "255,255,255 !important",
"success-shade": "#3b825b !important",
"success-tint": "#569f76 !important",
"warning": "#FF8D00 !important",
"warning-rgb": "255,141,0 !important",
"warning-contrast": "#000000 !important",
"warning-contrast-rgb": "0,0,0 !important",
"warning-shade": "#e07c00 !important",
"warning-tint": "#ff981a !important",
"danger": "#CE352C !important",
"danger-rgb": "206,53,44 !important",
"danger-contrast": "#ffffff !important",
"danger-contrast-rgb": "255,255,255 !important",
"danger-shade": "#b52f27 !important",
"danger-tint": "#d34941 !important",
"dark": "#222222 !important",
"dark-rgb": "34,34,34 !important",
"dark-contrast": "#ffffff !important",
"dark-contrast-rgb": "255,255,255 !important",
"dark-shade": "#1e1e1e !important",
"dark-tint": "#383838 !important",
"medium": "#999999 !important",
"medium-rgb": "153,153,153 !important",
"medium-contrast": "#000000 !important",
"medium-contrast-rgb": "0,0,0 !important",
"medium-shade": "#878787 !important",
"medium-tint": "#a3a3a3 !important",
"light": "#f7f7f7 !important",
"light-rgb": "247,247,247 !important",
"light-contrast": "#000000 !important",
"light-contrast-rgb": "0,0,0 !important",
"light-shade": "#d9d9d9 !important",
"light-tint": "#f8f8f8 !important",
"header": "#e05a00 !important",
"header-rgb": "224,90,0 !important",
"header-contrast": "#ffffff !important",
"header-contrast-rgb": "255,255,255 !important",
"header-shade": "#c54f00 !important",
"header-tint": "#e36b1a !important"
}
}
The configuration service, once the file is downloaded, calls the theme service to start the theme configuration with the values brought from the downloaded file as follows:
public initClientTheme(clientConfig: ConfiguracionCliente): Promise<boolean> {
return new Promise((resolve) => {
if(clientConfig && clientConfig.theme) {
this.nameEmpresa = clientConfig.empresa;
this.logo = clientConfig.logo;
this.temaCliente = clientConfig.theme;
this.ngZone.run(() => {
Object.keys(this.temaCliente).forEach((key) => {
this.render.setStyle(document.documentElement, `--ion-color-${key}`, this.temaCliente[key]);
});
});
resolve(true);
}else {
console.error('ErrorInitClientTheme');
resolve(false);
}
console.log(`--ion-color-primary: ${JSON.stringify(document.documentElement.style)}`);
});
}
The fact is that in that last ‘console.log(–ion-color-primary: ${JSON.stringify(document.documentElement.style)})’ it prints the values of the :root with the variables and values brought from the configuration file, but it is not rendered with the new colors, but with the previous ones…
Any ideas on how to dynamically change the styles of the application based on the downloaded file and how to make it persistent so that those styles are loaded whenever the app is reopened once configured to start?
Thanks guys!!!
I would like to know if any of you can think of how I can download that configuration file and with it configure my application based on the logged in user, placing their styles and making them persistent whenever the application is reopened.
Someone know any guide? Thanks in advance!!
1 post - 1 participant