@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<header>
|
||||
<img src="./icons/logo inpulse.png" alt="INPulse" />
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Header',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
header img {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
background-color: #fff;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
</style>
|
||||
@ -1,129 +0,0 @@
|
||||
<template>
|
||||
<div @click="goToLink" class="project">
|
||||
<div class="project-header">
|
||||
<h2 >{{ projectName }}</h2>
|
||||
<div class="project-buttons">
|
||||
<button class="contact-btn">Contact</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-body">
|
||||
<ul>
|
||||
<li v-for="(name, index) in listName" :key="index">{{ name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from "vue";
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
|
||||
const props = defineProps<{
|
||||
projectName: string;
|
||||
listName: string[];
|
||||
projectLink: string;
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const goToLink = () => {
|
||||
if (props.projectLink) {
|
||||
router.push(props.projectLink);
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.project {
|
||||
background: linear-gradient(to right, #f4f4f4, #ffffff);
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Header Styling */
|
||||
.project-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-header h2 {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Button Container */
|
||||
.project-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.info-btn {
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.info-btn:hover {
|
||||
background-color: #45a049;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.contact-btn {
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.contact-btn:hover {
|
||||
background-color: #0056b3;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.project-body {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.project-body p {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.project-body ul {
|
||||
list-style-type: disc;
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.project-body ul li {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
padding: 10px 15px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
</style>
|
||||
120
front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
Normal file
120
front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<header>
|
||||
<img src="../icons/logo inpulse.png" alt="INPulse Logo">
|
||||
<div class="header-buttons">
|
||||
<div class="menu">
|
||||
<button class="contact-button" @click="toggleDropdown">Contact</button>
|
||||
<div class="contact-dropdown" v-bind:class="{ 'dropdown-visible': isDropdownOpen }">
|
||||
<button @click="contactAll">Contact All</button>
|
||||
<button v-for="(email, index) in entrepreneurEmails" :key="index">
|
||||
{{ email }}
|
||||
</button>
|
||||
</div>
|
||||
<button class="return-button">
|
||||
<RouterLink to="/">Return to list project</RouterLink>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import axios from "axios";
|
||||
|
||||
const isDropdownOpen = ref(false);
|
||||
const entrepreneurEmails = ref([]);
|
||||
|
||||
const toggleDropdown = () => {
|
||||
isDropdownOpen.value = !isDropdownOpen.value;
|
||||
console.log("Dropdown toggled:", isDropdownOpen.value); // for debug purposes
|
||||
};
|
||||
|
||||
const fetchEntrepreneurs = async () => {
|
||||
try {
|
||||
const response = await axios.get("http://localhost:5000/entrepreneurs");
|
||||
entrepreneurEmails.value = response.data.map((e: { email: string }) => e.email);
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la récupération des entrepreneurs:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const contactAll = () => {
|
||||
alert("Contacter tous les entrepreneurs : " + entrepreneurEmails.value.join(", "));
|
||||
};
|
||||
|
||||
onMounted(fetchEntrepreneurs);
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
@import "@/components/canvas/style-project.css";
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.contact-button, .return-button {
|
||||
background-color: #000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.return-button a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contact-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.contact-dropdown button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.contact-dropdown button:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.dropdown-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
header img {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,17 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps(['data']);
|
||||
import { color } from "@/services/popupDisplayer.ts";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
defineProps({
|
||||
errorMessage: {
|
||||
type: Object as PropType<string>,
|
||||
required: true,
|
||||
},
|
||||
errorColor: {
|
||||
type: Object as PropType<color>,
|
||||
default: color.Red,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class='["red", "yellow", "blue", "green"][data.type]' class="error-modal">
|
||||
<p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][data.type]}}</p>
|
||||
<p>{{data.errorMessage}}</p>
|
||||
<div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][data.type]'></div>
|
||||
</div>
|
||||
<div
|
||||
:class="['red', 'yellow', 'blue', 'green'][errorColor]"
|
||||
class="error-modal"
|
||||
>
|
||||
<p>
|
||||
{{
|
||||
["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][errorColor]
|
||||
}}
|
||||
</p>
|
||||
<p>{{ errorMessage }}</p>
|
||||
<div
|
||||
class="loading"
|
||||
:class="
|
||||
['red-loader', 'yellow-loader', 'blue-loader', 'green-loader'][
|
||||
errorColor
|
||||
]
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.error-modal{
|
||||
.error-modal {
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
@ -19,41 +45,45 @@ const props = defineProps(['data']);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
animation: disappear 5s linear forwards;
|
||||
}
|
||||
}
|
||||
|
||||
.red{
|
||||
.red {
|
||||
background-color: #ee6055;
|
||||
color: white;
|
||||
}
|
||||
.red-loader {
|
||||
}
|
||||
|
||||
.red-loader {
|
||||
background-color: #fa8383;
|
||||
}
|
||||
}
|
||||
|
||||
.yellow{
|
||||
background-color: #FF9D23;
|
||||
color: white;
|
||||
}
|
||||
.yellow-loader{
|
||||
.yellow {
|
||||
background-color: #ff9d23;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.yellow-loader {
|
||||
background-color: #ffbf81;
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
.blue {
|
||||
background-color: #809bce;
|
||||
color: white;
|
||||
}
|
||||
.blue-loader{
|
||||
background-color: #95b8d1;
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
.blue-loader {
|
||||
background-color: #95b8d1;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
.green-loader {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
.green-loader {
|
||||
background-color: darkgreen;
|
||||
}
|
||||
|
||||
.loading {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
@ -62,33 +92,33 @@ const props = defineProps(['data']);
|
||||
height: 1em;
|
||||
width: 0;
|
||||
animation: loading 4s linear forwards;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for the loading bar */
|
||||
@keyframes loading {
|
||||
/* Animation for the loading bar */
|
||||
@keyframes loading {
|
||||
0% {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
width: 0;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes disappear {
|
||||
@keyframes disappear {
|
||||
0% {
|
||||
height: 100px;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
height: 100px;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
}
|
||||
80% {
|
||||
height: 100px;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
height: 100px;
|
||||
padding: 1em;
|
||||
margin: 1em;
|
||||
}
|
||||
100% {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user