mirror of
https://github.com/Floriansylvain/musee-illusion-mobile.git
synced 2026-08-19 11:43:17 +02:00
feat: roomspage WIP
This commit is contained in:
Florian Sylvain
Generated
+9672
-9672
File diff suppressed because it is too large
Load Diff
+43
-43
@@ -1,45 +1,45 @@
|
||||
{
|
||||
"name": "MUSE",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"test:e2e": "cypress run",
|
||||
"test:unit": "vitest",
|
||||
"lint": "eslint ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@capacitor/android": "5.7.4",
|
||||
"@capacitor/app": "5.0.7",
|
||||
"@capacitor/core": "^5.7.4",
|
||||
"@capacitor/haptics": "5.0.7",
|
||||
"@capacitor/keyboard": "5.0.8",
|
||||
"@capacitor/status-bar": "5.0.7",
|
||||
"@ionic/vue": "^7.0.0",
|
||||
"@ionic/vue-router": "^7.0.0",
|
||||
"ionicons": "^7.0.0",
|
||||
"swiper": "^11.0.7",
|
||||
"vue": "^3.3.0",
|
||||
"vue-router": "^4.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@capacitor/cli": "^5.7.4",
|
||||
"@vitejs/plugin-legacy": "^5.0.0",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"@vue/test-utils": "^2.3.0",
|
||||
"cypress": "^13.5.0",
|
||||
"eslint": "^8.35.0",
|
||||
"eslint-plugin-vue": "^9.9.0",
|
||||
"jsdom": "^22.1.0",
|
||||
"terser": "^5.4.0",
|
||||
"typescript": "^5.1.6",
|
||||
"vite": "^5.0.0",
|
||||
"vitest": "^0.34.6",
|
||||
"vue-tsc": "^1.0.24"
|
||||
},
|
||||
"description": "An Ionic project"
|
||||
"name": "MUSE",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"test:e2e": "cypress run",
|
||||
"test:unit": "vitest",
|
||||
"lint": "eslint ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@capacitor/android": "5.7.4",
|
||||
"@capacitor/app": "5.0.7",
|
||||
"@capacitor/core": "^5.7.4",
|
||||
"@capacitor/haptics": "5.0.7",
|
||||
"@capacitor/keyboard": "5.0.8",
|
||||
"@capacitor/status-bar": "5.0.7",
|
||||
"@ionic/vue": "^7.0.0",
|
||||
"@ionic/vue-router": "^7.0.0",
|
||||
"ionicons": "^7.0.0",
|
||||
"swiper": "^11.0.7",
|
||||
"vue": "^3.3.0",
|
||||
"vue-router": "^4.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@capacitor/cli": "^5.7.4",
|
||||
"@vitejs/plugin-legacy": "^5.0.0",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"@vue/test-utils": "^2.3.0",
|
||||
"cypress": "^13.5.0",
|
||||
"eslint": "^8.35.0",
|
||||
"eslint-plugin-vue": "^9.9.0",
|
||||
"jsdom": "^22.1.0",
|
||||
"terser": "^5.4.0",
|
||||
"typescript": "^5.1.6",
|
||||
"vite": "^5.0.0",
|
||||
"vitest": "^0.34.6",
|
||||
"vue-tsc": "^1.0.24"
|
||||
},
|
||||
"description": "An Ionic project"
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
IonMenu,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonContent,
|
||||
IonButtons,
|
||||
IonMenuButton,
|
||||
} from "@ionic/vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<h1>PARIS</h1>
|
||||
<ion-menu side="end" content-id="main-content" :swipe-gesture="false">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu Content</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">This is the menu content.</ion-content>
|
||||
</ion-menu>
|
||||
<ion-buttons slot="end" id="main-content">
|
||||
<ion-menu-button color="dark"></ion-menu-button>
|
||||
</ion-buttons>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32px 32px 16px 32px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #b4b4b4;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
+1
-1
@@ -7,7 +7,7 @@ const routes: Array<RouteRecordRaw> = [
|
||||
component: () => import("@/views/HomePage.vue"),
|
||||
},
|
||||
{
|
||||
path: "/rooms/",
|
||||
path: "/rooms",
|
||||
component: () => import("@/views/RoomsPage.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { IonButton } from "@ionic/vue";
|
||||
import { IonButton, IonPage } from "@ionic/vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<ion-page class="main">
|
||||
<section class="top-content">
|
||||
<img src="/image 8.png" alt="salle illusion" />
|
||||
</section>
|
||||
@@ -13,15 +13,15 @@ import { IonButton } from "@ionic/vue";
|
||||
<h3>
|
||||
Venez découvrir les salles / installations que nous avons mis en place !
|
||||
</h3>
|
||||
<IonButton fill="outline" color="dark" routerLink="/rooms"
|
||||
>DÉCOUVRIR</IonButton
|
||||
<ion-button fill="outline" color="dark" routerLink="/rooms"
|
||||
>DÉCOUVRIR</ion-button
|
||||
>
|
||||
</section>
|
||||
</main>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
main {
|
||||
.main {
|
||||
height: 100vh;
|
||||
padding: 32px;
|
||||
|
||||
@@ -57,7 +57,7 @@ h3 {
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
main {
|
||||
.main {
|
||||
background-image: linear-gradient(-45deg, #983dd1 0, #ffffff 60%);
|
||||
}
|
||||
|
||||
|
||||
+132
-3
@@ -1,5 +1,134 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { IonPage, IonContent } from "@ionic/vue";
|
||||
import PagesHeader from "@/components/PagesHeader.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import { Pagination } from "swiper/modules";
|
||||
import { CapacitorHttp } from "@capacitor/core";
|
||||
|
||||
<template>b</template>
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
|
||||
<style scoped></style>
|
||||
const data = ref();
|
||||
|
||||
const doGet = async () => {
|
||||
const options = {
|
||||
url: "https://api.airtable.com/v0/appjEyYgBdj0qnspK/salles?maxRecords=3&view=Grid%20view",
|
||||
headers: {
|
||||
Authorization:
|
||||
"Bearer patiOFBtQASKft57I.34999adcb6a30891dfeb090e2ee4f0cd82a0177f63041468474aa8243a9dc284",
|
||||
},
|
||||
};
|
||||
return await CapacitorHttp.get(options);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const response = await doGet();
|
||||
data.value = response.data?.records;
|
||||
console.table(data.value[0].fields.audio);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ion-page class="page">
|
||||
<ion-content color="light">
|
||||
<PagesHeader />
|
||||
<main>
|
||||
<h2>Les salles</h2>
|
||||
<h3>Venez découvrir les salles mises en place !</h3>
|
||||
|
||||
<swiper
|
||||
:pagination="{
|
||||
clickable: true,
|
||||
el: '.swiper-pagination',
|
||||
bulletClass: 'swiper-pagination-bullet-custom',
|
||||
bulletActiveClass: 'swiper-pagination-bullet-active-custom',
|
||||
}"
|
||||
:modules="[Pagination]"
|
||||
:space-between="50"
|
||||
>
|
||||
<swiper-slide v-for="element in data" :key="element.titre">
|
||||
<section>
|
||||
<h4>{{ element.fields.titre }}</h4>
|
||||
<img :src="element.fields.image[0].url" alt="hallan" />
|
||||
<audio controls :src="element.fields.audio[0].url"></audio>
|
||||
</section>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div slot="pagination" class="swiper-pagination"></div>
|
||||
</main>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
background-color: var(--ion-color-light);
|
||||
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
ion-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0 32px 32px 32px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
color: var(--ion-color-dark);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 27px;
|
||||
font-weight: 600;
|
||||
color: #b4b4b4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-align: left;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: var(--ion-color-dark);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
audio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-custom {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active-custom {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: red !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user