conflits...

front/MyINPulse-front/src/App.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
+import HelloWorld from './components/HelloWorld.vue'
+import Header from './components/Header.vue';
+import ProjectComp from './components/Project-comp.vue';
+import CanvasView from './components/canvas/Lean-canvas.vue';
 import ErrorWrapper from "@/views/errorWrapper.vue";
 </script>
 
@@ -13,10 +17,29 @@ import ErrorWrapper from "@/views/errorWrapper.vue";
         :projectName="project.name"
       />
     </div>
+  <div id="canvas">
+      <button @click="$router.push('/canvas')">Voir Canvas</button>
+  </div>
   <RouterView />
 </template>
 
 <style scoped>
+
+#canvas { /* My shit */
+  margin-top: 20px;
+}
+button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
+}
+button:hover {
+  background-color: #0056b3;
+}
+
 </style>
 
 <script lang="ts">
@@ -28,6 +51,7 @@ export default {
   components: {
     Header,
     ProjectComp,
+    CanvasView, // My shit
   },
   data() {
     return {

front/MyINPulse-front/src/components/canvas/Avantage.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>9. Avantage déloyal</h3>
+        <p>Ce qui ne peut pas être facilement copié ou acheté</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Canaux.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>5. Canaux</h3>
+        <p>Chemins d'accès aux clients</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Couts.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>7. Structure des coûts</h3>
+        <p>Coûts d'acquisition, distribution, hébergement, employés...</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Header.vue

@@ -0,0 +1,37 @@
+<template>
+    <header>
+      <img src="@/assets/logo-inpulse.png" alt="INPulse Logo">
+      <div class="header-buttons">
+        <div class="contact-menu">
+          <button class="contact-button" @click="toggleDropdown">Contact</button>
+          <div class="contact-dropdown" v-show="isDropdownOpen">
+            <button>Contact All</button>
+            <button>Contact Person 1</button>
+            <button>Contact Person 2</button>
+            <button>Contact Person 3</button>
+          </div>
+          <div class="return"><a href="/">return to list project</a></div>
+        </div>
+      </div>
+    </header>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        isDropdownOpen: false
+      };
+    },
+    methods: {
+      toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Indicateurs.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>8. Indicateurs clés</h3>
+        <p>Activités clés que vous souhaitez évaluer</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Lean-canvas.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="canvas">
+      <div class="row">
+        <Probleme />
+        <Segments />
+      </div>
+      <div class="row">
+        <Solution />
+        <Valeur />
+        <Canaux />
+      </div>
+      <div class="row">
+        <Couts />
+        <Revenus />
+      </div>
+      <div class="row">
+        <Indicateurs />
+        <Avantage />
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import Probleme from "./Probleme.vue";
+  import Segments from "./Segments.vue";
+  import Solution from "./Solution.vue";
+  import Valeur from "./Valeur.vue";
+  import Canaux from "./Canaux.vue";
+  import Revenus from "./Revenus.vue";
+  import Couts from "./Couts.vue";
+  import Indicateurs from "./Indicateurs.vue";
+  import Avantage from "./Avantage.vue";
+  
+  export default {
+    components: { Probleme, Segments, Solution, Valeur, Canaux, Revenus, Couts, Indicateurs, Avantage }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Probleme.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+      <h3>1. Problème</h3>
+      <p>3 problèmes essentiels à résoudre pour le client</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Revenus.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>6. Sources de revenus</h3>
+        <p>Modèle de revenus, durée, revenus espérés, marge espérée</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Segments.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>2. Segments de clients</h3>
+        <p>Clients cibles</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Solution.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>4. Solution</h3>
+        <p>3 fonctionnalités essentielles pour le client</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/Valeur.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="cell produit" @click="toggleExpand">
+        <h3>3. Proposition de valeur unique</h3>
+        <p>Message simple, clair et persuasif expliquant en quoi votre produit est différent et mérite d'être acheté</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    methods: {
+      toggleExpand(event) {
+        event.currentTarget.classList.toggle("expanded");
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  </style>
+  

front/MyINPulse-front/src/components/canvas/style-project.css

@@ -0,0 +1,184 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 10px;
+  }
+  
+  .canvas {
+    display: flex;
+    flex-direction: column;
+    max-width: 1200px;
+    margin: 20px auto;
+    border: 2px dashed #d33;
+    background: #fff;
+  }
+  
+  .row {
+    display: flex;
+  }
+  
+  .cell {
+    flex: 1;
+    border: 1px solid #ddd;
+    padding: 10px;
+    text-align: center;
+    background-color: #f1f1f1;
+  }
+  
+  .produit {
+    background-color: #f9e4e4;
+  }
+  
+  .marche {
+    background-color: #e4f1f9;
+  }
+  
+  .valeur {
+    background-color: #f9f4e4;
+  }
+  
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    color: #333;
+  }
+  
+  p {
+    margin: 5px 0 0;
+    font-size: 14px;
+  }
+  
+
+  body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f9f9f9;
+  }
+
+  h1 img {
+    height: 80px;
+  }
+
+  .canvas {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+    border: 2px dashed #d33;
+    background-color: #fff;
+  }
+
+  .row {
+    display: flex;
+    margin-bottom: 10px;
+  }
+
+  .cell {
+    flex: 1;
+    border: 1px solid #ddd;
+    padding: 20px;
+    text-align: center;
+    background-color: #f1f1f1;
+  }
+
+  #ade {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+    text-align: center;
+    background-color: #e8f5e9;
+    border: 2px solid #4caf50;
+    border-radius: 10px;
+  }
+
+  #ade h3 {
+    color: #2e7d32;
+  }
+
+  #ade p {
+    margin: 10px 0;
+    font-size: 16px;
+    color: #333;
+  }
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #fff;
+    border-bottom: 2px solid #ddd;
+  }
+
+  header img {
+    height: 60px;
+  }
+
+  header .contact-menu {
+    position: relative;
+  }
+
+  .expanded {
+    transform: scale(1.2); /* L'élément reste agrandi */
+    transition: transform 0.3s ease; /* Animation fluide */
+  }
+
+  .contact-button, .return {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    background-color: #2196f3;
+    color: #fff;
+    cursor: pointer;
+  }
+
+ .contact-button:hover, .return:hover {
+    background-color: #1976d2;
+  }
+
+  /* Dropdown styling */
+  .contact-dropdown {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+    padding: 15px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+  }
+
+  .contact-dropdown button {
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    background-color: #4caf50;
+    color: #fff;
+    cursor: pointer;
+  }
+
+  .contact-dropdown button:hover {
+    background-color: #388e3c;
+  }
+
+  .return {
+    background-color: #f44336;
+  }
+
+  .return:hover {
+    background-color: #d32f2f;
+  }
+
+  .header-buttons {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+
+  a{
+    color: white;
+  }

front/MyINPulse-front/src/main.ts

@@ -29,6 +29,47 @@ keycloakService.CallInit(() => {
 
 })
 
+// this shit made by me so i can run the canva vue app
+createApp(App).use(router).mount('#app');
+
+// TODO: fix the comment
+/*
+function tokenInterceptor () {
+    axios.interceptors.request.use(config => {
+        const keycloak = useKeycloak()
+        if (keycloak.authenticated) {
+            // Note that this is a simple example.
+            // you should be careful not to leak tokens to third parties.
+            // in this example the token is added to all usage of axios.
+            config.headers.Authorization = `Bearer ${keycloak.token}`
+        }
+        return config
+    }, error => {
+        console.error("tokenInterceptor: Rejected")
+        return Promise.reject(error)
+    })
+}
+*/
+
+/*
+app.use(VueKeyCloak,{
+    onReady: (keycloak) => {
+        console.log("Ready !")
+        tokenInterceptor()
+    },
+    init: {
+        onLoad: 'login-required',
+        checkLoginIframe: false,
+
+    },
+
+    config: {
+        realm: 'test',
+        url: 'http://localhost:7080',
+        clientId: 'myinpulse'
+    }
+}  );
+*/
 
 
 

front/MyINPulse-front/src/router/router.ts

@@ -11,6 +11,13 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/test.vue'),
     },
+
+      // route pour les canvas (made by adnane), in fact the two vue apps are separated for now
+    {
+      path: '/canvas',
+      name: 'canvas',
+      component: () => import('../views/CanvasView.vue'),
+    },
   ],
 })
 

front/MyINPulse-front/src/views/CanvasView.vue

@@ -0,0 +1,12 @@
+<!-- src/views/CanvasView.vue -->
+<template>
+    <div>
+      <h1>Page Canvas</h1>
+      <LeanCanvas />
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import LeanCanvas from '@/components/canvas/Lean-canvas.vue';
+  </script>
+