5htp-core 0.0.8 → 0.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "5-HTP, scientifically called 5-Hydroxytryptophan, is the precursor of happiness neurotransmitter.",
-	"version": "0.0.8",
+	"version": "0.0.9",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/assets/css/components/card.less

@@ -85,13 +85,6 @@ iframe {
     border: none;
 }
 
-header.card {
-    > i {
-        font-size: 3em;
-        line-height: 1em;
-    }
-}
-
 .dropArea {
     padding: @spacing;
     border-radius: @radius;

package/src/client/assets/css/layouts.less

@@ -217,6 +217,7 @@
     Déclarer une grid: grid x-3
     Placer un element: x1-3
 */
+@gridUnit: 6.66rem;
 .zones(@nb, @i: 1) when (@i <= @nb) {
 	/*----------------------------------
 	- ZONES DE LA GRILLE
@@ -287,23 +288,23 @@
     // Automatique
     .taille-auto(@min, @max) when (@min <= @max) {
 		&.xa@{min}-@{max} {
-			grid-template-columns: repeat(auto-fit, minmax(@min * 100px, @max * 100px))
+			grid-template-columns: repeat(auto-fit, minmax(@min * @gridUnit, @max * @gridUnit))
 		}
 		&.ya@{min}-@{max} {
-			grid-template-rows: repeat(auto-fit, minmax(@min * 100px, @max * 100px))
+			grid-template-rows: repeat(auto-fit, minmax(@min * @gridUnit, @max * @gridUnit))
 		}
 		.taille-auto(@min + 1, @max);
     }
     &.xa@{i} {
-        grid-template-columns: repeat(auto-fit, minmax(@i * 100px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(@i * @gridUnit, 1fr));
         &5 {
-            grid-template-columns: repeat(auto-fit, minmax(@i * 100px + 4.15rem, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(@i * @gridUnit + 4.15rem, 1fr));
         }
     }
     &.ya@{i} {
-        grid-template-rows: repeat(auto-fit, minmax(@i * 100px, 1fr));
+        grid-template-rows: repeat(auto-fit, minmax(@i * @gridUnit, 1fr));
         &5 {
-            grid-template-rows: repeat(auto-fit, minmax(@i * 100px + 4.15rem, 1fr));
+            grid-template-rows: repeat(auto-fit, minmax(@i * @gridUnit + 4.15rem, 1fr));
         }
     }
 	.taille-auto(1, @i);
@@ -347,10 +348,10 @@
         break-inside: avoid;
     }
 
-    &.xa1 { column-width: 100px;  }
-    &.xa2 { column-width: 200px;  }
+    &.xa1 { column-width: @gridUnit;  }
+    &.xa2 { column-width: @gridUnit * 2;  }
     &,
-    &.xa3 { column-width: 300px;  }
-    &.xa4 { column-width: 400px;  }
+    &.xa3 { column-width: @gridUnit * 3;  }
+    &.xa4 { column-width: @gridUnit * 4;  }
 
 }

package/src/client/assets/css/text/text.less

@@ -5,6 +5,7 @@ a {
     color: inherit;
     cursor: pointer;
     text-decoration: underline;
+    text-decoration: none;
 
     &:not([disabled]):hover, 
     &.active {
@@ -12,12 +13,16 @@ a {
     }
 
     &.super {
-        position: absolute;
-        top: 0; left: 0; right: 0; bottom: 0;
-        z-index: 5;
-
-        ~ a, ~ * a, ~ button, ~ * button {
-            z-index: 6;
+        text-decoration: none;
+        &::after {
+            content: ' ';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            z-index: 5;
+    
+            ~ a, ~ * a, ~ button, ~ * button {
+                z-index: 6;
+            }
         }
     }
 }

package/src/client/components/Select/index.tsx

@@ -0,0 +1,58 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import React from 'react';
+
+// Core
+import Button from '@client/components/button';
+import Dropdown, { TDialogControls, Props as DropdownProps } from '@client/components/dropdown';
+
+/*----------------------------------
+- CONST
+----------------------------------*/
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+type Choices = string[]
+
+type SearchResultsFunction = (keywords: string) => Choices
+
+export type Props = DropdownProps & {
+    title: string,
+    choices: Choices,
+    value?: string,
+    onChange: (value: string) => void,
+    search?: true | SearchResultsFunction
+}
+
+/*----------------------------------
+- COMONENT
+----------------------------------*/
+
+export default ({ title, choices, value, onChange, ...dropDownProps }: Props) => {
+    const refModal = React.useRef<TDialogControls>(null);
+    return (
+        <Dropdown {...dropDownProps} content={(
+            <ul class="card col menu">
+                {choices.map( jt => (
+                    <li>
+                        <Button active={jt === value} onClick={() => {
+                            onChange(jt);
+                            refModal.current?.close();
+                        }}>
+                            {jt}
+                        </Button>
+                    </li>
+                ))}
+            </ul>
+        )} iconR="chevron-down" refModal={refModal}>
+
+            {value || title}
+
+        </Dropdown>
+    )
+}

package/src/client/components/data/progressbar/circular/index.tsx

@@ -33,7 +33,7 @@ export default ({
     ratioCercle = 1,
     className, 
     style = {},
-    epaisseur = 5,
+    epaisseur = 10,
     rotation,
     etapes,
     taille,

package/src/client/components/data/progressbar/index.less

@@ -99,8 +99,8 @@ div.progressbar_old {
 .progressbar-svg {
 
     position: relative;
-    min-width: 100px;
-    min-height: 100px;
+    width: @sizeComponent;
+    height: @sizeComponent;
 
      > svg {
 
@@ -142,6 +142,8 @@ div.progressbar_old {
         left: 0;
         right: 0;
         bottom: 0;
+        // Text should fit inside the progressbar
+        font-size: 0.8em;
 
         > i,
         > img {

package/src/client/components/dropdown/index.tsx

@@ -4,10 +4,12 @@
 
 // Npm
 import React from 'react';
-import { ComponentChild } from 'preact';
+import { ComponentChild, RefObject } from 'preact';
 
 // Core
 import Button, { Props as ButtonProps } from '../button';
+import { TDialogControls } from '../Dialog/Manager';
+export type { TDialogControls } from '../Dialog/Manager';
 
 // Libs
 import useContexte from '@client/context';
@@ -17,23 +19,8 @@ import useContexte from '@client/context';
 ----------------------------------*/
 
 export type Props = ButtonProps & {
-    content: ComponentChild
-}
-
-export type TAction<TDonnee> = {
-    icone?: TIcons,
-    label: ComponentChild,
-    multi?: boolean,
-
-    onClick?: (donnees: TDonnee, index: number) => void,
-    lien?: (donnees: TDonnee, index: number) => string,
-    bouton?: (donnees: TDonnee, index: number) => ButtonProps
-}
-
-export type TActionsPopover = {
-    show: () => void,
-    hide: () => void,
-    toggle: () => void
+    content: ComponentChild,
+    refModal?: RefObject<TDialogControls>
 }
 
 /*----------------------------------
@@ -45,15 +32,19 @@ export default (props: Props) => {
 
     let {
         content,
-        immutable,
+        refModal,
         ...buttonProps
     } = props;
 
     const refButton = React.useRef<HTMLElement>(null);
 
-    const open = () => modal.show(() => content);
+    const open = () => {
+        const modalInstance = modal.show(() => content);
+        if (refModal)
+            refModal.current = modalInstance;
+    }
 
     return (
-        <Button {...buttonProps} onClick={open} refElem={refButton} />
+        <Button {...buttonProps} onClick={(open)} refElem={refButton} />
     )
 }

package/src/client/components/input/BaseV2/index.tsx

@@ -57,8 +57,10 @@ export function useInput<TValue>(
     // External value change
     React.useEffect(() => {
 
-        console.log("External value change", externalValue);
-        setState({ value: externalValue, valueSource: 'external' })
+        if (externalValue !== undefined && externalValue !== state.value) {
+            console.log("External value change", externalValue);
+            setState({ value: externalValue, valueSource: 'external' })
+        }
         
     }, [externalValue]);
 

package/src/client/context/index.ts

@@ -112,42 +112,6 @@ export class ClientContext {
         this.request = request;
         this.user = this.request.user || { ...GuestUser };
 
-        this.api.reload = (ids?: string | string[], params?: TObjetDonnees) => {
-            
-            if (this.page === undefined)
-                throw new Error("context.page is missing");
-
-            if (ids === undefined)
-                ids = Object.keys(this.page.fetchers);
-            else if (typeof ids === 'string')   
-                ids = [ids];
-
-            console.log("[api] Reload data", ids, params, this.page.fetchers);
-
-            for (const id of ids) {
-
-                const fetcher = this.page.fetchers[id];
-                if (fetcher === undefined)
-                    return console.error(`Unable to reload ${id}: Request not found in fetchers list.`);
-
-                if (params !== undefined)
-                    fetcher.data = { ...(fetcher.data || {}), ...params };
-
-                console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
-                const indicator = this.toast.loading("Loading ...");
-
-                this.request.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
-
-                    this.api.set({ [id]: data });
-
-                }).finally(() => {
-
-                    indicator.close(true);
-
-                })
-            }
-        }
-
     }
 
     // Is overwrote by the native app
@@ -194,10 +158,51 @@ export class ClientContext {
 
     // fetch doit appartenir à response, et non clientcontxt
     // car la méthode varie selon client (http) ou serveur (router.resolve)
-    public api = this.request.api as this["request"]["api"] & {
-        reload: (id?: string, params?: TObjetDonnees) => void,
-        set: (data: TObjetDonnees) => void
-    };
+    public api = {
+        ...this.request.api,
+        set: (newData: TObjetDonnees) => {
+
+            console.log("[api] Update page data", newData);
+            if (this.page)
+                this.page.setAllData(curData => ({ ...curData, ...newData }));
+            
+        },
+        reload: (ids?: string | string[], params?: TObjetDonnees) => {
+            
+            if (this.page === undefined)
+                throw new Error("context.page is missing");
+
+            if (ids === undefined)
+                ids = Object.keys(this.page.fetchers);
+            else if (typeof ids === 'string')   
+                ids = [ids];
+
+            console.log("[api] Reload data", ids, params, this.page.fetchers);
+
+            for (const id of ids) {
+
+                const fetcher = this.page.fetchers[id];
+                if (fetcher === undefined)
+                    return console.error(`Unable to reload ${id}: Request not found in fetchers list.`);
+
+                if (params !== undefined)
+                    fetcher.data = { ...(fetcher.data || {}), ...params };
+
+                console.log("[api][reload]", id, fetcher.method, fetcher.path, fetcher.data);
+                const indicator = this.toast.loading("Loading ...");
+
+                this.request.fetchAsync(fetcher.method, fetcher.path, fetcher.data).then((data) => {
+
+                    this.api.set({ [id]: data });
+
+                }).finally(() => {
+
+                    indicator.close(true);
+
+                })
+            }
+        }
+    }
 
     public handleError(e: Error) {
         switch (e.http) {

package/src/client/router/component.tsx

@@ -50,6 +50,7 @@ const Page = ({ page, isCurrent }: { page: PageResponse, isCurrent?: boolean })
             id={page.id === undefined ? undefined : 'page_' + page.id}
         >
 
+            {/* Make request parameters and api data accessible from the page component */}
             {page.component ? (
 
                 <page.component {...gui.request.data} {...data} />

package/src/common/data/number/percentage.ts

@@ -11,11 +11,13 @@ export type TVariation = {
     color: string,
 }
 
-export const variationStr = (value: number, reference: number, lowerIsBetter: boolean = false): TVariation => {
+export const variationStr = (value: number, reference: number, options: {
+    lowerIsBetter?: boolean
+} = {}): TVariation => {
     const pc = variation(value, reference);
     const pcStr = pc.toFixed(2);
     return {
         txt: ((pc > 0) ? '+' + pcStr : pcStr) + '%',
-        color: (lowerIsBetter ? pc > 0 : pc < 0) ? 'ea3943' : '16c784'
+        color: (options.lowerIsBetter ? pc > 0 : pc < 0) ? 'ea3943' : '16c784'
     }
 }

package/src/common/router/index.ts

@@ -35,7 +35,7 @@ const getLayout = (routePath: string | undefined): Layout | undefined => {
             if (routePath === layoutPath || routePath.startsWith( layoutPath + '/' ))
                 layout = { path: layoutPath, Component: layouts[layoutPath] };
     }
-    layout && console.log(`Using Layout: ${layout.path}`);
+    //layout && console.log(`${routePath}: Using Layout: ${layout.path}`);
     return layout;
 }
 

package/src/server/app/index.ts

@@ -15,7 +15,7 @@ import ConfigParser, { TEnvConfig } from './config';
 ----------------------------------*/
 
 type THookName = 'ready' | 'cleanup' | 'error'
-type THook = () => void;
+type THook = () => Promise<void>;
 
 type TServiceOptions = {
     instanciate: boolean
@@ -91,6 +91,20 @@ export class App {
     ----------------------------------*/
 
     public constructor() {
+
+        // Gestion crash
+        process.on('unhandledRejection', (error: any, promise: any) => {
+
+            console.error("Unhandled promise rejection:", error);
+
+            // Send email report
+            if (this.isLoaded('console'))
+                $.console.bugReport.server(error);
+            else
+                console.error(`Unable to send bug report: console service not loaded.`);
+
+        });
+
         // Load config files
         const configParser = new ConfigParser( this.path.root );
         this.env = configParser.env();
@@ -106,21 +120,47 @@ export class App {
         console.log("Configure services with", this.config);
     }
 
-    public register( id: string, Service: TServiceClass, options: Partial<TServiceOptions> = {}) {
+    // Register a service
+    public register<TServiceName extends keyof Core.Services>( 
+        id: TServiceName, 
+        Service: TServiceClass, 
+        options: Partial<TServiceOptions> = {}
+    ) {
 
         // Pas d'export default new Service pour chaque fichier de service,
         //  dissuaded'importer ms service sn'importe où, ce qui créé des références circulaires
-        console.log(`Launching service ${id} ...`, Service);
+        console.log(`[services] Registering service ${id} ...`);
         const service = options.instanciate !== false ? new Service() : Service;
-        this.services[id] = service;
-
-        // Lorsque service.load est async, une propriété loading doit etre présente 
-        //     De façon à ce que les autres services puissent savoir quand ce service est prêt
-        if ('loading' in service) {
-            service.loading = service.load();
-            this.loading.push(service.loading);
-        } else if ('load' in service)
-            service.load();
+        this.services[id as string] = service;
+
+        if ('load' in service) {
+
+            console.log(`[services] Starting service ${id} ...`);
+
+            // Lorsque service.load est async, une propriété loading doit etre présente 
+            //     De façon à ce que les autres services puissent savoir quand ce service est prêt
+            if ('loading' in service) {
+                
+                console.log(`[services] Waiting service ${id} to be fully loaded ...`);
+                service.loading = service.load().then(() => {
+                    console.info(`[service] Service ${id} successfully started.`);
+                }).catch(e => {
+                    // Bug report via email
+                    console.error(`[service] Error while starting the ${id} service:`, e);
+                    e.message = `Start ${id} service: ` + e.message;
+                    $.console.bugReport.server(e);
+                });;
+
+                this.loading.push(service.loading);
+                
+            } else
+                service.load();
+        }
+    }
+
+    // Test if a service was registered
+    public isLoaded( id: keyof Core.Services ) {
+        return id in this.services;
     }
 
     public on( name: THookName, callback: THook ) {
@@ -128,23 +168,36 @@ export class App {
         return this;
     }
 
+    public runHook( hookName: THookName ) {
+        console.info(`[hook] Run all ${hookName} hook (${this.hooks.ready.length}).`);
+        return Promise.all( 
+            this.hooks.ready.map(
+                cb => cb().catch(e => {
+                    console.error(`[hook] Error while executing hook ${hookName}:`, e);
+                })
+            ) 
+        ).then(() => {
+            console.info(`[hook] Hooks ${hookName} executed with success.`);
+        })
+    }
+
     /*----------------------------------
     - LAUNCH
     ----------------------------------*/
     public async launch() {
 
-        console.info(`Waiting for services to be ready ...`);
+        console.info(`[boot] Waiting for all services to be ready ...`);
         await Promise.all( this.loading );
 
-        console.info(`Launching application ...`);
-        await Promise.all( this.hooks.ready.map(cb => cb()) );
+        console.info(`[boot] Launching application ...`);
+        await this.runHook('ready');
 
         // NOTE: Useless ?
         /*if (this.hmr)
             this.activateHMR();*/
 
-        console.info(`Application is ready.`);
-
+        console.info(`[boot] Application is ready.`);
+        
         this.launched = true;
 
     }

package/src/server/data/Cache.ts

@@ -14,6 +14,12 @@ import app from '@server/app';
 
 // Libs
 
+/*----------------------------------
+- CONFIG
+----------------------------------*/
+
+const debug = false;
+
 /*----------------------------------
 - TYPES
 ----------------------------------*/
@@ -50,7 +56,7 @@ class Cache {
 
     private cleanMem() {
 
-        console.log("[cache] Clean memory");
+        debug && console.log("[cache] Clean memory");
 
         const now = Date.now();
         for (const key in this.data) {
@@ -88,11 +94,11 @@ class Cache {
 
         let retour: CacheEntry | undefined = this.data[cle];
 
-        console.log(`[cache] Get "${cle}".`);
+        debug && console.log(`[cache] Get "${cle}".`);
 
         // Expired
         if (retour?.expiration && retour.expiration < Date.now()){
-            console.log(`[cache] Key ${cle} expired.`);
+            debug && console.log(`[cache] Key ${cle} expired.`);
             retour = undefined;
         }
 
@@ -133,7 +139,7 @@ class Cache {
      */
     public set( cle: string, val: TPrimitiveValue, expiration: TExpirationDelay = null ): void {
         
-        console.log("[cache] Updating cache " + cle);
+        debug && console.log("[cache] Updating cache " + cle);
         this.data[ cle ] = {
             value: val,
             expiration: this.delayToTimestamp(expiration)

package/src/server/patch.ts

@@ -4,17 +4,6 @@ moduleAlias.addAliases({
     'react-dom': "preact/compat",
 })
 
-/*----------------------------------
-- DEBUG
-----------------------------------*/
-
-// Gestion crash
-process.on('unhandledRejection', (error: any, promise: any) => {
-
-    console.error("Unhandled promise rejection:", error);
-
-});
-
 /*----------------------------------
 - DATES & TIMZEONE
 ----------------------------------*/

package/src/server/services/console/bugReporter.ts

@@ -70,7 +70,7 @@ export default class BugReporter {
     public async server( error: Error, request?: ServerRequest ) {
 
         // error should be printed in the console, so they're acccessible from logs
-        console.error(error);
+        console.error(`Sending bug report for the following error:`, error);
 
         // Prevent duplicates
         if (!this.shouldSendReport('server', request?.user?.name, undefined, error.message))
@@ -79,7 +79,6 @@ export default class BugReporter {
         // Get context
         const now = new Date();
         const hash = uuid();
-        const erroTitle = "Server Bug: " + error.message;
         const { channelType, channelId } = this.console.getChannel();
 
         // On envoi l'email avant l'insertion dans bla bdd
@@ -90,31 +89,36 @@ export default class BugReporter {
         );
 
         // Send notification
-        $.email.send({
-            to: app.identity.author.email,
-            subject: "Bug serveur: " + erroTitle,
-            html: `
-                <a href="${app.env.url}/admin/activity/requests/${channelId}">
-                    View Request details & console
-                </a>
-                <br/>
-                ${logsHtml}
-            `
-        });
-        // Memorize
-        $.sql.insert('BugServer', {
-            // Context
-            hash: hash,
-            date: now,
-            channelType, 
-            channelId,
-            // User
-            user: request?.user?.name,
-            ip: request?.ip,
-            // Error
-            stacktrace: error.stack || error.message,
-            logs: logsHtml
-        });
+        if (app.isLoaded('email'))
+            $.email.send({
+                to: app.identity.author.email,
+                subject: "Server bug: " + error.message,
+                html: `
+                    <a href="${app.env.url}/admin/activity/requests/${channelId}">
+                        View Request details & console
+                    </a>
+                    <br/>
+                    ${logsHtml}
+                `
+            });
+        else
+            console.error("Unable to send bug report: email service not loaded.");
+
+        /*if (app.isLoaded('sql'))
+            // Memorize
+            $.sql.insert('BugServer', {
+                // Context
+                hash: hash,
+                date: now,
+                channelType, 
+                channelId,
+                // User
+                user: request?.user?.name,
+                ip: request?.ip,
+                // Error
+                stacktrace: error.stack || error.message,
+                logs: logsHtml
+            });*/
 
         // Update error message
         error.message = "A bug report has been sent to my personal mailbox. Sorry for the inconvenience.";

package/src/server/services/console/index.ts

@@ -256,7 +256,7 @@ export class Console {
         let html = logs.map( log => logToHTML( log, this )).join('\n');
 
         if (full) {
-            const consoleCss = `background: #000; padding: 20px; font-family: 'monospace'; font-size: 12px; line-height: 20px;`
+            const consoleCss = `background: #000; padding: 20px; font-family: 'Fira Mono', 'monospace', 'Monaco'; font-size: 12px; line-height: 20px;`
             html = '<div style="' + consoleCss + '">' + html + '</div>';
         }
 

package/src/server/services/socket/index.ts

@@ -49,7 +49,7 @@ export class WebSocketCommander {
     public scopes: {[path: string]: SocketScope} = {}
 
     public constructor() {
-        app.on('cleanup', () => {
+        app.on('cleanup', async () => {
             this.closeAll();
         });
     }