Nuxt Components

fever-nuxt-components est un module pour nuxt contenant des composants déjà configurés et prêts à l'emploi.
Ce module utilise vuestic et tailwindcss pour générer l'interface utilisateur.

Installation

npm i @adclz/fever-nuxt-components

Nuxt Config

Afin de faire fonctionner ce module, vous devez l'ajouter à lia liste des modules dans le fichier nuxt.config.ts.
Vous devez faire de même avec Vuestic.

export default defineNuxtConfig({
   modules: [
       "@vuestic/nuxt",
       "@adclz/fever-nuxt-components"
   ]
})

Typescript

Typescript doit supporter les décorateurs expérimentaux afin d'installer inversify.
Modifiez le fichier tsconfig.json.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "types": [
      "reflect-metadata"
    ]
  }
}

Vite

esbuild ne doit pas changer le nom des reqûetes du médiateur, car celui-ci se base sur le nom du constructeur des reqûetes pour les assigner.

Voir: https://esbuild.github.io/api/#keep-names

export default defineConfig({
    esbuild: {
        keepNames: false,
    },
})

Tailwind

Vous devez préciser l'emplacement du module dans la section content de tailwind.config.js.

  module.exports = {
      content: [
          "./node_modules/@adclz/fever-nuxt-components/**/*.{js,vue,ts}",
          // ...
      ]
  }

App.vue

Si vous avez parcouru la documentation de MainLib, vous avez dû aperçevoir que son implémentation est particulière.
L'intégration dans nuxt ne déroge pas à la règle et c'est à vous faire une composition racine à l'entrée de votre application.

<script setup lang="ts">
import {provide, reactive} from "#imports";

import {MainLibModule, Mediator} from "@adclz/fevermainlib/kernel";

import AuthService from "@adclz/fevermainlib/services/auth";
import CulturesService from "@adclz/fevermainlib/services/cultures";
import GraphicsService from "@adclz/fevermainlib/services/graphics";
import LogService from "@adclz/fevermainlib/services/log";
import PlcService from "@adclz/fevermainlib/services/plc";
import ProcessService from "@adclz/fevermainlib/services/process";
import RestApiService from "@adclz/fevermainlib/services/rest";
import SocketService from "@adclz/fevermainlib/services/socket";
import TiaService from "@adclz/fevermainlib/services/tia";
import {Container} from "inversify";

const MakeReactive = <T extends object>(Kernel: Container, Service: new(...args: any[]) => T) => {
  const GetService = Kernel.get<T>(Service)
  Kernel.rebind<T>(Service).toConstantValue(reactive(GetService) as T)
}

const Kernel = MainLibModule()

MakeReactive(Kernel, AuthService)
MakeReactive(Kernel, CulturesService)
MakeReactive(Kernel, GraphicsService)
MakeReactive(Kernel, LogService)
MakeReactive(Kernel, PlcService)
MakeReactive(Kernel, ProcessService)
MakeReactive(Kernel, RestApiService)
MakeReactive(Kernel, SocketService)
MakeReactive(Kernel, TiaService)

provide("AuthService", Kernel.get<AuthService>(AuthService))
provide("CulturesService", Kernel.get<CulturesService>(CulturesService))
provide("GraphicsService", Kernel.get<GraphicsService>(GraphicsService))
provide("LogService", Kernel.get<LogService>(LogService))
provide("PlcService", Kernel.get<PlcService>(PlcService))
provide("ProcessService", Kernel.get<ProcessService>(ProcessService))
provide("RestApiService", Kernel.get<RestApiService>(RestApiService))
provide("SocketService", Kernel.get<SocketService>(SocketService))
provide("TiaService", Kernel.get<TiaService>(TiaService))
provide("Mediator", Kernel.get<Mediator>(Mediator))
</script>

Plugin nuxt

Si vous ne souhaitez pas utiliser app.vue, vous pouvez toujours créer un plugin.

import {MainLibModule, Mediator} from "@adclz/fevermainlib/kernel";
import AuthService from "@adclz/fevermainlib/services/auth";
import CulturesService from "@adclz/fevermainlib/services/cultures";
import GraphicsService from "@adclz/fevermainlib/services/graphics";
import LogService from "@adclz/fevermainlib/services/log";
import PlcService from "@adclz/fevermainlib/services/plc";
import ProcessService from "@adclz/fevermainlib/services/process";
import RestApiService from "@adclz/fevermainlib/services/rest";
import SocketService from "@adclz/fevermainlib/services/socket";
import TiaService from "@adclz/fevermainlib/services/tia";
import {Container} from "inversify";

const MakeReactive = <T extends object>(Kernel: Container, Service: new(...args: any[]) => T) => {
    const GetService = Kernel.get<T>(Service)
    Kernel.rebind<T>(Service).toConstantValue(reactive(GetService) as T)
}

export default defineNuxtPlugin(nuxtApp => {
    const vue = nuxtApp.vueApp

    const Kernel = MainLibModule()

    MakeReactive(Kernel, AuthService)
    MakeReactive(Kernel, CulturesService)
    MakeReactive(Kernel, GraphicsService)
    MakeReactive(Kernel, LogService)
    MakeReactive(Kernel, PlcService)
    MakeReactive(Kernel, ProcessService)
    MakeReactive(Kernel, RestApiService)
    MakeReactive(Kernel, SocketService)
    MakeReactive(Kernel, TiaService)

    vue.provide("AuthService", Kernel.get(AuthService))
    vue.provide("CulturesService", Kernel.get(CulturesService))
    vue.provide("GraphicsService", Kernel.get(GraphicsService))
    vue.provide("LogService", Kernel.get(LogService))
    vue.provide("PlcService", Kernel.get(PlcService))
    vue.provide("ProcessService", Kernel.get(ProcessService))
    vue.provide("RestApiService", Kernel.get(RestApiService))
    vue.provide("SocketService", Kernel.get(SocketService))
    vue.provide("TiaService", Kernel.get(TiaService))

    vue.provide("Mediator", Kernel.get(Mediator))
})

Composants

<Connect/>

Connect permet d'initier une connection à Manager.

• Paramétrage de la connection
• Affichage des machines à état de de TiaService et PlcService

Il possède un slot custom afin que vous puissiez ajouter du contenu personnalisé.

<template>
<Connect>
  <template #custom>
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Slot
    </div>
  </template>
</Connect>
</template>

<ConnectTia/>

ConnectTia demande à Manager de se connecter à une instance de Tia portal.
Il se présente sous la forme d'un bouton et affiche une modale de confirmation si une liaison à Tia Portal est déjà faite.

Il possède un slot custom afin que vous puissiez ajouter du contenu personnalisé dans la modale de conirmation.

<template>
<ConnectTia>
  <template #custom>
    <!-- Only in modal -->
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Slot
    </div>
  </template>
</ConnectTia>
</template>

<Cultures/>

Cultures affiche les textes multilingues du projet.

• Textes multilingues du projet
• Culture principale du projet
• Drapeau de la culture avec flag-cdn

Il possède un slot custom afin que vous puissiez ajouter du contenu personnalisé.

<template>
<Cultures>
  <template #custom>
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Slot
    </div>
  </template>
</Cultures>
</template>

<Graphics/>

Graphics affiche les graphiques multilingues du projet.

• Graphiques principaux du projet
• Graphiques multilingues inclut si définis

Il possède un slot custom afin que vous puissiez ajouter du contenu personnalisé.

<template>
<Graphics>
  <template #custom>
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Slot
    </div>
  </template>
</Graphics>
</template>

<HmiList/>

HmiList affiche les hmi du projet.

• Liste des hmi
• Affichage des détails techniques
• Intégration de <LockHmi/>

Il possède un slot custom afin que vous puissiez ajouter du contenu personnalisé.

<template>
<HmiList>
  <template #custom>
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Slot
    </div>
  </template>
</HmiList>
</template>

<LockHmi/>

LockHmi demande à Manager de vérouiller une hmi particulière.
Il se présente sous la forme d'un bouton et affiche une modale de confirmation si une hmi est déjà vérouillée.

Il possède un slot custom afin que vous puissiez ajouter du contenu personnalisé dans la modale de conirmation.

Il possède aussi une prop nommée hmi ou vous devez fournir un objet de Type Hmi qui sera envoyé à Manager.

<template>
<LockHmi :hmi="MyHmi">
  <template #custom>
    <!-- Only in modal -->
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Slot
    </div>
  </template>
</LockHmi>
</template>

<script setup lang="ts">
import { Hmi } from "@adclz/fevertypes/devices"

const MyHmi = new Hmi("Uid", "MyHmi", "OrderNumber:6AV2 128-3GB06-0AX0", [])
</script>

<LockPlc/>

LockHmi demande à Manager de vérouiller un automate.
Il se présente sous la forme d'un bouton et affiche une modale de confirmation si un automate est déjà vérouillé.

Il possède un slot custom afin que vous puissiez ajouter du contenu personnalisé dans la modale de confirmation.

Il possède aussi une prop nommée plc ou vous devez fournir un objet de Type Plc qui sera envoyé à Manager.

<template>
<LockPlc :plc="MyPlc">
  <template #custom>
    <!-- Only in modal -->
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Slot
    </div>
  </template>
</LockPlc>
</template>

<script setup lang="ts">
import { Plc } from "@adclz/fevertypes/devices"

const MyPlc = new Plc("Uid", "MyPlc", "OrderNumber:6AV2 128-3GB06-0AX0", [])
</script>

<PlcList/>

PlcList affiche les automates du projet.

• Liste des automates
• Affichage des détails techniques
• Intégration de <LockPlc/>

Il possède un slot custom afin que vous puissiez ajouter du contenu personnalisé.

<template>
<PlcList>
  <template #custom>
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Slot
    </div>
  </template>
</PlcList>
</template>

<Profile/>

Profile affiche vos informations de connection à Manager.

• Autorisations
• Token de connection à l'Api Rest

Il possède un slot custom afin que vous puissiez ajouter du contenu personnalisé.

<template>
<Profile>
  <template #custom>
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Slot
    </div>
  </template>
</Profile>
</template>

<Refresh/>

Refresh demande à Manager de refraîchir les machines à état.

<template>
<Refresh>
</Refresh>
</template>

<RunTia/>

RunTia demande à Manager de lancer une bouvelle instance de Tia Portal.
Il se présente sous la forme d'un bouton et affiche une modale de confirmation si une instance de Tia Portal est déjà connectée.

Il possède un slot custom afin que vous puissiez ajouter du contenu personnalisé dans la modale de confirmation.

<template>
<RunTia>
  <template #custom>
    <!-- Only in modal -->
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Slot
    </div>
  </template>
</RunTia>
</template>

<StatusBar/>

StatusBar ets une barre de statut affichant l'état de Tia Portal et du fonctionnement de Manager.

• Statut de Tia et du projet
• Affichage des appareils vérouillés
• Affichage des tâches avec la progession

Il possède 3 slots:

#custom-left vous permet d'afficher du contenu à gauche de la barre de statut, cet emplacement affiche aussi l'état de Manager.
Faites donc attention à ne pas mettre un contenu trop grand.

#custom-center vous permet d'ajouter du contenu au milieu de la barre de statut, l'affichage des tâches et de la progression y est aussi présente.
Faites donc attention à ne pas mettre un contenu trop grand.

#custom-right vous permet d'afficher du contenu à droite de la barre de statut, à l'instar de #custom-center, cet emplacement est vide.

<template>
<Connect>
  <template #custom-left>
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Left Slot
    </div>
  </template>
  <template #custom-center>
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Center Slot
    </div>
  </template>
  <template #custom-right>
    <div class="h-full text-center w-full border dark:text-white text-gray-900 bg-gray-200 dark:bg-gray-900 border-dashed border-indigo-500/100  p-3">
      Custom Right Slot
    </div>
  </template>
</Connect>
</template>