gitea_admin/wondif_vue

Fork 0

generated from gitea_admin/default

Files

Julie 842ec7b8d8 inscriptions

2026-06-24 08:30:34 +02:00

15 KiB

Raw Blame History

Stack

NUXT 4
VueJS 3.5
Tailwindcss pour les pages professionnels et certains styles

Dev du site en local

NUXT

Démarrer NUXT

npm run dev
URL : http://localhost:3000/

Variables d'environnement

Elles sont définies dans ecosystem.config.cjs (PM2) et consommées dans nuxt.config.js via runtimeConfig.

Exemples de variables :

NUXT_PUBLIC_STRAPI_URL
NUXT_PUBLIC_SAISON
NUXT_STRAPI_TOKEN

Utilisation dans le code :

runtimeConfig.public.saison
runtimeConfig.public.strapiUrl

Après modification de ecosystem.config.cjs :

pm2 reload ecosystem.config.cjs --only wondif_vue

Site de développement

URL

https://2025.orchestre-ile.com/

Serveur web

Créer un vrai /security.txt (ou /.well-known/security.txt) au lieu de le renvoyer en 404. dans le fichier de conf NGINX /etc/nginx/sites-available$ sudo nano wondif_2025 # Fichier standard optionnel (si tu ne le fournis pas) location = /security.txt { return 404; }

METTRE EN LIGNE LE DEV AVEC GITEA

Serveur GITEA https://git.parisweb.art/

Du dev vers Gitea

git add . git commit -m "Mon message de commit" git push origin main

Avec VCS

Onglet Source Control
Vérifie la liste Changes
Clique sur + (stage)
- fichier par fichier ou
- - à côté de Changes (tout)
Renseigne un message de commit
Clique sur ✔️ Commit
clique sur Sync Changes

Du Gitea vers VPS

Se connecter au VPS
cd /var/www/wondif_vue

git pull origin main # récupère le dernier code si besoin d'ajout de dépendances (ajout bibliothèques) npm ci # installe / met à jour les dépendances (à exécuter uniquement si nouvelle dépendances installées dans package json) Si nouvelle variable d'env ajouter la variable dans le fichier more ecosystem.config.cjs manuellement npm run build # rebuild Nuxt pm2 reload ecosystem.config.cjs --only wondif_vue # redémarre le process avec les nouvelles variables d'environnement de ecosystem

URL

Inscriptions

Lycée
- /inscriptions/projet_lycee
- pour arrêter les inscriptions renommer le fichier "projet_lycee.vue" en "projet_lycee_termine.vue"
- pour démarrer les inscriptions renommer le fichier "projet_lycee_termine.vue" en "projet_lycee.vue"

ICONES

Il y a un système mis en place pour mettre des icones. Le système est celui de Google font qui a une font pour les icones. C'est en mode CDN, je n'ai pas chargé la font.

Pour choisir une icone il faut aller sur la page Google font https://fonts.google.com/icons?selected=Material+Symbols+Outlined

Choisir un icone. Quand on clique dessus on voit des infos sur l'icone. Il faut trouver "Icon name" (tout en bas), récupérer le nom de l'icone.

Ensuite pour l'afficher sur la page web.

On ajoute une balise avec la classe qui appelle la Google font et à l'intérieur le nom de l'icone que l'on a récupéré.

<span class="material-symbols-outlined text-3xl text-outline group-hover:text-primary">download</span>

Dans le head de la page il faut ajouter ceci pour donner le chemin CDN

useHead({
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap',
      },
    ],
  })

STRAPI

URL de PROD

bo.orchestre-ile.com

après modifications des fichiers src/... on rebuild strapiwww

cd strapi_wondif/ NODE_ENV=production npm run build pm2 list pm2 restart strapi_wondif pm2 list

dev en local

lancer MAMP pour activer la BD de STRAPI
lancer : npm run develop
URL de dev : http://localhost:1337

vérifier le json de l'enpoint strapi

http://localhost:3000/api/strapi/concerts http://localhost:3000/api/strapi/concerts?populate=* http://localhost:3000/api/strapi/concerts?populate[artistes_ondif_concert][populate]=postes_artiste_ondif http://localhost:3000/api/strapi/concerts?populate=*&populate[artistes_ondif_concert][populate]=postes_artiste_ondif http://localhost:3000/api/strapi/concerts?populate[saison_concert]=true&populate[genre_concert]=true&populate[type_audience_concert]=true&populate[direction_ondif_concert][populate]=postes_artiste_ondif&populate[direction_invite_concert][populate]=postes_artiste_invite&populate[artistes_ondif_concert][populate]=postes_artiste_ondif&populate[artistes_invite_concert][populate]=postes_artiste_invite

API pour avoir tout de Concerts http://localhost:3000/api/strapi/concerts?populate[saison_concert]=true&populate[genre_concert]=true&populate[type_audience_concert]=true&populate[direction_ondif_concert][populate]=postes_artiste_ondif&populate[direction_invite_concert][populate]=postes_artiste_invite&populate[artistes_ondif_concert][populate]=postes_artiste_ondif&populate[artistes_invite_concert][populate]=postes_artiste_invite&populate[image_illustration_concert]=true&populate[images_concert]=true&populate[videos_concert]=true&populate[audios_concert]=true&populate[programme_concert]=true&populate[representation_concert][populate]=lieu_representation&populate[liens_youtube_concert]=true

/api/strapi/concerts? populate[saison_concert]=true& populate[genre_concert]=true& populate[type_audience_concert]=true& populate[direction_ondif_concert][populate]=postes_artiste_ondif& populate[direction_invite_concert][populate]=postes_artiste_invite& populate[artistes_ondif_concert][populate]=postes_artiste_ondif& populate[artistes_invite_concert][populate]=postes_artiste_invite& populate[image_illustration_concert]=true& populate[images_concert]=true& populate[videos_concert]=true& populate[audios_concert]=true& populate[programme_concert]=true& populate[representation_concert][populate]=lieu_representation& populate[liens_youtube_concert]=true

API pour avoir la page Les Missions https://bo.orchestre-ile.com/api/mission?locale=fr-FR&populate=image_illustration_header https://bo.orchestre-ile.com/api/mission?locale=fr-FR&populate=*

https://bo.orchestre-ile.com/api/pro-programmer?locale=fr-FR&populate[bios]=true&populate[logos]=true&populate[Contacts]=true&populate[photos_orchestre]=true&populate[musique_chambre][populate][images]=true&populate[musique_chambre][populate][documents]=true&populate[musique_chambre][populate][videos]=true&populate[categorie][populate][evenement][populate][images]=true&populate[categorie][populate][evenement][populate][documents]=true&populate[categorie][populate][evenement][populate][videos]=true

API Instruments https://bo.orchestre-ile.com/api/parc-instruments?locale=fr-FR&populate=illustration_instrument

https://bo.orchestre-ile.com/api/home-partout-pour-tous?locale=fr-FR&populate[carte][populate][illustration]=true

https://bo.orchestre-ile.com/api/home-tous-orchestre?locale=fr-FR&populate[carte][populate][illustration]=true

https://bo.orchestre-ile.com/api/actualites?populate[image_illustration_actu]=true&populate[images_actu]=true&populate[liens_youtube_actu]=true ?populate[saison_concert]=true&populate[genre_concert]=true&populate[type_audience_concert]=true&populate[direction_ondif_concert][populate]=postes_artiste_ondif&populate[direction_invite_concert][populate]=postes_artiste_invite&populate[artistes_ondif_concert][populate]=postes_artiste_ondif&populate[artistes_invite_concert][populate]=postes_artiste_invite&populate[image_illustration_concert]=true&populate[images_concert]=true&populate[videos_concert]=true&populate[audios_concert]=true&populate[programme_concert]=true&populate[representation_concert][populate]=lieu_representation&populate[liens_youtube_concert]=true

https://bo.orchestre-ile.com/api/ressources-pedagogiques?populate[illustration_ressource]=true&populate[document_ressource]=true

https://bo.orchestre-ile.com/api/disques?populate[illustration_disque]=true

https://bo.orchestre-ile.com/api/home-cards?populate[illustration]=true

j'ai créé le endpoint home-tous-orchestre strapi pour saisir le contenu de cards. Donc peux-tu le remplacer par ce contenu strapi ?

Afficher les données récupérées ou les erreurs dans la console

const { items: scolaires, pending, error } = useStrapi( endpoint, { locale: "fr-FR", populate, limit: 1, } ) console.log("scolaires:", scolaires.value) watchEffect(() => { console.log("client ?", import.meta.client) console.log("server ?", import.meta.server) console.log("pending:", pending.value) console.log("error:", error.value) console.log("scolaires:", scolaires.value) })

watchEffect(() => { if (!pending.value && scolaires.value?.length) { console.log("scolaires dans le watch effect:", scolaires.value) } })

SAISIE DU CONTENU

slug

concert
- mettre le nom du concert avec la date

CSS

LAYOUT

@media (min-width: 0px) { max-width: 100%; } @media (min-width: 600px) { max-width: 580px; } @media (min-width: 700px) { max-width: 660px; } @media (min-width: 800px) { max-width: 780px; }
@media (min-width: 900px) { max-width: 860px; } @media (min-width: 1000px) { max-width: 950px; } @media (min-width: 1100px) { max-width: 1020px; } @media (min-width: 1200px) { max-width: 1100px; } @media (min-width: 1300px) { max-width: 1200px; } @media (min-width: 1400px) { max-width: 1300px; } @media (min-width: 1500px) { max-width: 1400px; }

débordement = les identifier visuellement

code javascript, à coller dans la partie "console" du navigateur, pour mettre cette ligne outile rouge et le backgroud à tous les éléments de body pour voir les débordements Array.from(document.querySelectorAll('body > *')).forEach(el => { el.style.outline = '1px solid red'; el.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; // Utilisation de rgba pour une semi-transparence });

Export Excel des inscriptions Académie

Le script scripts/export-academie-excel.js génère un fichier .xlsx depuis la table MySQL academie_orchestre_candidatures, puis l'envoie dans Microsoft 365 via Microsoft Graph.

Migration SQL

À exécuter une fois sur la base :

source server/database/2026-06-15_academie_excel_export.sql;
source server/database/2026-06-15_rename_academie_current_fields.sql;

Variables d'environnement

Variables MySQL déjà utilisées par Nuxt :

NUXT_MYSQL_HOST=...
NUXT_MYSQL_PORT=3306
NUXT_MYSQL_DATABASE=...
NUXT_MYSQL_USER=...
NUXT_MYSQL_PASSWORD=...

Variables Microsoft Graph à ajouter :

MICROSOFT_TENANT_ID=...
MICROSOFT_CLIENT_ID=...
MICROSOFT_CLIENT_SECRET=...
GRAPH_DRIVE_ID=...
GRAPH_EXCEL_UPLOAD_PATH=Académie d'orchestre/Candidatures/inscriptions-academie-{date}.xlsx
ACADEMIE_EXCEL_REPORT_EMAIL=...

Optionnel :

GRAPH_EXCEL_ITEM_ID=...
ACADEMIE_EXCEL_EXPORT_MODE=all
ACADEMIE_EXCEL_LOCAL_OUTPUT=tmp/inscriptions-academie-{date}.xlsx
ACADEMIE_EXCEL_SKIP_UPLOAD=1

Modes :

ACADEMIE_EXCEL_EXPORT_MODE=all : exporte toutes les inscriptions dans un fichier complet. Mode recommandé pour commencer.
ACADEMIE_EXCEL_EXPORT_MODE=pending : exporte seulement les lignes non exportées, puis les marque comme exportées.
{date} dans GRAPH_EXCEL_UPLOAD_PATH ou ACADEMIE_EXCEL_LOCAL_OUTPUT est remplacé par la date du jour au format YYYY-MM-DD, par exemple inscriptions-academie-2026-06-15.xlsx.
Ne renseigne pas GRAPH_EXCEL_ITEM_ID si tu veux créer un nouveau fichier daté chaque jour : cette variable sert à remplacer un fichier SharePoint existant.
ACADEMIE_EXCEL_REPORT_EMAIL reçoit un email de compte rendu après chaque export, ou un email d'erreur si le traitement échoue.

Test local sans upload

ACADEMIE_EXCEL_SKIP_UPLOAD=1 ACADEMIE_EXCEL_LOCAL_OUTPUT=tmp/inscriptions-academie-{date}.xlsx npm run export:academie-excel

Cron nocturne

Exemple pour un export tous les jours à 02:00 :

0 2 * * * cd /var/www/ton-projet && npm run export:academie-excel >> /var/log/academy-export.log 2>&1

Export Excel des demandes projet lycée

Le script scripts/export-lycee-excel.js génère un fichier .xlsx depuis la table MySQL projet_lycee_demandes, puis l'envoie dans Microsoft 365 via Microsoft Graph.

Migration SQL

À exécuter une fois sur la base si tu veux utiliser le mode pending :

source server/database/2026-06-16_lycee_excel_export.sql;

Variables d'environnement

Les variables MySQL et Microsoft Graph communes sont les mêmes que pour l'export Académie :

NUXT_MYSQL_HOST=...
NUXT_MYSQL_PORT=3306
NUXT_MYSQL_DATABASE=...
NUXT_MYSQL_USER=...
NUXT_MYSQL_PASSWORD=...
MICROSOFT_TENANT_ID=...
MICROSOFT_CLIENT_ID=...
MICROSOFT_CLIENT_SECRET=...
GRAPH_DRIVE_ID=...

Variables lycée à ajouter :

LYCEE_GRAPH_EXCEL_UPLOAD_PATH=Projets lycee/Demandes/inscriptions-lycee-{date}.xlsx
LYCEE_EXCEL_REPORT_EMAIL=...

Optionnel :

LYCEE_GRAPH_EXCEL_ITEM_ID=...
LYCEE_EXCEL_EXPORT_MODE=all
LYCEE_EXCEL_LOCAL_OUTPUT=tmp/inscriptions-lycee-{date}.xlsx
LYCEE_EXCEL_SKIP_UPLOAD=1

Modes :

LYCEE_EXCEL_EXPORT_MODE=all : exporte toutes les demandes dans un fichier complet, puis met à jour exported_to_excel_at et export_error.
LYCEE_EXCEL_EXPORT_MODE=pending : exporte seulement les lignes non exportées, puis met aussi exported_to_excel à 1. Nécessite la migration SQL ci-dessus.
En cas d'échec après lecture des demandes, export_error est renseigné sur les lignes concernées.
{date} dans LYCEE_GRAPH_EXCEL_UPLOAD_PATH ou LYCEE_EXCEL_LOCAL_OUTPUT est remplacé par la date du jour au format YYYY-MM-DD.
LYCEE_EXCEL_REPORT_EMAIL reçoit un email de compte rendu après chaque export, ou un email d'erreur si le traitement échoue.

Test local sans upload

LYCEE_EXCEL_SKIP_UPLOAD=1 LYCEE_EXCEL_LOCAL_OUTPUT=tmp/inscriptions-lycee-{date}.xlsx npm run export:lycee-excel

Cron nocturne

Exemple pour un export tous les jours à 02:15 :

15 2 * * * cd /var/www/ton-projet && npm run export:lycee-excel >> /var/log/lycee-export.log 2>&1

Couleurs

Ajouter de la couleur dans du texte blocks strapi dire à la personne qui saisie de mettre ceci95 et le configurer VueJS

15 KiB Raw Blame History

Stack

Dev du site en local

NUXT

Variables d'environnement

Site de développement

URL

Serveur web

METTRE EN LIGNE LE DEV AVEC GITEA

Du dev vers Gitea

Avec VCS

Du Gitea vers VPS

URL

Inscriptions

ICONES

STRAPI

URL de PROD

après modifications des fichiers src/... on rebuild strapiwww

dev en local

vérifier le json de l'enpoint strapi

Afficher les données récupérées ou les erreurs dans la console

SAISIE DU CONTENU

slug

CSS

LAYOUT

débordement = les identifier visuellement

Export Excel des inscriptions Académie

Migration SQL

Variables d'environnement

Test local sans upload

Cron nocturne

Export Excel des demandes projet lycée

Migration SQL

Variables d'environnement

Test local sans upload

Cron nocturne

Couleurs

15 KiB

Raw Blame History