42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changements dans les dockerfiles + ajout de quelques trucs pour svelte en PoC

Browse Source
This commit is contained in:
batche
2022-11-14 16:02:54 +01:00
parent 8b4545f4d6
commit aa3eb111c1
15 changed files with 213 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
srcs/requirements/svelte/api_front/src/App.svelte
View File

@@ -2,10 +2,12 @@
import Login from "./pages/auth/login.svelte";
import Home from "./pages/home/home.svelte";
import Router, {link} from 'svelte-spa-router';
import Profil from "./pages/profil/profil.svelte";
const routes = {
"/": Home,
"/login": Login,
"/profil": Profil,
};
</script>
@@ -19,10 +21,12 @@
<li>
<a href="/" type="button" class="btn btn-primary">Home</a>
</li>
<!-- <li>
<a href="/profil" use:link type="button" class="btn btn-primary">Profil</a>
</li> -->
</ul>
<div class="text-end">
<a href="/login" use:link type="button" class="btn btn-warning">Connexion</a>
</div>
</div>

13
srcs/requirements/svelte/api_front/src/pages/auth/login.svelte
View File

@@ -1,18 +1,23 @@
<script lang="ts">
import axios from 'axios';
import { onMount } from 'svelte';
import {push} from 'svelte-spa-router';
let user = {logedIn: false};
onMount(async () => {
console.log('PROFIL SVELTE');
const {data} = await axios.get('http://transcendance:8080/api/v2/user');
if (data)
user.logedIn = true;
});
$: submit = async() => {
window.location.href = 'http://transcendance:8080/api/v2/auth';
if (document.cookie) {
user.logedIn = true;
}
}
$: logout = async() => {
fetch('http://transcendance:8080/api/v2/auth/logout');
await fetch('http://transcendance:8080/api/v2/auth/logout',);
user.logedIn = false;
}

104
srcs/requirements/svelte/api_front/src/pages/home/home.svelte
View File

@@ -1,69 +1,55 @@
<script>
let href =
import Router, { link } from "svelte-spa-router";
import Login from "../auth/login.svelte";
import Profil from "../profil/profil.svelte";
const routes = {
"/login": Login,
"/profil": Profil,
};
</script>
<body>
<main class="d-flex flex-nowrap">
<h1 class="visually-hidden">Sidebars examples</h1>
<main class="d-flex flex-nowrap">
<h1 class="visually-hidden">Sidebars examples</h1>
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="/pouepouet" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
Profil
</a>
</li>
<li>
<a href="#" class="nav-link text-white" on:click={color}>
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
Customers
</a>
</li>
</ul>
<hr>
</div>
</main>
<div
class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;"
>
<a href="/" use:link class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-4">Sidebar</span>
</a>
<hr />
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a
href="/profil"
use:link
class="nav-link active"
aria-current="page"
>
Profil
</a>
</li>
</ul>
<hr />
</div>
</main>
</body>
<Router {routes} />
<style>
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
main {
height: 100vh;
height: -webkit-fill-available;
max-height: 100vh;
overflow-x: auto;
overflow-y: hidden;
}
.dropdown-toggle { outline: 0; }
min-height: 100vh;
min-height: -webkit-fill-available;
}
main {
height: 100vh;
height: -webkit-fill-available;
max-height: 100vh;
overflow-x: auto;
overflow-y: hidden;
}
</style>

42
srcs/requirements/svelte/api_front/src/pages/profil/profil.svelte
View File

@@ -1,14 +1,44 @@
<script>
import axios from "axios";
import { onMount } from "svelte";
let user = {};
onMount (async() => {
const response = await fetch('http://transcendance:8080/api/v2/user');
const data = await response.json();
console.log("PROFIL SVELTE");
const {data} = await axios.get('http://transcendance:8080/api/v2/user');
console.log(data.username);
console.log(data);
user = data;
});
const profile = {
</script>
<body>
<main class="form-signin w-100 m-auto">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Profil</h1>
<ul>
<li>username : {user.username}</li>
</ul>
</div>
</div>
</div>
</main>
</body>
<style>
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
}
.form-signin {
max-width: 330px;
padding: 15px;
}
</style>