# AdminCenter L'adminCenter (Centre d'Administració Remota) proporciona un punt d'administració únic dels servidors LliureX, facilitant des de qualsevol lloc, i a través d'un navegador web l'administració dels serveis N4d que el servidor ofereix. ##Estructura Es tracta d'una aplicació modular i realitzada en PHP. Cada funcionalitat que es proporcione per N4d pot tindre mòduls associats a l'adminCenter que accedisquen a ells. La instal·lació es realitza a /usr/share/admin-center, i es crea un enllaç simbòlic en /var/www/admin-center. ## Accés L'accés inicial es realitza a través de l'adreça: https://IP_DE_SERVIDOR:9779/adminCenter Aquesta adreça força a acceptar els certificats d'N4D del servidor i redirigix a l'adreça: https://IP_DE_SERVIDOR/admin-center/login.php Ja amb els certificats acceptats, i per tant, tenint accessible l'accés a n4d. ## Estructura d'un mòdul Els mòduls pengen de la carpeta DOCUMENTROOT/admin-center/modules, i tenen la següent estructura: module-name/ ├── module.json └── src ├── component1.html ├── component2.html ├── css │   ├── estils1.css │   └── estils2.css ├── i18n │   ├── ca_ES@valencia │   │ └── messages.json │   ├── es │   │ └── messages.json │   └── ... ├── icons │   ├── icon1.png │   └── icon2.png ├── js │   ├── scipt1.js │   └── script2.js └── main.html Vegem el contingut dels fitxers més importants. ###Fitxer module.json Fitxer en format JSON amb la descripció del mòdul i els components: { "id": "module-name", "version": "0.1", "name": "Example Module", "description": "Module description", "main":"main.html", "icon":"icon1.png", "components": [ { "menuEntry":"Desc Menu Entry", "id":"component id", "main":"component1.html", "icon":"icon2.png" }, { "menuEntry":"Desc Menu Entry 2", "id":"component id 2", "main":"component2.html", "icon":"icon2.png" } ] } Sent: * **id:** Identificador del mòdul, que haurà de coincidir amb el nom de la carpeta que el conté. * **version:** versió del mòdul. * **name:** Nom del mòdul, tai com apareixerà al menú. * **Description:** Descripció del mpòdul. * **main:** Document principal del mòdul (pàgina d'inici, sense incloure referències a fulls d'estil ni llibreries). * **icon:** Icona que representa el mòdul (acompanya a l'entrada de menú). * **components:** Llista dels components del mòdul (subpàgines). De cada component caldrà indicar: * **menuEntry:** Text de l'entrada del menú. * **id:** identificador del component. * **main:** Pàgina html del component, sense incloure referències a fulls d'estil ni llibreries. * **icon:** Icona corresponent al mòdul per a l'entrada del menú. **Notes:** - Als identificadors, cal evitar l'ús dels caràcters ".", "#", i qualsevol altre que puga portar a confusió amb selectors CSS. - No cal indicar els scripts i els fulls d'estils associats, ja que es carreguen tots dinàmicament en carregar el mòdul. ### La carpeta src Conté el codi principal del mòdul, i dins d'ella trobem: * Un document html per a cada comoponent especificat al module.json indicat per "main". * Carpeta css amb els diferents fulls d'estil utilitzats pel mòdul. * Carpeta i18n, amb un directori per a cada idioma suportat, i el fitxer messages.json amb les traduccions a eixe idioma. * Carpeta icons, on s'ubiquen les icones utilitzades pel mòdul per als menus. * Carpeta js, amb els scripts associats a cada mòdul. ### Càrrega dinàamica de mòduls Quan es punxa sobre l'opció principal d'un mòdul per primera vegada, es procedix a la càrrega dinàmica i síncrona d'aquest, de la següent manera: * Carrega tots els documents css de la carpeta corresponents * Carrega els documents html especificats al module.json * Carrega els scripts de la carpeta js de forma dinàmica * Carrega els fitxers de traducció * Quan està tot carregat, llença l'event "moduleLoaded", amb el paràmetre {"moduleName":target}. * Quan s'accedix a un component d'un mòdul, el que es llança és l'event "componentShown" sobre el component. Caldrà capturar l'event "componentShown" associat a l'etiqueta corresponent al mòdul si volem realitzar algunes funcionalitats a l'hora de mostrar un component d'un mòdul. És preferible que els mòduls utilitzen aquests events en lloc del document.load o document.ready, ja que amb ell ens assegurem que tots els components del mòdul estan carregats i per tant, s'està en predisposició de ser executat sense problemes de sincronisme. Vegem per un exemple de fitxer js de control principal d'un mòdul: function ModuleX(){} ModuleX.prototype.init=function init(){ console.log("Module started"); } ModuleX.prototype.bindEvents=function bindEvents(){ // Module Loaded: Triggered when a module is fully loaded (html and scripts) $(document).on("moduleLoaded", function(e, args){ var moduleName="ModuleX"; if(args["moduleName"]===moduleName) ModuleX.init(); }); // componentShown: Triggered when a module component is clicked $("#ModuleX-ComponentY").on("componentShown", function(e, args){ console.log("Showing Component Y from module X); }); } var myModuleX=new ModuleX(); ModuleX.bindEvents(); ## Traduccions: * En pàgines html: afegim el tag "i18n" a l'element que es puga traduir. * En js: fem ús de l'objecte i18n que proporciona la funció gettext("domini", "cadena"), on "domini" serà un domini associat al mòdul. * Les cadenes corresponents a les subentrades de menú es tradueixen automàticament del JSON. * Tot i que en principi la funció gettext de l'objecte i18n aplica les traduccions per mòduls, és convenient utilitzar un prefix associat al mòdul en les cadenes de traducció, per tal d'evitar possibles conflictes. ## Utilitats L'admin Center ja carrega de base les llibreries i estils corresponents a: * JQuery, * Bootstrap * Material / Ripples * Snackbar * Bootbox * Suport a traduccions (i18n i jed) * XMLRPC * La llibreria d'utilitsts Utils Dins les utilitats que l'objecte Utils proporciona tenim: * Funció msg(text, type): Mostra el missatge "text" en un snackbar. El tipus pot ser: * MSG_INFO, * MSG_ERROR i * MSG_SUCCESS