jsp mec

kouacc · May 28, 2024 · aa2af0c · aa2af0c
1 parent 77784a2
commit aa2af0c
Show file tree

Hide file tree

Showing 45 changed files with 1,033 additions and 742 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
     <link rel="stylesheet" href="https://use.typekit.net/anh0dbq.css" />
-    <script src="https://kit.fontawesome.com/b0ac94d361.js" crossorigin="anonymous"></script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -10,11 +10,7 @@ let pb = null
 const currentuser = ref()
 
 onMounted(async () => {
-  let pocketbase_ip = ''
-  if (import.meta.env.MODE === "production")
-    pocketbase_ip = "http://193.168.147.74:8090/"
-  else pocketbase_ip = "http://127.0.0.1:8090/"
-  pb = new Pocketbase(pocketbase_ip)
+  pb = new Pocketbase('http://127.0.0.1:8090')
   
   currentuser.value = pb.authStore.isValid ? pb.authStore.model : null
   if (!currentuser.value && window.location.pathname !== '/login') {

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -26,12 +26,14 @@
   }
   label {
   }
-  input, textarea, button {
-    @apply font-serif
+  input,
+  textarea,
+  button {
+    @apply font-serif;
   }
   @layer components {
-  .container {
-    @apply max-w-screen-xl mx-auto px-28;
+    .container {
+      @apply max-w-screen-xl mx-auto px-28;
+    }
   }
 }
-}
diff --git a/src/backend.ts b/src/backend.ts
@@ -1,12 +1,10 @@
-import PocketBase from 'pocketbase'
-const pb = new PocketBase('http://127.0.0.1:8090')
+import Pocketbase from 'pocketbase'
+const pb = new Pocketbase('https://app-pulsenews.maxencelallemand.fr:443')
 import axios from 'axios'
-import { ref } from 'vue'
-
 
 // Copier ici les fonctions developpées en R214 | Système d'information
 
-export async function getUser(username : string ) {
+export async function getUser(username: string) {
   const record = await pb.collection('users').getOne(username)
   return record
 }
@@ -48,22 +46,22 @@ export async function unlinkWebauthnKey(userid) {
 
 export async function changePasswordLoggedIn(userid, password, passwordConfirm, oldPassword) {
   const userObject = {
-    "password": password,
-    "passwordConfirm": passwordConfirm,
-    "oldPassword": oldPassword
+    password: password,
+    passwordConfirm: passwordConfirm,
+    oldPassword: oldPassword
   }
   await pb.collection('users').update(userid, userObject)
   return true
 }
 
 export async function saveContent(userid, idcontent, category_type) {
-  await pb.collection('content').update(userid, { idcontent: idcontent, category_type: category_type })
+  await pb
+    .collection('content')
+    .update(userid, { idcontent: idcontent, category_type: category_type })
   return true
 }
 
 export async function getContent(contentid) {
-  const content = await axios.get(
-    `https://api.artic.edu/api/v1/artworks/${contentid}`
-  )
+  const content = await axios.get(`https://api.artic.edu/api/v1/artworks/${contentid}`)
   return content.data.data
-}
+}
diff --git a/src/components/ActionButton.vue b/src/components/ActionButton.vue
@@ -24,4 +24,4 @@ const variantClass = {
     <ArrowIcon />
     {{ text }}
   </RouterLink>
-</template>
+</template>
diff --git a/src/components/ActionWindow.vue b/src/components/ActionWindow.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="bg-black/30 fixed left-0 top-0 w-screen h-screen grid">
-        <div class="grid place-self-center bg-slate-100 w-3/5 h-fit p-10 rounded-xl gap-5">
-            <slot />
-        </div>
+  <div class="bg-black/30 fixed left-0 top-0 w-screen h-screen grid">
+    <div class="grid place-self-center bg-slate-100 w-3/5 h-fit p-10 rounded-xl gap-5">
+      <slot />
     </div>
-</template>
+  </div>
+</template>
diff --git a/src/components/AlertWindow.vue b/src/components/AlertWindow.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 defineProps({
-    bad: Boolean
+  bad: Boolean
 })
 </script>
 
 <template>
-   <div v-if="bad === true" class="bg-red-300 px-10 py-7 fixed rounded-xl bottom-4 right-4">
-        <slot />
-   </div> 
-   <div v-else class="bg-green-300 px-10 py-7 fixed rounded-xl bottom-4 right-4">
-        <slot />
-   </div>
-</template>
+  <div v-if="bad === true" class="bg-red-300 px-10 py-7 fixed rounded-xl bottom-4 right-4">
+    <slot />
+  </div>
+  <div v-else class="bg-green-300 px-10 py-7 fixed rounded-xl bottom-4 right-4">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/CardContent.vue b/src/components/CardContent.vue
@@ -1,31 +1,42 @@
 <script setup lang="ts">
-import type { ContentType } from '@/types';
-import { RouterLink } from 'vue-router';
+import type { ContentCardType } from '@/types'
+import { RouterLink } from 'vue-router'
 import { ref } from 'vue'
-import IconBookmark from './icons/IconBookmark.vue';
+import IconBookmark from './icons/IconBookmark.vue'
 
-import { saveContent } from '@/backend';
+import { saveContent } from '@/backend'
 
 let windowSave = ref(false)
 
-defineProps<ContentType>()
-
+const props = withDefaults(defineProps<ContentCardType & { variant?: 'default' | 'lazyload' }>(), {
+  variant: 'default'
+})
 </script>
 
 <template>
-    <li class="flex flex-col gap-2 flex-none flex-shrink-0">
-        <RouterLink :to="`/content/${id}`">
-            <div class="bg-gray-800 flex items-center justify-center">
-                <img class="w-32 h-full" :src="'https://www.artic.edu/iiif/2/'+image_id+'/full/843,/0/default.jpg'" :alt="alt_text" />
-            </div>
-
-        <h3 class="line-clamp-1">{{ title }}</h3>
-        </RouterLink>
-        <button class="place-self-end" @click="windowSave = ! windowSave">
-            <IconBookmark class="w-4" />
-        </button>
-        <div v-show="windowSave" class="absolute top-0 right-0 bg-slate-300">
-
-        </div>
-    </li>
-</template>
+  <li v-if="variant === 'default'" class="flex flex-col gap-2 flex-none flex-shrink-0">
+    <RouterLink :to="`/content/${id}`">
+      <div class="bg-gray-800 flex items-center justify-center">
+        <img
+          class="w-32 h-full"
+          :src="'https://www.artic.edu/iiif/2/' + image_id + '/full/843,/0/default.jpg'"
+          :alt="alt_text"
+        />
+      </div>
+      <h3 class="line-clamp-1">{{ title }}</h3>
+    </RouterLink>
+    <button class="place-self-end" @click="windowSave = !windowSave">
+      <IconBookmark class="w-4" />
+    </button>
+    <div v-show="windowSave" class="absolute top-0 right-0 bg-slate-300"></div>
+  </li>
+  <li v-else-if="variant === 'lazyload'">
+    <div class="flex flex-col gap-2">
+      <div class="bg-gray-300 px-32 py-28 w-full h-full rounded-lg"></div>
+      <div class="flex justify-between">
+        <div class="bg-gray-300 w-36 h-8 rounded-lg"></div>
+        <div class="bg-gray-300 w-14 h-8 rounded-lg"></div>
+      </div>
+    </div>
+  </li>
+</template>
diff --git a/src/components/ContentTag.vue b/src/components/ContentTag.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router';
+import { RouterLink } from 'vue-router'
 
 defineProps({
-    tag: String,
+  tag: String
 })
 </script>
 
 <template>
-    <li>
-        <RouterLink :to="`/search?tag=${tag}`" class="px-5 py-2 bg-slate-300/30 rounded-xl">
-            <span>{{ tag }}</span>
-        </RouterLink>
-    </li>
-</template>
+  <li>
+    <RouterLink :to="`/search?tag=${tag}`" class="px-5 py-2 bg-slate-300/30 rounded-xl">
+      <span>{{ tag }}</span>
+    </RouterLink>
+  </li>
+</template>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -1,48 +1,53 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
+import IconFacebook from './icons/IconFacebook.vue'
+import IconTwitter from './icons/IconTwitter.vue'
+import IconInstagram from './icons/IconInstagram.vue'
 import LogoBlack from './icons/LogoBlack.vue'
 </script>
 
 <template>
-  <footer class="flex justify-between mt-5 py-5 px-20">
+  <footer class="flex flex-col lg:flex-row justify-evenly mt-5 py-5 px-10 lg:px-20">
     <div class="flex flex-col gap-3">
       <LogoBlack />
       <p>© 2024 Pulse News SARL</p>
-      <ul class="flex gap-5 text-3xl">
-        <li><i class="fa-brands fa-facebook"></i></li>
-        <li><i class="fa-brands fa-twitter"></i></li>
-        <li><i class="fa-brands fa-instagram"></i></li>
+      <ul class="flex gap-5 items-center">
+        <RouterLink to="#"><IconFacebook /></RouterLink>
+        <RouterLink to="#"><IconTwitter /></RouterLink>
+        <RouterLink to="#"><IconInstagram /></RouterLink>
+      </ul>
+    </div>
+    <div class="grid grid-cols-2 gap-5 lg:grid-cols-4">
+      <ul class="font-serif">
+        <li>
+          <p><b>Pulse</b></p>
+        </li>
+        <li><a href="team.html">Équipe</a></li>
+        <li><a href="about.html">À propos</a></li>
+      </ul>
+      <ul class="font-serif">
+        <li>
+          <p><b>Produit</b></p>
+        </li>
+        <li><a href="features.html">Fonctionnalités</a></li>
+        <li><a href="prices.html">Tarifs</a></li>
+      </ul>
+      <ul class="font-serif">
+        <li>
+          <p><b>Support</b></p>
+        </li>
+        <li><a href="">Centre d'aide</a></li>
+        <li><a href="">FAQ</a></li>
+        <li><a href="">Contacter le support</a></li>
+      </ul>
+      <ul class="font-serif">
+        <li>
+          <p><b>Légal</b></p>
+        </li>
+        <li><a href="">Conditions générales d'utilisation</a></li>
+        <li><a href="">Conditions générales de vente</a></li>
+        <li><a href="">Politique de confidentialité</a></li>
       </ul>
     </div>
-    <ul class="font-serif">
-      <li>
-        <p><b>Pulse</b></p>
-      </li>
-      <li><a href="team.html">Équipe</a></li>
-      <li><a href="about.html">À propos</a></li>
-    </ul>
-    <ul class="font-serif">
-      <li>
-        <p><b>Produit</b></p>
-      </li>
-      <li><a href="features.html">Fonctionnalités</a></li>
-      <li><a href="prices.html">Tarifs</a></li>
-    </ul>
-    <ul class="font-serif">
-      <li>
-        <p><b>Support</b></p>
-      </li>
-      <li><a href="">Centre d'aide</a></li>
-      <li><a href="">FAQ</a></li>
-      <li><a href="">Contacter le support</a></li>
-    </ul>
-    <ul class="font-serif">
-      <li>
-        <p><b>Légal</b></p>
-      </li>
-      <li><a href="">Conditions générales d'utilisation</a></li>
-      <li><a href="">Conditions générales de vente</a></li>
-      <li><a href="">Politique de confidentialité</a></li>
-    </ul>
   </footer>
 </template>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -12,16 +12,15 @@ onMounted(async () => {
   pb = new Pocketbase('http://127.0.0.1:8090')
 
   currentuser.value = pb.authStore.isValid ? pb.authStore.model : null
-
 })
 
 const avatarUrl = ref<string>('')
 
 watch(currentuser, (newVal, oldVal) => {
   if (newVal) {
-    avatarUrl.value = pb.getFileUrl(newVal,newVal.avatar, {'thumb': '100x250'});
+    avatarUrl.value = pb.getFileUrl(newVal, newVal.avatar, { thumb: '100x250' })
   }
-});
+})
 
 let profileCard = ref(false)
 </script>
@@ -34,10 +33,11 @@ let profileCard = ref(false)
         <RouterLink to="/explore">Explorer</RouterLink>
         <RouterLink to="/search">Rechercher</RouterLink>
       </div>
-      <button @click="profileCard = ! profileCard" class="w-[3%]"><img :src="avatarUrl" alt="Avatar utilisateur"></button>
+      <button @click="profileCard = !profileCard" class="w-[3%]">
+        <img class="rounded-full" :src="avatarUrl" alt="Avatar utilisateur" />
+      </button>
       <ProfileCard v-show="profileCard" />
     </nav>
-
   </header>
   <header v-else class="flex flex-row items-center justify-between px-6 py-5">
     <div class="flex items-center gap-4">
@@ -52,5 +52,4 @@ let profileCard = ref(false)
       <RouterLink to="/register">S'inscrire</RouterLink>
     </nav>
   </header>
-
 </template>
diff --git a/src/components/OfflineWindow.vue b/src/components/OfflineWindow.vue
@@ -4,9 +4,7 @@ import Warning from './icons/IconWarning.vue'
 
 import { ref } from 'vue'
 
-const isOffline = ref(false) 
-
-
+const isOffline = ref(false)
 </script>
 
 <template>