# Avancé

# Personnalisation de la route d'accès au Hub Station

Par défaut, l'interface d'une instance de Hub est accessible à l'url : <contexte>/hub/station/<Nom logique de l'instance>

Pour utiliser une url personnalisée, il est nécessaire de configurer plusieurs éléments.

1) Déclarer la route sur le serveur

Exemple : Fichier XML de configuration des routes

<sde:config xmlns:sde="https://platform.anakeen.com/4/schemas/sde/1.0">
    <sde:routes namespace="HelloWorld">
        <sde:route name="HelloWorld:MainPage">
            <sde:priority>0</sde:priority>
            <sde:callable>Anakeen\Routes\HelloWorld\MainPage</sde:callable>
            <sde:method>GET</sde:method>
            <sde:pattern>/hello/[{args:.*}]</sde:pattern>
        </sde:route>
    </sde:routes>
</sde:config>

Exemple : Classe Anakeen\Routes\HelloWorld\MainPage

<?php

namespace Anakeen\Routes\Admin;

class MainPage extends \Anakeen\Hub\Routes\Hub
{
  protected function getHubInstanceId(\Slim\Http\request $request, \Slim\Http\response $response, $args)
  {
    return "HELLOWORLD";
  }
}

2) Associer la nouvelle url à l'instance de Hub

Via l'interface d'administration du Hub (voir Paramétrage du Hub), il est possible d'associer une url à une instance donnée de Hub.
Le champ Router entry est prévu à cet effet. Il doit être rempli avec l'url correspondant au pattern précédemment enregistré :

# Déclaration des routes internes au Hub Element

Il est possible de manipuler le routeur interne au Hub pour mettre en oeuvre des routes internes au Hub Element.
Cela est réalisé via l'API du composant Vue Hub Element qui possède plusieurs méthodes permettant d'intéragir avec le routeur.

Exemple: MyHubElement.vue

import HubElement from "@anakeen/hub-components/components/lib/HubElement";
export default {
  name: "my-hub-element",
  extends: HubElement,
  watch: {
    selectedUser(newValue) {
      this.navigate(`/users/${newValue}`);
    }
  },
  data() {
    return {
      selectedUser: 42
    };
  },
  created() {
    this.registerRoute(/\/users\/(d+)/, this.onUserIdChange);
  },
  methods: {
    onUserIdChange(id) {
      // id contient le nouvel id renseigné dans la route
    }
  }
};

# Utilisation du composant Hub Station

Il est également possible d'utiliser le composant Hub Station de façon à produire une interface de Hub de manière totalement indépendante (par exemple pour inclure l'interface du Hub dans une page existante).
Dans ce cas, toute la configuration du Hub doit être passé via la propriété config du composant.

Exemple: MainPage.vue

<template>
  <div class="app-main">
    <div class="app-main-page">
        <hub-station :config="config" @hubNotify="onNotify" @hubElementSelected="onHubElementSelected" />
    </div>
    <div class="notifier-wrapper">
        <my-notifier ref="notifier"></my-notifier>
    </div>
</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      config: {}
    };
  },
  created() {
    fetch("/hello/config")
      .then(response => response.json())
      .then(response => {
        this.config = response.data;
      });
  },
  methods: {
    onNotify(notification) {
      // Utilisation d'un widget de notification custom
      this.$refs.notifier.showMessage(notification.content.textContent);
    },
    onHubElementSelected(hubEntry) {
      // Déclenché quand un Hub Element est sélectionné
    }
  }
};
</script>