-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge new functionality "fiches" (part 1) of #39 from camarm-dev/dev
Nouvelle fonctionnalité "fiches" (partie 1)
- Loading branch information
Showing
10 changed files
with
412 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| <script setup lang="ts"> | ||
| import { | ||
| IonButtons, | ||
| IonContent, | ||
| IonHeader, | ||
| IonIcon, | ||
| IonTitle, | ||
| IonToolbar, | ||
| IonButton, | ||
| IonNavLink, | ||
| IonLabel, IonBadge, | ||
| } from "@ionic/vue"; | ||
| import {chevronBackOutline, pushOutline, shareOutline} from "ionicons/icons"; | ||
| </script> | ||
|
|
||
| <template> | ||
| <ion-header :translucent="true"> | ||
| <ion-toolbar> | ||
| <ion-buttons slot="start"> | ||
| <ion-nav-link router-direction="back"> | ||
| <ion-button @click="navigateBack()"> | ||
| <ion-icon class="ion-no-margin" :icon="chevronBackOutline" slot="start"/> | ||
| Retour | ||
| </ion-button> | ||
| </ion-nav-link> | ||
| </ion-buttons> | ||
| <ion-title>{{ nom }}</ion-title> | ||
| <ion-buttons slot="end"> | ||
| <ion-button @click="shareSheet()"> | ||
| <ion-icon slot="icon-only" :icon="shareOutline"></ion-icon> | ||
| </ion-button> | ||
| </ion-buttons> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
| <ion-content :fullscreen="true" class="ion-padding"> | ||
| <ion-header collapse="condense"> | ||
| <ion-toolbar> | ||
| <ion-label> | ||
| <ion-title class="remede-font ion-wrap" size="large">{{ nom }}</ion-title> | ||
| </ion-label> | ||
| <ion-buttons slot="end"> | ||
| <ion-button @click="openCredits()"> | ||
| <ion-icon slot="icon-only" :icon="pushOutline" color="medium"/> | ||
| </ion-button> | ||
| </ion-buttons> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
| <ion-label> | ||
| <p class="ion-padding-start">{{ description }}</p> | ||
| </ion-label> | ||
| <div class="ion-padding"> | ||
| <ion-badge class="ion-margin-end" :color="getTagColor(tag)" v-for="tag in tags">{{ tag }}</ion-badge> | ||
| </div> | ||
| <br> | ||
| <div class="ion-padding" v-html="contenu"/> | ||
| </ion-content> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import {useIonRouter} from "@ionic/vue"; | ||
| import {defineComponent} from "vue"; | ||
| import {Share} from "@capacitor/share"; | ||
| export default defineComponent({ | ||
| props: ['nom', 'description', 'contenu', 'tags', 'credits', 'slug'], | ||
| data() { | ||
| return { | ||
| navigateBack: () => "" as Function | ||
| } | ||
| }, | ||
| mounted() { | ||
| const ionRouter = useIonRouter() | ||
| function navigateBackIfNoHistory() { | ||
| if (!ionRouter.canGoBack()) { | ||
| ionRouter.navigate('/fiches', 'back', 'replace') | ||
| } | ||
| } | ||
| this.navigateBack = navigateBackIfNoHistory | ||
| }, | ||
| methods: { | ||
| goTo(path: string) { | ||
| this.$router.push(path) | ||
| }, | ||
| openCredits() { | ||
| window.open(this.credits) | ||
| }, | ||
| async shareSheet() { | ||
| try { | ||
| await Share.share({ | ||
| title: `"${this.nom}" sur Remède`, | ||
| text: `La fiche de français "${this.nom}" est sur Remède !`, | ||
| url: `https://remede.camam.fr/fiches/${this.slug}`, | ||
| dialogTitle: 'Partager la fiche', | ||
| }) | ||
| } catch { | ||
| alert('Fonctionnalité non supportée par votre navigateur') | ||
| } | ||
| }, | ||
| getTagColor(tag: string) { | ||
| switch (tag) { | ||
| case 'orthographe': | ||
| return 'primary' | ||
| case 'grammaire': | ||
| return 'success' | ||
| case 'lexique': | ||
| return 'tertiary' | ||
| case 'conjugaison': | ||
| return 'secondary' | ||
| case 'style': | ||
| return 'warning' | ||
| case 'typographie': | ||
| return 'danger' | ||
| default: | ||
| return 'grey' | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <template> | ||
| <ion-page> | ||
| <FicheModal v-bind="fiche" /> | ||
| </ion-page> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { IonPage } from '@ionic/vue'; | ||
| import FicheModal from "@/components/FicheModal.vue"; | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| export default { | ||
| data() { | ||
| return { | ||
| fiche: { | ||
| contenu: '', | ||
| description: 'La fiche n\'a pas été trouvée !', | ||
| nom: 'Pas de fiche', | ||
| tags: [], | ||
| slug: '', | ||
| credits: '' | ||
| } | ||
| } | ||
| }, | ||
| mounted() { | ||
| this.loadSheet() | ||
| }, | ||
| methods: { | ||
| async loadSheet() { | ||
| this.fiche = await fetch(`https://api-remede.camarm.fr/sheets/${this.$route.params.slug}`).then(resp => resp.json()) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| --- | ||
| nom: Exemple de fiche | ||
| description: Ceci est la première fiche | ||
| credits: https://remede.camarm.fr/sheets-credits#example | ||
| slug: example | ||
| tags: | ||
| - grammaire | ||
| - orthographe | ||
| --- | ||
|
|
||
| # Exemple | ||
|
|
||
| Ceci est un exemple de fiche. Les fiches continuellement améliorées et encore en train d'être écrites. Vous pouuvez contribuer sur [github](https://github.com/camarm-dev/remede). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.