feat: roomspage WIP

package.json

@@ -1,45 +1,45 @@
 {
-  "name": "MUSE",
+    "name": "MUSE",
-  "private": true,
+    "private": true,
-  "version": "0.0.1",
+    "version": "0.0.1",
-  "type": "module",
+    "type": "module",
-  "scripts": {
+    "scripts": {
-    "dev": "vite",
+        "dev": "vite",
-    "build": "vue-tsc && vite build",
+        "build": "vue-tsc && vite build",
-    "preview": "vite preview",
+        "preview": "vite preview",
-    "test:e2e": "cypress run",
+        "test:e2e": "cypress run",
-    "test:unit": "vitest",
+        "test:unit": "vitest",
-    "lint": "eslint ."
+        "lint": "eslint ."
-  },
+    },
-  "dependencies": {
+    "dependencies": {
-    "@capacitor/android": "5.7.4",
+        "@capacitor/android": "5.7.4",
-    "@capacitor/app": "5.0.7",
+        "@capacitor/app": "5.0.7",
-    "@capacitor/core": "^5.7.4",
+        "@capacitor/core": "^5.7.4",
-    "@capacitor/haptics": "5.0.7",
+        "@capacitor/haptics": "5.0.7",
-    "@capacitor/keyboard": "5.0.8",
+        "@capacitor/keyboard": "5.0.8",
-    "@capacitor/status-bar": "5.0.7",
+        "@capacitor/status-bar": "5.0.7",
-    "@ionic/vue": "^7.0.0",
+        "@ionic/vue": "^7.0.0",
-    "@ionic/vue-router": "^7.0.0",
+        "@ionic/vue-router": "^7.0.0",
-    "ionicons": "^7.0.0",
+        "ionicons": "^7.0.0",
-    "swiper": "^11.0.7",
+        "swiper": "^11.0.7",
-    "vue": "^3.3.0",
+        "vue": "^3.3.0",
-    "vue-router": "^4.2.0"
+        "vue-router": "^4.2.0"
-  },
+    },
-  "devDependencies": {
+    "devDependencies": {
-    "@capacitor/cli": "^5.7.4",
+        "@capacitor/cli": "^5.7.4",
-    "@vitejs/plugin-legacy": "^5.0.0",
+        "@vitejs/plugin-legacy": "^5.0.0",
-    "@vitejs/plugin-vue": "^4.0.0",
+        "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+        "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.3.0",
+        "@vue/test-utils": "^2.3.0",
-    "cypress": "^13.5.0",
+        "cypress": "^13.5.0",
-    "eslint": "^8.35.0",
+        "eslint": "^8.35.0",
-    "eslint-plugin-vue": "^9.9.0",
+        "eslint-plugin-vue": "^9.9.0",
-    "jsdom": "^22.1.0",
+        "jsdom": "^22.1.0",
-    "terser": "^5.4.0",
+        "terser": "^5.4.0",
-    "typescript": "^5.1.6",
+        "typescript": "^5.1.6",
-    "vite": "^5.0.0",
+        "vite": "^5.0.0",
-    "vitest": "^0.34.6",
+        "vitest": "^0.34.6",
-    "vue-tsc": "^1.0.24"
+        "vue-tsc": "^1.0.24"
-  },
+    },
-  "description": "An Ionic project"
+    "description": "An Ionic project"
-}
+}

src/components/PagesHeader.vue

@@ -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>

src/router/index.ts

@@ -7,7 +7,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("@/views/HomePage.vue"),
   },
   {
-    path: "/rooms/",
+    path: "/rooms",
     component: () => import("@/views/RoomsPage.vue"),
   },
 ];

src/views/HomePage.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"
+      <ion-button fill="outline" color="dark" routerLink="/rooms"
-        >DÉCOUVRIR</IonButton
+        >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%);
   }
 

src/views/RoomsPage.vue

@@ -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>