lilianrock/generateur_v3
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: lilianrock:8c83658708e44c43b6bfc341d20a42217d5f6294
Branches Tags
lilianrock:main
..
compare: lilianrock:90b48e710fc84af8138b5cbb0f8e94c6454e919a
Branches Tags
lilianrock:main

No commits in common. "8c83658708e44c43b6bfc341d20a42217d5f6294" and "90b48e710fc84af8138b5cbb0f8e94c6454e919a" have entirely different histories.
8c83658708 ... 90b48e710f

51 changed files with 1488 additions and 2033 deletions
Show Stats Expand all files Collapse all files

131
backend/api/database/room/crud.py
View File

@ -5,7 +5,7 @@ from typing import List
from fastapi import Depends, HTTPException, status, Query
from pydantic import BaseModel
from sqlalchemy import func
from sqlmodel import Session, delete, select, col, update
from sqlmodel import Session, delete, select, col
from database.auth.crud import get_user_from_token
from database.auth.models import User
@ -59,12 +59,6 @@ def change_room_status(room: Room, public: bool, db: Session):
return room
def delete_room_db(room: Room, db: Session):
db.delete(room)
db.commit()
return True
def get_member_from_user(user_id: int, room_id: int, db: Session):
member = db.exec(select(Member).where(Member.room_id ==
room_id, Member.user_id == user_id)).first()
@ -115,8 +109,7 @@ def get_member_from_clientId(clientId: str, room_id: int, db: Session):
return member
def create_member(*, room: Room, user: User | None = None, anonymous: Anonymous | None = None, waiting: bool = False,
db: Session):
def create_member(*, room: Room, user: User | None = None, anonymous: Anonymous | None = None, waiting: bool = False, db: Session):
member_id = generate_unique_code(Member, s=db)
member = Member(room=room, user=user, anonymous=anonymous, waiting=waiting,
id_code=member_id)
@ -276,8 +269,6 @@ def refuse_waiter(member: Member, db: Session):
def leave_room(member: Member, db: Session):
# db.execute(delete(Challenger).where(col(Challenger.member_id) == member.id))
# db.execute(delete(TmpCorrection).where(col(TmpCorrection.member_id) == member.id))
db.delete(member)
db.commit()
return None
@ -333,12 +324,6 @@ def getChallenges(c: Challenger, db: Session):
return challenges
def getMemberChallenges(m: Member, p: Parcours, db: Session):
challenges = db.exec(select(Challenge).where(Challenge.challenger_mid == m.id,
Challenge.challenger_pid == p.id)).all()
return challenges
def getTops(p: Parcours, db: Session):
tops = db.exec(select(Challenge).where(Challenge.parcours_id == p.id_code).order_by(
col(Challenge.mistakes), col(Challenge.time)).limit(3)).all()
@ -385,13 +370,6 @@ def getMemberAvgRank(m: Member, p: Parcours, db: Session):
return getAvgRank(challenger, p, db)
def getMemberValidated(m: Member, p: Parcours, db: Session):
challenger = db.exec(select(Challenger).where(Challenger.member_id == m.id)).first()
if challenger is None or challenger.validated is None:
return None
return challenger.validated
def serialize_parcours(parcours: Parcours, member: Member, db: Session):
tops = getTops(parcours, db)
avgTop = getAvgTops(parcours, db)
@ -414,13 +392,55 @@ def serialize_parcours(parcours: Parcours, member: Member, db: Session):
challengers = db.exec(statement).all()
challs = {c.member.id_code: {
"challenger": {"id_code": c.member.id_code, "name": getUsername(c.member), "validated": c.validated},
"challenger": {"id_code": c.member.id_code, "name": getUsername(c.member)},
# 'validated': chall.mistakes <= parcours.max_mistakes
"challenges": [Challenges(**{**chall.dict(), "canCorrige": chall.data != []}) for chall in getChallenges(c, db)]
} for c in challengers}
return {**parcours.dict(), "pb": pb, "tops": tops, "challenges": challs, "rank": noteRank, "memberRank": avgRank,
"validated": challenger.validated if challenger != None else False, "ranking": avgTop}
tops = []
challs = {}
challenges = sorted(parcours.challenges, key=lambda x: (
x.note['value'], x.time), reverse=True)
memberRank = None
rank = None
pb = None
validated = False
total = 0
for i, chall in enumerate(challenges):
total += chall.note['value']
id = chall.challenger.id_code
name = chall.challenger.user.username if chall.challenger.user_id != None else chall.challenger.anonymous.username
if i <= 2:
tops.append({"challenger": {"id_code": id, "name": name},
"note": chall.note, "time": chall.time})
if id == member.id_code:
if challs.get(id) is None:
rank = i + 1
memberRank = len(challs) + 1
pb = {"note": chall.note, "time": chall.time}
if validated is False and chall.validated:
validated = True
if member.is_admin or chall.challenger.id_code == member.id_code:
t = challs.get(id, {"total": 0})['total']
challs[id] = {"challenger": {"id_code": id, "name": name
}, "challenges": [*challs.get(id, {'challenges': []})['challenges'],
Challenges(
**{**chall.dict(), "canCorrige": chall.data != []})],
"total": t + chall.note['value']}
topMembers = [{**c['challenger'], "avg": c['total'] /
len(c['challenges'])} for id, c in challs.items()]
topMembers.sort(key=lambda x: x['avg'], reverse=True)
return {**parcours.dict(), "tops": tops, "challenges": challs, "rank": rank, "memberRank": memberRank, "pb": pb,
"validated": validated,
'avg': None if len(parcours.challenges) == 0 else round(total / len(parcours.challenges), 2),
"ranking": topMembers}
def change_anonymous_clientId(anonymous: Anonymous, db: Session):
@ -490,23 +510,12 @@ def deleteParcoursRelated(parcours: Parcours, db: Session):
db.commit()
def change_challengers_validation(p: Parcours, db: Session):
stmt = update(Challenger).values(
validated=select(Challenge.id).where(Challenge.challenger_mid == Challenger.member_id,
Challenge.challenger_pid == Challenger.parcours_id,
Challenge.validated == 1).exists()).where(
Challenger.parcours_id == p.id)
db.execute(stmt)
db.commit()
return
def change_challenges_validation(p: Parcours, db: Session):
challenges = db.exec(select(Challenge).where(
Challenge.parcours_id == p.id_code)).all()
def change_challengers_validation(p: Parcours, validation: int, db: Session):
challengers = db.exec(select(Challenger).where(
Challenger.parcours_id == p.id)).all()
challs = []
for c in challenges:
validated = c.time <= p.time * 60 and c.mistakes <= p.max_mistakes
for c in challengers:
validated = c.best <= validation
if validated != c.validated:
c.validated = validated
challs.append(c)
@ -515,10 +524,26 @@ def change_challenges_validation(p: Parcours, db: Session):
db.commit()
def changeValidation(p: Parcours, db: Session):
change_challenges_validation(p, db)
def change_challenges_validation(p: Parcours, validation: int, db: Session):
change_challengers_validation(p, db)
challenges = db.exec(select(Challenge).where(
Challenge.parcours_id == p.id_code)).all()
print('CHALLS', challenges)
challs = []
for c in challenges:
validated = c.mistakes <= validation
print('CHAL', validated, c.validated, c)
if validated != c.validated:
c.validated = validated
challs.append(c)
db.bulk_save_objects(challs)
db.commit()
def changeValidation(p: Parcours, validation: int, db: Session):
change_challengers_validation(p, validation, db)
change_challenges_validation(p, validation, db)
def compareExercices(old: list[Exercices], new: list[ExercicesCreate]):
@ -538,7 +563,9 @@ def update_parcours_db(parcours: ParcoursCreate, parcours_obj: Parcours, db: Ses
update_challenges = True
parcours_obj.exercices = exercices
update_validated = parcours_obj.max_mistakes != parcours.max_mistakes or parcours_obj.time != parcours.time
if parcours_obj.max_mistakes != parcours.max_mistakes:
changeValidation(parcours_obj, parcours.max_mistakes, db)
parcours_obj.name = parcours.name
parcours_obj.time = parcours.time
parcours_obj.max_mistakes = parcours.max_mistakes
@ -547,8 +574,6 @@ def update_parcours_db(parcours: ParcoursCreate, parcours_obj: Parcours, db: Ses
db.commit()
db.refresh(parcours_obj)
if update_validated:
changeValidation(parcours_obj, db)
return parcours_obj, update_challenges
@ -703,9 +728,7 @@ def checkValidated(challenger: Challenger, db: Session, challenge: Challenge | N
def create_challenge(data: List[CorrigedData], challenger: Member, parcours: Parcours, time: int, mistakes: int,
isCorriged: bool, db: Session):
challenger_obj: Challenger = getChallenger(parcours, challenger, db)
print('VALIDATING', time <= parcours.time * 60 and mistakes <= parcours.max_mistakes, time, parcours.time)
validated = time <= parcours.time * 60 and mistakes <= parcours.max_mistakes
validated = mistakes <= parcours.max_mistakes
challenge = Challenge(data=data, challenger_pid=challenger_obj.parcours_id, challenger_mid=challenger_obj.member_id,
parcours=parcours, time=time, mistakes=mistakes, isCorriged=isCorriged,
id_code=generate_unique_code(Challenge, s=db), validated=validated)
@ -744,7 +767,7 @@ def change_challenge(challenge: Challenge, corriged: CorrigedChallenge, db: Sess
challenger.best = corriged['mistakes']
challenger.best_time = challenge.time
validated = challenge.time <= parcours.time * 60 and corriged['mistakes'] <= parcours.max_mistakes
validated = corriged['mistakes'] <= parcours.max_mistakes
challenge.validated = validated
if challenger.validated == False and validated:
@ -821,12 +844,10 @@ def get_exercices(parcours: Parcours = Depends(get_parcours), db: Session = Depe
exercices = db.exec(select(Exercice).where(col(Exercice.id_code).in_(
[e['exercice_id'] for e in parcours.exercices]))).all()
return [{"exercice": e, "quantity": [q for q in parcours.exercices if q['exercice_id'] == e.id_code][0]['quantity']}
for e in exercices]
return [{"exercice": e, "quantity": [q for q in parcours.exercices if q['exercice_id'] == e.id_code][0]['quantity']} for e in exercices]
def get_correction(correction_id: str, parcours_id: str, member: Member = Depends(get_member_dep),
db: Session = Depends(get_session)):
def get_correction(correction_id: str, parcours_id: str, member: Member = Depends(get_member_dep), db: Session = Depends(get_session)):
tmpCorr = db.exec(select(TmpCorrection).where(
TmpCorrection.id_code == correction_id, TmpCorrection.parcours_id == parcours_id)).first()
if tmpCorr is None:

16
backend/api/database/room/models.py
View File

@ -24,8 +24,8 @@ class Room(RoomBase, table=True):
id: Optional[int] = Field(default=None, primary_key=True)
id_code: str = Field(index=True)
members: List['Member'] = Relationship(back_populates="room",sa_relationship_kwargs={"cascade": "all, delete, delete-orphan"})
parcours: List['Parcours'] = Relationship(back_populates="room",sa_relationship_kwargs={"cascade": "all, delete, delete-orphan"})
members: List['Member'] = Relationship(back_populates="room")
parcours: List['Parcours'] = Relationship(back_populates="room")
class AnonymousBase(SQLModel):
@ -58,9 +58,7 @@ class Member(SQLModel, table=True):
room_id: int = Field(foreign_key="room.id")
room: Room = Relationship(back_populates='members')
challengers: List["Challenger"] = Relationship(back_populates="member", sa_relationship_kwargs={"cascade": "all, delete, delete-orphan"})
corrections: List["TmpCorrection"] = Relationship(back_populates="member", sa_relationship_kwargs={"cascade": "all, delete, delete-orphan"})
challengers: List["Challenger"] = Relationship(back_populates="member")
is_admin: bool = False
@ -70,6 +68,7 @@ class Member(SQLModel, table=True):
waiter_code: Optional[str] = Field(default=None)
corrections: List['TmpCorrection'] = Relationship(back_populates="member")
class ExercicesCreate(SQLModel):
@ -102,7 +101,7 @@ class Parcours(SQLModel, table=True):
room_id: int = Field(foreign_key="room.id")
room: Room = Relationship(back_populates='parcours')
challengers: list[Challenger] = Relationship(back_populates="parcours", sa_relationship_kwargs={"cascade": "all, delete, delete-orphan"})
challengers: list[Challenger] = Relationship(back_populates="parcours")
name: str
time: int
@ -111,9 +110,9 @@ class Parcours(SQLModel, table=True):
max_mistakes: int
exercices: List[Exercices] = Field(sa_column=Column(JSON))
challenges: List["Challenge"] = Relationship(back_populates="parcours", sa_relationship_kwargs={"cascade": "all, delete, delete-orphan"})
challenges: List["Challenge"] = Relationship(back_populates="parcours")
corrections: List["TmpCorrection"] = Relationship(
back_populates="parcours", sa_relationship_kwargs={"cascade": "all, delete, delete-orphan"})
back_populates="parcours")
@ -145,7 +144,6 @@ class ParcoursReadUpdate(SQLModel):
class ChallengerInfo(BaseModel):
name: str
id_code: str
validated: bool = False
class ChallengerAverage(ChallengerInfo):

BIN
backend/api/database7.db
View File

Binary file not shown.

6
backend/api/routes/exercices/routes.py
View File

@ -7,7 +7,7 @@ from fastapi import APIRouter, Depends, Query, UploadFile, HTTPException, status
from fastapi.responses import FileResponse, StreamingResponse
from fastapi_pagination.ext.sqlalchemy_future import paginate as p
from pydantic import BaseModel
from sqlmodel import Session, select, col
from sqlmodel import Session, select
from database.auth.models import User
from database.db import get_session
@ -85,8 +85,6 @@ def get_user_exercices(user: User = Depends(get_current_user),
sub = select(ExercicesTagLink).where(ExercicesTagLink.exercice_id == Exercice.id).where(
ExercicesTagLink.tag_id == t).exists()
statement = statement.where(sub)
statement = statement.order_by(col(Exercice.id).desc())
page = p(db, statement)
exercices = page.items
page.items = [
@ -118,7 +116,7 @@ def get_public_exercices(user: User | None = Depends(get_current_user_optional),
sub = select(ExercicesTagLink).where(ExercicesTagLink.exercice_id == Exercice.id).where(
ExercicesTagLink.tag_id == t).exists()
statement = statement.where(sub)
statement = statement.order_by(col(Exercice.id).desc())
page = p(db, statement)
print('¨PAGE', page)
exercices = page.items

33
backend/api/routes/room/consumer.py
View File

@ -8,7 +8,7 @@ from database.auth.crud import get_user_from_token
from database.room.crud import change_room_name, change_room_status, serialize_member, check_user_in_room, \
create_anonymous, create_member, get_member, get_member_from_token, get_member_from_reconnect_code, connect_member, \
disconnect_member, get_waiter, accept_waiter, leave_room, refuse_waiter
from database.room.models import Room, Member, MemberRead, Waiter, Challenger
from database.room.models import Room, Member, MemberRead, Waiter
from services.websocket import Consumer
if TYPE_CHECKING:
@ -17,7 +17,7 @@ if TYPE_CHECKING:
class RoomConsumer(Consumer):
def __init__(self, ws: WebSocket, room: Room | None, manager: "RoomManager", db: Session):
def __init__(self, ws: WebSocket, room: Room, manager: "RoomManager", db: Session):
self.room = room
self.ws = ws
self.manager = manager
@ -25,22 +25,14 @@ class RoomConsumer(Consumer):
self.member = None
self.banned = False
async def connect(self):
await self.ws.accept()
if self.room is None:
await self.send_error("Salle introuvable", code=404)
await self.ws.close()
return False
return True
# WS Utilities
async def send(self, payload: Any | Callable):
if callable(payload):
payload = payload(self.member)
return await super().send(payload)
async def connect(self):
await self.ws.accept()
async def direct_send(self, type: str, payload: Any, code: int | None = None):
sending = {'type': type, "data": payload, }
@ -251,13 +243,12 @@ class RoomConsumer(Consumer):
@Consumer.event('leave', conditions=[isMember])
async def leave(self):
print('LEAVED', self.member, isinstance(self.member, Member), isinstance(self.member, Challenger))
if self.member.is_admin is True:
await self.send_error("Vous ne pouvez pas quitter une salle dont vous êtes l'administrateur")
return
member_obj = serialize_member(self.member)
leave_room(self.member, self.db)
self.member = None
await self.direct_send(type="successfully_leaved", payload={})
await self.broadcast(type='leaved', payload={"member": member_obj})
self.member = None
@ -303,13 +294,13 @@ class RoomConsumer(Consumer):
self.manager.remove(self.room.id, self)
return {"waiter_id": waiter_id}
# @Consumer.sending("banned", conditions=[isMember])
# def banned(self):
# self.member = None
# self.manager.remove(self.room.id_code, self)
# self.banned = True
# #await self.ws.close()
# return {}
@Consumer.sending("banned", conditions=[isMember])
async def banned(self):
self.member = None
self.manager.remove(self.room.id_code, self)
self.banned = True
#await self.ws.close()
return {}
@Consumer.sending('ping', conditions=[isMember])
def ping(self):

1
backend/api/routes/room/manager.py
View File

@ -39,6 +39,7 @@ class RoomManager:
if group in self.active_connections:
for connection in list(set(self.active_connections[group])):
print(connection, connection.ws.state, connection.ws.client_state, connection.ws.application_state)
if connection not in exclude and all(f(connection) for f in conditions):
await self._send(connection, message, group)

51
backend/api/routes/room/routes.py
View File

@ -8,12 +8,35 @@ from sqlmodel import Session, select
from database.auth.models import User
from database.db import get_session
from database.exercices.models import Exercice
from database.room.crud import delete_room_db, getUsername, getMemberValidated
from database.room.crud import serialize_parcours_short, change_correction, corrige_challenge, \
create_parcours_db, delete_parcours_db, create_room_db, get_member_dep, check_room, serialize_room, \
update_parcours_db, get_parcours, get_room, check_admin, get_exercices, get_challenge, get_correction, \
create_tmp_correction, create_challenge, change_challenge, serialize_parcours, getTops, getAvgRank, getRank, \
getAvgTops, ChallengerFromChallenge, getMemberAvgRank, getMemberRank, getMemberChallenges
getAvgTops, ChallengerFromChallenge, getMemberAvgRank, getMemberRank
from database.room.models import Challenge, ChallengeRead, Challenges, ParcoursReadUpdate, ChallengeInfo, Member, \
Parcours, ParcoursCreate, ParcoursRead, ParcoursReadShort, Room, RoomConnectionInfos, \
RoomCreate, RoomInfo, TmpCorrection, CorrigedData, CorrectionData
from generateur.generateur_main import generate_from_path, parseGeneratorOut
from routes.room.consumer import RoomConsumer
from routes.room.manager import RoomManager
from services.auth import get_current_user_optional
from services.io import add_fast_api_root
from services.misc import stripKeyDict
from typing import List, Optional
from fastapi import APIRouter, Depends, WebSocket, status, Query, Body
from fastapi.exceptions import HTTPException
from pydantic import BaseModel
from sqlmodel import Session, select
from database.auth.models import User
from database.db import get_session
from database.exercices.models import Exercice
from database.room.crud import serialize_parcours_short, change_correction, corrige_challenge, \
create_parcours_db, delete_parcours_db, create_room_db, get_member_dep, check_room, serialize_room, \
update_parcours_db, get_parcours, get_room, check_admin, get_exercices, get_challenge, get_correction, \
create_tmp_correction, create_challenge, change_challenge, serialize_parcours, getTops, getAvgRank, getRank, \
getAvgTops, ChallengerFromChallenge, getMemberAvgRank, getMemberRank
from database.room.models import Challenge, ChallengeRead, Challenges, ParcoursReadUpdate, ChallengeInfo, Member, \
Parcours, ParcoursCreate, ParcoursRead, ParcoursReadShort, Room, RoomConnectionInfos, \
RoomCreate, RoomInfo, TmpCorrection, CorrigedData, CorrectionData
@ -45,14 +68,6 @@ def get_room_route(room: Room = Depends(get_room), member: Member = Depends(get_
return serialize_room(room, member, db)
@router.delete('/room/{room_id}', dependencies=[Depends(check_admin)])
async def delete_room(room: Room = Depends(get_room), m: RoomManager = Depends(get_manager),
db: Session = Depends(get_session)):
delete_room_db(room, db)
await m.broadcast({"type": "deleted"}, room.id_code)
return {"message": "ok"}
@router.post('/room/{room_id}/parcours', response_model=ParcoursRead)
async def create_parcours(*, parcours: ParcoursCreate, room_id: str, member: Member = Depends(check_admin),
m: RoomManager = Depends(get_manager), db: Session = Depends(get_session)):
@ -73,8 +88,6 @@ async def get_parcours_route(*, parcours: Parcours = Depends(get_parcours), memb
return serialize_parcours(parcours, member, db)
@router.put('/room/{room_id}/parcours/{parcours_id}', response_model=ParcoursRead)
async def update_parcours(*, room_id: str, parcours: ParcoursCreate, member: Member = Depends(check_admin),
parcours_old: Parcours = Depends(get_parcours), m: RoomManager = Depends(get_manager),
@ -90,16 +103,9 @@ async def update_parcours(*, room_id: str, parcours: ParcoursCreate, member: Mem
await m.broadcast({"type": "edit_parcours", "data": {
"parcours": ParcoursReadUpdate(**parcours_obj.dict(), update_challenges=update_challenges).dict()}},
parcours_old.id_code)
print('BROADCASTING')
await m.broadcast(
lambda m: {"type": "update_challenges", "data": {"challenger": {"id_code": m.id_code, "name": getUsername(m), "validated": getMemberValidated(m, parcours_obj, db)},
"challenges": [Challenges(
**{**chall.dict(), "canCorrige": chall.data != []}).dict() for
chall in
getMemberChallenges(m, parcours_obj, db)]}},
parcours_old.id_code, conditions=[lambda m: m.member.id_code != member.id_code])
return serialize_parcours(parcours_obj, member, db)
return {**parcours_obj.dict()}
@router.delete('/room/{room_id}/parcours/{parcours_id}', dependencies=[Depends(check_admin)])
@ -177,7 +183,7 @@ async def send_challenge(*, challenge: List[CorrectionData], correction: TmpCorr
}}, parcours.id_code)
print('CHALLENGE', chall)
db.delete(correction)
returnValue = {**chall.dict()}
returnValue = {**chall.dict(), 'validated': chall.mistakes <= correction.parcours.max_mistakes}
db.commit()
return returnValue
# return {**chall.dict(), 'validated': chall.mistakes <= correction.parcours.max_mistakes}
@ -252,5 +258,8 @@ async def corrige(*, correction: List[CorrigedData] = Body(), challenge: Challen
@router.websocket('/ws/room/{room_id}')
async def room_ws(ws: WebSocket, room: Room | None = Depends(check_room), db: Session = Depends(get_session),
m: RoomManager = Depends(get_manager)):
if room is None:
raise HTTPException(
status_code=status.HTTP_404_NOT_FOUND, detail='Room not found')
consumer = RoomConsumer(ws=ws, room=room, manager=m, db=db)
await consumer.run()

14
backend/api/services/websocket.py
View File

@ -1,10 +1,9 @@
import inspect
from typing import List, Callable, Any, Dict
from fastapi.websockets import WebSocketDisconnect, WebSocket
from pydantic import validate_arguments, BaseModel
from fastapi.websockets import WebSocketDisconnect, WebSocket
from pydantic.error_wrappers import ValidationError
import inspect
from starlette.websockets import WebSocketState
def make_event_decorator(eventsDict):
def _(name: str | List, conditions: List[Callable | bool] = []):
@ -63,8 +62,7 @@ class Consumer:
#self.events: Dict[str, Callable] = {}
async def connect(self):
await self.ws.accept()
return True
pass
async def validation_error_handler(self, e: ValidationError):
errors = e.errors()
@ -134,9 +132,7 @@ class Consumer:
pass
async def run(self):
accepted = await self.connect()
if accepted is False:
return
await self.connect()
try:
while True:
data = await self.ws.receive_json()

1
frontend/.gitignore vendored
View File

@ -9,4 +9,3 @@ node_modules
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
.idea
*/database*

14
frontend/src/apis/auth.api.ts
View File

@ -1,13 +1,13 @@
import axios from "axios";
import { autoRefresh } from "../utils/utils";
import { env } from "$env/dynamic/public";
import axios from 'axios';
import { autoRefresh } from '../utils/utils';
import {env} from '$env/dynamic/private';
export const authInstance = axios.create({
baseURL: `${env.PUBLIC_API_BASE}`,
baseURL: `${env.API_BASE}`,
headers: {
"Content-Type": "application/json",
Accept: "application/json",
"Access-Control-Allow-Origin": "*"
'Content-Type': 'application/json',
Accept: 'application/json',
'Access-Control-Allow-Origin': '*',
//'X-CSRFToken': csrftoken != undefined ? csrftoken : '',
}
});

4
frontend/src/apis/exo.api.ts
View File

@ -1,10 +1,10 @@
import axios from 'axios';
import { parse, stringify } from 'qs'
import { autoRefresh } from '../utils/utils';
import { env } from "$env/dynamic/public";
import {env} from '$env/dynamic/private';
export const exoInstance = axios.create({
paramsSerializer:{encode:(params)=> {return parse(params, {arrayFormat:"brackets"})}, serialize: (p)=>{return stringify(p, {arrayFormat: "repeat"})}},
baseURL: `${env.PUBLIC_API_BASE}`,
baseURL: `${env.API_BASE}`,
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',

14
frontend/src/apis/room.api.ts
View File

@ -1,13 +1,13 @@
import axios from "axios";
import { autoRefresh } from "../utils/utils";
import { env } from "$env/dynamic/public";
import axios from 'axios';
import { autoRefresh } from '../utils/utils';
import {env} from '$env/dynamic/private';
export const roomInstance = axios.create({
baseURL: `${env.PUBLIC_API_BASE}room`,
baseURL: `${env.API_BASE}/room`,
headers: {
"Content-Type": "application/json",
Accept: "application/json",
"Access-Control-Allow-Origin": "*"
'Content-Type': 'application/json',
Accept: 'application/json',
'Access-Control-Allow-Origin': '*',
//'X-CSRFToken': csrftoken != undefined ? csrftoken : '',
}
});

30
frontend/src/app.scss
View File

@ -4,10 +4,9 @@
box-sizing: border-box;
margin: 0;
}
.spinner {
width: 30px;
height: 30px;
height:30px;
border: 3px solid $contrast;
border-bottom-color: transparent;
border-radius: 50%;
@ -21,7 +20,6 @@
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
@ -40,8 +38,8 @@
}
* {
scrollbar-width: auto !important;
*{
scrollbar-width: auto!important;
scrollbar-color: $contrast transparent;
}
@ -56,8 +54,7 @@
padding: 0 50px;
width: max-content;
cursor: pointer;
&:disabled {
&:disabled{
cursor: not-allowed
}
}
@ -65,7 +62,6 @@
.primary-btn {
@extend .btn;
background-color: #fcbf49;
&:hover {
background-color: #ac7b19;
}
@ -74,7 +70,6 @@
.danger-btn {
@extend .btn;
background-color: #fc5e49;
&:hover {
background-color: #ac1919;
}
@ -85,7 +80,6 @@
background-color: transparent;
border: 1px solid #fcbf49;
color: #fcbf49;
&:hover {
background-color: #fcbf49;
color: black;
@ -106,7 +100,6 @@
transition: 0.3s;
border-radius: 0;
margin: 0;
&:focus {
outline: none;
border-bottom-color: $contrast;
@ -118,7 +111,6 @@
display: flex;
justify-content: center;
}
@for $f from 0 through 100 {
.wp-#{$f} {
width: 1% * $f;
@ -126,19 +118,11 @@
}
.sv-dropdown {
z-index: 10 !important;
.sv-dropdown{
z-index: 10!important;
}
.strong {
.strong{
font-weight: 900;
}
.contrast {
color: $contrast;
}
.loading {
cursor: progress;
}

69
frontend/src/components/NavBar.svelte
View File

@ -5,7 +5,7 @@
import FaHome from "svelte-icons/fa/FaHome.svelte";
import { afterNavigate } from "$app/navigation";
import FaUser from "svelte-icons/fa/FaUser.svelte";
import IoIosLogOut from 'svelte-icons/io/IoIosLogOut.svelte'
import FaSignOutAlt from "svelte-icons/fa/FaSignOutAlt.svelte";
const {
isAuth,
@ -16,7 +16,6 @@
afterNavigate(() => {
open = false;
});
$: console.log("USERNAME", $username);
</script>
<nav data-sveltekit-preload-data="hover" class:open>
@ -30,7 +29,6 @@
<NavLink href="/room">Salles</NavLink>
</div>
<div class="right">
<div class="auth">
{#if $isAuth && $username != null}
@ -39,23 +37,22 @@
<div class="icon">
<FaUser />
</div>
{$username}
</div>
{$username}</div>
</NavLink>
<div class="icon signout" title="Se déconnecter" on:click={()=>{
logout()
}}>
<IoIosLogOut />
<FaSignOutAlt />
</div>
{:else}
<NavLink href="/signup" exact>S'inscrire</NavLink>
<NavLink href="/signin" exact>Se connecter</NavLink>
{/if}
</div>
<div class="burger" on:click={()=>{open=!open}}><span> </span></div>
</div>
</nav>
<style lang="scss">
@import "../mixins";
@ -110,20 +107,9 @@
}
}
.auth {
transition: .3s;
display: flex;
gap: 7px;
@include down(666) {
//display: none;
opacity: 0;
}
}
.burger {
background: 0 0;
@include up(666) {
@include up(750px) {
display: none;
}
border: none;
@ -178,11 +164,15 @@
.open {
@include down(666px) {
@include down(750px) {
.navigate {
*:first-child {
display: none
}
max-height: 1000000px;
// Remove home icon
transition: .2s;
background: rgba($background-dark, 0.8);
height: 100%;
position: fixed;
@ -194,31 +184,18 @@
flex-direction: column;
justify-content: center;
align-items: center;
//gap: 42px;
z-index: 600;
animation: open .1s ease-in-out forwards;
}
:global(.home){
display: none;
}
.right {
justify-content: end;
width: 100%;
z-index: 601;
display: flex;
gap: 42px;
z-index: 100;
}
.auth {
display: flex;
opacity: 1;
justify-content: end;
width: 100%;
z-index: 101;
}
& .burger {
z-index: 1000;
& span::before {
bottom: 0;
@ -243,14 +220,4 @@
padding-right: 20px;
}
@keyframes open {
0% {
gap: 10px;
opacity: .3;
}
100% {
gap: 42px;
opacity: 1;
}
}
</style>

35
frontend/src/components/auth/InfoForm.svelte
View File

@ -1,51 +1,46 @@
<script lang="ts">
import { field, form } from "svelte-forms";
import { max, min, required, email } from "svelte-forms/validators";
import {field, form} from "svelte-forms";
import {max, min, required, email} from "svelte-forms/validators";
import LabeledInput from "../forms/LabeledInput.svelte";
import type { User } from "../../types/auth.type";
import { onMount } from "svelte";
import { errorMsg } from "../../utils/forms.js";
import type {User} from "../../types/auth.type";
import {onMount} from "svelte";
import {errorMsg} from "../../utils/forms.js";
export let user: User;
export let user: User
export let myForm;
const username = field("username", user.username, [required(), max(20), min(2)], {
const username = field('username', user.username, [required(), max(20), min(2)], {
checkOnInit: true
});
const name = field("name", user.name || "", [max(50)], {
const name = field('name', user.name || "", [max(50)], {
checkOnInit: true
});
const firstname = field("firstname", user.firstname || "", [max(50)], {
const firstname = field('firstname', user.firstname || "", [max(50),], {
checkOnInit: true
});
const emailField = field("email", user.email || "", [ /*email()*/], {
const emailField = field('email', user.email || "", [ /*email()*/], {
checkOnInit: true
});
onMount(() => {
myForm = form(username, name, firstname, emailField);
});
})
</script>
{#if !!$myForm}
<div class="">
<LabeledInput bind:value={$username.value} label="Nom d'utilisateur" type="text" placeholder="Nom d'utilisateur..."
errors={errorMsg($myForm, 'username')} />
errors={errorMsg($myForm, 'username')}/>
<LabeledInput bind:value={$emailField.value} label="Email" type="email" placeholder="Email..."
errors={errorMsg($myForm, 'email')} />
errors={errorMsg($myForm, 'email')}/>
<LabeledInput bind:value={$name.value} label="Nom" type="text" placeholder="Nom..."
errors={errorMsg($myForm, 'name')} />
errors={errorMsg($myForm, 'name')}/>
<LabeledInput bind:value={$firstname.value} label="Prénom" type="text" placeholder="Prénom..."
errors={errorMsg($myForm, 'firstname')} />
errors={errorMsg($myForm, 'firstname')}/>
</div>
{/if}
<style lang="scss">
@import "../../mixins.scss";
div {
display: grid;
grid-template-columns: 1fr 1fr;
@include down(800px){
grid-template-columns: 1fr;
}
}
</style>

24
frontend/src/components/auth/PasswordForm.svelte
View File

@ -1,35 +1,31 @@
<script lang="ts">
import { field, form } from "svelte-forms";
import { matchField, min, pattern, required } from "svelte-forms/validators";
import {field, form} from "svelte-forms";
import {matchField, min, pattern, required} from "svelte-forms/validators";
import LabeledInput from "../forms/LabeledInput.svelte";
import { onMount } from "svelte";
import { errorMsg } from "../../utils/forms";
import {onMount} from "svelte";
import {errorMsg} from "../../utils/forms";
const password = field("password", "", [required(), min(8), pattern(/[0-9]/), pattern(/[A-Z]/)], { checkOnInit: true });
const confirm = field("password_confirm", "", [required(), matchField(password)], { checkOnInit: true });
const password = field('password', '', [required(), min(8), pattern(/[0-9]/), pattern(/[A-Z]/)], {checkOnInit: true});
const confirm = field('password_confirm', '', [required(), matchField(password)],{checkOnInit: true});
export let myForm;
onMount(() => {
myForm = form(password, confirm);
});
myForm = form(password, confirm)
})
</script>
{#if !!$myForm}
<div>
<LabeledInput bind:value={$password.value} type="password" placeholder="Mot de passe..."
errors={errorMsg($myForm, 'password')} />
errors={errorMsg($myForm, 'password')}/>
<LabeledInput bind:value={$confirm.value} type="password" placeholder="Confirmer..."
errors={errorMsg($myForm, 'password_confirm')} />
errors={errorMsg($myForm, 'password_confirm')}/>
</div>
{/if}
<style lang="scss">
@import "../../mixins.scss";
div {
display: grid;
grid-template-columns: 1fr 1fr;
@include down(800){
grid-template-columns: 1fr;}
}
</style>

2
frontend/src/components/auth/RoomList.svelte
View File

@ -10,7 +10,7 @@
<ul>
{#each rooms as room}
<li>
<a href="/room/{room.id_code}">{room.name} ({room.admin ? "Administrateur" : "Membre"})</a>
<a href="/room/{room.id_code}">{room.name} ({room.admin ? "Administrateur" : "Member"})</a>
</li>
{/each}
</ul>

24
frontend/src/components/auth/Section.svelte
View File

@ -1,20 +1,19 @@
<script lang="ts">
export let icon = null;
export let icon = null
export let title;
export let validate = "Valider !";
export let onValidate = null;
export let canValid = false;
export let validate = "Valider !"
export let onValidate = null
export let canValid = false
</script>
<div>
<h2>
<div class="icon">
<svelte:component this={icon} />
</div>
<svelte:component this={icon}/></div>
{title}</h2>
<div class="content">
<slot />
<slot/>
</div>
{#if !!onValidate}
<div class="btn-container">
@ -25,17 +24,11 @@
</div>
<style lang="scss">
@import "../../mixins.scss";
h2 {
display: flex;
align-items: center;
@include down(800){
justify-content: center;
}
}
.icon {
.icon{
margin-right: 10px;
width: 25px;
height: 25px;
@ -56,8 +49,5 @@
display: flex;
justify-content: flex-end;
margin-top: 10px;
@include down(800){
justify-content: center;
}
}
</style>

40
frontend/src/components/exos/Card.svelte
View File

@ -1,21 +1,21 @@
<script lang="ts">
import type { Exercice } from "../../types/exo.type";
import { getContext } from "svelte";
import ModalCard from "./ModalCard.svelte";
import { goto } from "$app/navigation";
import { cloneExo } from "../../requests/exo.request";
import TagContainer from "./TagContainer.svelte";
import PrivacyIndicator from "./PrivacyIndicator.svelte";
import MdContentCopy from "svelte-icons/md/MdContentCopy.svelte";
import type { Writable } from "svelte/store";
import type { Exercice } from '../../types/exo.type';
import { getContext } from 'svelte';
import ModalCard from './ModalCard.svelte';
import { goto } from '$app/navigation';
import { cloneExo } from '../../requests/exo.request';
import TagContainer from './TagContainer.svelte';
import PrivacyIndicator from './PrivacyIndicator.svelte';
import MdContentCopy from 'svelte-icons/md/MdContentCopy.svelte';
import type { Writable } from 'svelte/store';
export let exo: Exercice;
const { show } = getContext<{ show: Function }>("modal");
const { navigate } = getContext<{ navigate: Function }>("navigation");
const { isAuth } = getContext<{ isAuth: Writable<boolean> }>("auth");
const exerciceStore = getContext("exos");
const tagsStore = getContext("tags");
const { show } = getContext<{ show: Function }>('modal');
const { navigate } = getContext<{ navigate: Function }>('navigation');
const { isAuth } = getContext<{ isAuth: Writable<boolean> }>('auth');
const exerciceStore = getContext('exos');
const tagsStore = getContext('tags');
let opened = false;
const handleClick = () => {
@ -92,11 +92,9 @@
<style lang="scss">
@import '../../variables';
* {
transition: 0.45s;
}
.icon {
width: 18px;
height: 18px;
@ -104,7 +102,6 @@
cursor: pointer;
opacity: 0.7;
transform: scale(0.9);
&:hover {
transform: scale(1);
opacity: 1;
@ -127,7 +124,6 @@
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 20px;
p {
margin: 10px;
margin-left: 18px;
@ -136,7 +132,6 @@
text-overflow: ellipsis;
white-space: nowrap;
}
h2 {
font-size: 0.95em;
margin: 10px;
@ -152,20 +147,16 @@
bottom: 0;
z-index: 1;
border: 1px solid $border;
+ :global(div) {
transition: 0.45s;
}
&:hover {
border: 1px solid $primary;
+ :global(div) {
border: 1px solid $primary;
border-top: none;
}
}
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
}
@ -182,7 +173,6 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
&:hover {
color: $primary;
}
@ -196,8 +186,6 @@
background-color: $background;
min-height: 250px;
max-height: 300px;
min-width: 250px;
&:hover {
transform: translateX(10px) translateY(-10px);
}

16
frontend/src/components/exos/CreateCard.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import type { Exercice, Page } from "../../types/exo.type";
import type { Writable } from "svelte/store";
import EditForm from "./EditForm.svelte";
import type { Exercice, Page } from '../../types/exo.type';
import type { Writable } from 'svelte/store';
import EditForm from './EditForm.svelte';
export let cancel: Function;
export let exos: Writable<{ isLoading: boolean; isFetching: boolean; data: Page }>;
@ -19,8 +19,6 @@
<style lang="scss">
@import '../../variables';
@import '../../mixins';
div {
background: $background;
padding: 50px;
@ -28,15 +26,7 @@
flex-direction: column;
gap: 20px;
align-items: flex-start;
@include down(800){
width: 100%;
height: 100%;
min-width: 0;
}
min-width: 800px;
}
h1 {
font-size: 1.5em;
}

10
frontend/src/components/exos/DownloadForm.svelte
View File

@ -86,7 +86,7 @@
{/if}
<div class="icons">
<div>
<div class="icon contrast" on:click={() => close()} on:keypress={() => {}}>
<div class="icon" style:color="black" on:click={() => close()} on:keypress={() => {}}>
<MdClose />
</div>
</div>
@ -148,7 +148,6 @@
{/if}
<style lang="scss">
@import '../../mixins';
.icon {
width: 25px;
height: 25px;
@ -184,7 +183,7 @@
span.name {
overflow: hidden;
word-wrap: break-word;
width: 100%;
}
span:not(.name) {
position: relative;
@ -192,11 +191,6 @@
font-size: 18px;
cursor: pointer;
}
@include down(750px){
flex-direction: column;
gap: 10px;
}
}
.examples {

85
frontend/src/components/exos/EditForm.svelte
View File

@ -1,25 +1,21 @@
<script lang="ts">
import { form, field } from "svelte-forms";
import { required, max, min } from "svelte-forms/validators";
import FileInput from "../forms/FileInput.svelte";
import InputWithLabel from "../forms/InputWithLabel.svelte";
import { getContext } from "svelte";
import { createExo, editExo } from "../../requests/exo.request";
import type { Exercice } from "../../types/exo.type";
import { checkFile, errorMsg } from "../../utils/forms";
import { compareObject } from "../../utils/utils";
import { goto } from "$app/navigation";
import ModalCard from "./ModalCard.svelte";
import { form, field } from 'svelte-forms';
import { required, max, min } from 'svelte-forms/validators';
import FileInput from '../forms/FileInput.svelte';
import InputWithLabel from '../forms/InputWithLabel.svelte';
import { getContext } from 'svelte';
import { createExo, editExo } from '../../requests/exo.request';
import type { Exercice } from '../../types/exo.type';
import { checkFile, errorMsg } from '../../utils/forms';
import { compareObject } from '../../utils/utils';
export let editing = true;
export let updateExo: Function = (e: Exercice) => {
};
export let updateExo: Function = (e: Exercice) => {};
export let exo: Exercice | null = null;
export let cancel: Function;
const { alert } = getContext<{ alert: Function }>("alert");
const { show } = getContext<{ show: Function }>("modal");
const { alert } = getContext<{ alert: Function }>('alert');
// "Legally" initiate empty FileList for model field (simple list raises warning)
/* let list = new DataTransfer();
@ -28,26 +24,20 @@
!editing && list.items.remove(0); */
// Initiate fields and form
const name = field("name", !!exo ? exo.name : "", [required(), max(50), min(5)], {
const name = field('name', !!exo ? exo.name : '', [required(), max(50), min(5)], {
checkOnInit: true
});
const consigne = field("consigne", !!exo && exo.consigne != null ? exo.consigne : "", [max(200)], { checkOnInit: true });
const prv = field("private", !!exo ? exo.private : false);
const model = field("model", [], [checkFile(), required()], {
const consigne = field('consigne', !!exo && exo.consigne != null ? exo.consigne : '', [max(200)], { checkOnInit: true });
const prv = field('private', !!exo ? exo.private : false);
const model = field('model', [], [checkFile(), required()], {
checkOnInit: !editing
});
const myForm = form(name, consigne, prv, model);
const exerciceStore = getContext<{ exerciceStore: any }>("exerciceStore");
const tagsStore = getContext<{ tagsStore: any }>("tagsStore");
const { navigate } = getContext<{ navigate: Function }>("navigation");
const { success, error } = getContext<{ success: Function, error: Function }>("notif");
let loading = false
</script>
<form
action=""
on:submit|preventDefault={() => {
loading = true
if (editing && exo != null) {
editExo(exo.id_code, {
name: $name.value,
@ -55,43 +45,19 @@
private: $prv.value,
...($model.dirty == true && { file: $model.value[0] })
}).then((r) => {
loading=false
success('Exercice modifié !', `Exercice ${r.data.name} modifié avec succès !`)
exo=r.data
updateExo(r.data);
cancel()
}).catch((e) => {
loading=false
console.log(e)
error('Erreur', 'Une erreur est survenue lors de la modification de l\'exercice')
});
} else {
createExo({
name: $name.value,
consigne: $consigne.value,
private: $prv.value,
file: $model.value[0]
}).then((r) => {
loading=false
updateExo(r.data);
success('Exercice créé !', `Exercice ${r.data.name} créé avec succès !`)
goto(`/exercices/${r.data.id_code}`)
//cancel()
show(
ModalCard,
{
exo: r.data,
exos: exerciceStore,
tags: tagsStore
},
() => {
navigate(-1)
}, true
);
}).catch((e) => {
loading=false
error('Erreur', 'Une erreur est survenue lors de la création de l\'exercice')
cancel()
});
}
}}
@ -120,17 +86,10 @@
<input type="checkbox" bind:checked={$prv.value} name="private" id="private" />
<label for="private">Privé</label>
</div>
<FileInput bind:value={$model.value} accept=".py" id_code={exo?.id_code}
defaultValue={editing &&exo!= null? exo.exo_source: null} />
<FileInput bind:value={$model.value} accept=".py" id_code={exo?.id_code} defaultValue={editing &&exo!= null? exo.exo_source: null}/>
<div class="wp-100">
<button class="primary-btn" disabled={!$myForm.valid}>
{#if !loading}
{editing ? "Modifier" : "Créer"}
{:else}
<span class="spinner"></span>
{/if}
</button>
<button class="primary-btn" disabled={!$myForm.valid}>Modifier</button>
<button
class="danger-btn"
on:click|preventDefault={() => {
@ -145,8 +104,7 @@
} else {
cancel();
}
}}>Annuler
</button
}}>Annuler</button
>
</div>
</form>
@ -159,9 +117,4 @@
gap: 10px;
align-items: flex-start;
}
.spinner{
width: 15px;
height: 15px;
border-width: 2px!important;
}
</style>

6
frontend/src/components/exos/ExoList.svelte
View File

@ -137,7 +137,6 @@
</div>
<style lang="scss">
@import '../../mixins';
.auth-head {
display: flex;
@ -158,11 +157,6 @@
background-color: $background;
padding: 20px;
height: 100%;
min-width: 600px;
@include down(800){
min-width: 0;
width: 100%;
}
}
.selected {

43
frontend/src/components/exos/Feed.svelte
View File

@ -112,16 +112,14 @@
</script>
<div class="full" class:loading={$tagStore.isFetching || $exerciceStore.isFetching}>
{#if $tagStore.data != undefined}
{#if $tagStore.data != undefined}
<Head location={filter} bind:search bind:selected />
{/if}
{/if}
{#if $tagStore.isFetching == true}
Fetching
{/if}
<div class="feed">
<div class="feed">
<div class="title">
{#if filter == 'user'}
<h1>
@ -145,26 +143,23 @@
<Card bind:exo={e} />
{/each}
{#if $exerciceStore.data.items.length == 0}
<p class="empty">Aucun exercice</p>
<p>Aucun exercices</p>
{/if}
{:else}
{#each Array(10) as i}
<div class="skeleton"><span /></div>
{/each}
{/if}
</div>
{#if $exerciceStore.data != undefined}
<Pagination bind:page={activePage} total={$exerciceStore.data.totalPage} />
{/if}
</div>
{#if $exerciceStore.data != undefined}
<Pagination bind:page={activePage} total={$exerciceStore.data.totalPage} />
{/if}
<style lang="scss">
@import '../../variables';
@import "../../mixins.scss";
.skeleton {
//width: 330px;
max-width: 330px;
width: 330px;
height: 250px;
opacity: .8;
@ -219,10 +214,6 @@
margin-top: 20px;
}
.full {
padding: 0 20px;
}
.title {
grid-column: 1/3;
display: flex;
@ -230,11 +221,6 @@
justify-content: center;
flex-direction: column;
@include down(600) {
grid-column: 1/2;
text-align: center;
}
h1 {
font-size: 3.5em;
font-weight: bolder;
@ -249,11 +235,4 @@
color: $primary;
}
}
.empty{
display: flex;
justify-content: center;
align-items: center;
font-style: italic;
}
</style>

12
frontend/src/components/exos/Head.svelte
View File

@ -70,7 +70,6 @@
</div>
<style lang="scss">
@import "../../mixins.scss";
.head {
display: flex;
justify-content: space-between;
@ -78,17 +77,6 @@
div {
width: 50%;
}
@include down(600){
flex-direction: column;
gap: 10px;
> * {
width: 100%!important;
}
button{
width: 100%!important;
}
}
}
.search {
display: flex;

15
frontend/src/components/exos/ModalCard.svelte
View File

@ -51,7 +51,6 @@
}}
/>
{:else if editing === true}
<h1>Modification</h1>
<EditForm
bind:exo
cancel={() => {
@ -64,10 +63,8 @@
<style lang="scss">
@import '../../variables';
@import '../../mixins';
.modal {
min-width: 800px;
min-width: 820px;
background: $background;
padding: 70px;
grid-gap: 10px;
@ -76,15 +73,5 @@
flex-direction: column;
align-items: flex-start;
gap: 20px;
@include down(800){
width: 100%;
height: 100%;
min-width: 0;
padding: 50px;
}
}
h1{
font-size: 1.8rem;
}
</style>

1
frontend/src/components/exos/Pagination.svelte
View File

@ -104,6 +104,7 @@
display: flex;
margin: 30px;
height: max-content;
width: 100%;
justify-content: center;
align-items: center;
button {

4
frontend/src/components/forms/InputWithLabel.svelte
View File

@ -27,7 +27,7 @@
</script>
<span class="inputLabel" class:error={errors.length !== 0}>
<div style:position="relative">
<input
use:typeAction
on:input={(e)=>{change(e)}}
@ -48,7 +48,7 @@
{/if}
</div>
{/if}
</div>
<span class="bar" />
{#if errors.length !== 0}

101
frontend/src/components/rooms/Challenge.svelte
View File

@ -5,18 +5,18 @@
ParcoursInfos,
Room,
Note as NoteType
} from "../../types/room.type";
} from '../../types/room.type';
import { getContext, onDestroy, onMount } from "svelte";
import { writable, type Writable } from "svelte/store";
import { challenge, corrigeChallenge, getChallenge, getParcours, sendChallenge } from "../../requests/room.request";
import { goto } from "$app/navigation";
import { page } from "$app/stores";
import InputChallenge from "./InputChallenge.svelte";
import { parseTimer } from "../../utils/utils";
import FaUndo from "svelte-icons/fa/FaUndo.svelte";
import { writable, type Writable } from 'svelte/store';
import { challenge, corrigeChallenge, getChallenge, getParcours, sendChallenge } from '../../requests/room.request';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import InputChallenge from './InputChallenge.svelte';
import { parseTimer } from '../../utils/utils';
import FaUndo from 'svelte-icons/fa/FaUndo.svelte';
const room: Writable<Room> = getContext("room");
const member: Writable<Member> = getContext("member");
const room: Writable<Room> = getContext('room');
const member: Writable<Member> = getContext('member');
const challengeStore: Writable<{
challenge: Challenge[];
@ -32,23 +32,24 @@
export let id_code: string;
export let corrige: boolean = false;
onMount(() => {
if (!corrige) {
onMount(()=>{
if(!corrige) {
challenge($room.id_code, id_code, !$member.isUser ? $member.clientId : null).then((p) => {
challengeStore.set({ ...p, corriged: false });
});
} else {
getChallenge($room.id_code, id_code, !$member.isUser ? $member.clientId : null).then((p) => {
challengeStore.set({ ...p, challenge: p.data, note: { ...p.note, temporary: !p.isCorriged }, corriged: true });
challengeStore.set({ ...p, challenge: p.data, note: {...p.note, temporary: !p.isCorriged}, corriged: true });
remaining = p.time;
});
}
});
})
let timer: number | null = null;
let remaining: number | null = null;
const {error, success} = getContext("notif");
$: {
if (!corrige && $challengeStore != null && remaining == null) {
remaining = $challengeStore.parcours.time * 60;
@ -70,15 +71,14 @@
});
</script>
<div class="full">
{#if $challengeStore != null}
{#if $challengeStore != null}
<div class="head">
<h1>
{$challengeStore.parcours.name}
{#if corrige && !!$challengeStore.challenger && remaining != null}
<span class="correction-info">
Correction de <span class="italic">{$challengeStore.parcours.name}</span> par
- Correction de <span class="italic">{$challengeStore.parcours.name}</span> par
<span class="italic underline">{$challengeStore.challenger.name}</span>
en {parseTimer(remaining)} (cliquez sur les réponses pour voir)</span
>
@ -102,11 +102,9 @@
>
{/if}
</h1>
{#if $challengeStore.mistakes}
<p class="mistakes" class:validated={$challengeStore.validated}>{$challengeStore.mistakes} fautes</p>
{$challengeStore.mistakes} fautes
{/if}
{#if !corrige}
<p
class="timer"
@ -123,11 +121,9 @@
<div class="exo">
<div class="infos">
<h2>Exercice {d + 1} : <span>{e.exo.name}</span></h2>
{#if e.exo.consigne != null}
<p>
{e.exo.consigne}
</p>
{/if}
</div>
<div class="data">
{#each e.data as c, a}
@ -141,7 +137,7 @@
corriged={$challengeStore.corriged}
bind:valid={c.inputs[parseInt(i.replace('[', '').replace(']', ''))].valid}
corrigeable={corrige}
admin={$member.isAdmin}
admin = {$member.isAdmin}
/>
{:else}
{i}{' '}
@ -179,8 +175,7 @@
clearInterval(timer);
}
});
}}>Valider !
</button
}}>Valider !</button
>
<button
hidden={!$challengeStore.corriged}
@ -195,8 +190,7 @@
timer = null;
}
});
}}>Réessayer !
</button
}}>Réessayer !</button
>
{:else if $member.isAdmin}
<button
@ -208,12 +202,9 @@
$challengeStore.challenge = p.data
$challengeStore.mistakes = p.mistakes
$challengeStore.validated = p.validated
success('Corrigé !', 'Le challenge a été corrigé avec succès !')
}).catch(()=>{
error('Erreur', 'Une erreur est survenue lors de la correction du challenge')
});
}}>Valider !
</button
}}>Valider !</button
>
{/if}
@ -222,18 +213,12 @@
on:click={() => {
if ($challengeStore == null) return;
goto(`?${new URLSearchParams({p: $challengeStore.parcours.id_code}).toString()}`);
}}>{!$challengeStore.corriged ? "Annuler !" : "Retour"}</button
}}>{!$challengeStore.corriged?"Annuler !":"Retour"}</button
>
</div>
{/if}
</div>
{/if}
<style lang="scss">
@import "../../mixins";
.full {
padding: 7px 15px;
}
.timer {
font-size: 2em;
color: $green;
@ -250,20 +235,6 @@
justify-content: space-between;
margin: 40px 0;
min-height: 70px;
@include down(800px) {
flex-direction: column;
text-align: center;
h1{
flex-direction: column;
}
}
@include up(800px) {
.correction-info::before{
content: " - ";
}
}
}
.late {
@ -276,7 +247,6 @@
gap: 10px;
position: relative;
}
.data {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@ -286,18 +256,15 @@
.infos {
h2 {
font-size: 1.2em;
span {
font-style: italic;
}
}
p {
font-size: 1em;
font-style: italic;
text-decoration: underline;
}
margin-bottom: 10px;
}
@ -305,39 +272,25 @@
margin-bottom: 30px;
margin-top: 20px;
}
.icon {
height: 20px;
width: 20px;
cursor: pointer;
display: flex;
transition: 0.2s;
&:hover {
transform: rotate(360deg);
}
}
h1 {
display: flex;
align-items: center;
gap: 20px;
font-size: 2.3em;
}
.correction-info {
font-size: 0.6em;
color: grey;
font-weight: 600;
}
.mistakes {
font-weight: 700;
font-size: 2em;
color: $red;
}
.validated {
color: $green;
}
</style>

47
frontend/src/components/rooms/ChallengesList.svelte
View File

@ -1,17 +1,16 @@
<script lang="ts">
import type { Member, ParcoursRead } from "../../types/room.type";
import { getContext } from "svelte";
import type { Writable } from "svelte/store";
import IoIosArrowDown from "svelte-icons/io/IoIosArrowDown.svelte";
import { goto } from "$app/navigation";
import { parseTimer } from "../../utils/utils";
import IoMdOpen from "svelte-icons/io/IoMdOpen.svelte";
import type { Member, ParcoursRead } from '../../types/room.type';
import { getContext } from 'svelte';
import type { Writable } from 'svelte/store';
import IoIosArrowDown from 'svelte-icons/io/IoIosArrowDown.svelte';
import { goto } from '$app/navigation';
import { parseTimer } from '../../utils/utils';
import IoMdOpen from 'svelte-icons/io/IoMdOpen.svelte';
const parcours: Writable<ParcoursRead | null> = getContext("parcours");
const member: Writable<Member | null> = getContext("member");
let selected = "";
const parcours: Writable<ParcoursRead | null> = getContext('parcours');
const member: Writable<Member | null> = getContext('member');
let selected = '';
</script>
{#if $parcours != null && $member != null}
@ -31,7 +30,6 @@
>
<span class="icon"><IoIosArrowDown /></span>
{chall.challenger.id_code == $member.id_code ? 'Vos essais' : chall.challenger.name}
<span class:valid = {chall.challenger.validated} class="validation-status">{chall.challenger.validated ? "Validé": "Non validé"}</span>
</p>
{#if selected == chall.challenger.id_code}
@ -45,7 +43,7 @@
title="Voir la correction"
>
<p><span class:validated={c.validated} class:uncorriged={!c.isCorriged} class="note"
>{c.mistakes} faute{c.mistakes > 1 ? "s" : ""} </span> en <strong>{c.time < $parcours.time * 60 ? parseTimer(c.time): parseTimer($parcours.time*60)} <span title={`Vous avez dépassé de ${parseTimer(c.time - $parcours.time*60)}`} class="time-overflow">{c.time > $parcours.time * 60? `( + ${parseTimer(c.time - $parcours.time*60)} )`:""}</span></strong>
>{c.mistakes} faute{c.mistakes > 1 ?"s": ""} </span> en <strong >{parseTimer(c.time)}</strong>
</p>
<span class="corrige-link icon"><IoMdOpen /></span>
</div>
@ -71,10 +69,8 @@
transition: 0.2s;
}
}
.selected {
font-weight: 700;
.icon {
transform: rotate(0);
}
@ -86,8 +82,7 @@
cursor: pointer;
width: max-content;
margin-left: 30px;
p > span {
p span{
color: $red;
font-weight: 600;
}
@ -107,28 +102,12 @@
color: grey;
font-weight: 900;
}
.trylist {
display: flex;
flex-direction: column;
gap: 10px;
}
.validation-status{
color: $red;
font-weight: 600;
&::before{
content: " - ";
}
}
.validated, .valid {
.validated {
color: $green !important;
}
.time-overflow{
color: $red;
font-weight: 400;
font-size: .8em;
}
</style>

60
frontend/src/components/rooms/Members.svelte
View File

@ -4,15 +4,11 @@
import FaLock from "svelte-icons/fa/FaLock.svelte";
import { getContext } from "svelte";
import type { Writable } from "svelte/store";
import FaTimes from "svelte-icons/fa/FaTimes.svelte";
import FaCheck from "svelte-icons/fa/FaCheck.svelte";
import MdCheck from "svelte-icons/md/MdCheck.svelte";
import MdClose from "svelte-icons/md/MdClose.svelte";
const room: Writable<Room> = getContext("room");
const member: Writable<Member> = getContext("member");
const { send } = getContext<{ send: Function }>("ws");
const { alert } = getContext<{ alert: Function }>("alert");
$: online =
$room != null
? $room.members.filter((r): r is Member => "online" in r && r.online == true)
@ -25,16 +21,6 @@
$room != null
? $room.members.filter((r): r is Waiter => "waiter_id" in r && !!r.waiter_id)
: [];
const ban = (m: Member) => {
if (!$member.isAdmin || m.isAdmin) return;
alert(
{
title: "Bannir", description: "Êtes-vous sûr de vouloir bannir cet utilisateur ?", validate: () => {
send("ban", { member_id: m.id_code });
}, validateButton: "Bannir"
}
);
};
</script>
<div class="members">
@ -76,7 +62,9 @@
class:member={m.id_code == $member.id_code}
class="online"
title={$member.isAdmin && !m.isAdmin ? 'Bannir' : ''}
on:click={(e)=>ban(m)}
on:click={() => {
$member.isAdmin && !m.isAdmin && send('ban', { member_id: m.id_code });
}}
on:keydown={() => {}}
>
{m.username}
@ -98,7 +86,9 @@
class:bannable={m.id_code != $member.id_code && $member.isAdmin && !m.isAdmin}
class:member={m.id_code == $member.id_code}
title={$member.isAdmin && !m.isAdmin ? 'Bannir' : ''}
on:click={(e)=>ban(m)}
on:click={() => {
$member.isAdmin && !m.isAdmin && send('ban', { member_id: m.id_code });
}}
on:keydown={() => {}}
>
{m.username}
@ -121,20 +111,14 @@
class="accept"
on:click={() => {
send('accept', { waiter_id: m.waiter_id });
}}
title="Accepter"
>
<MdCheck />
}}>Accept
</button
>
<button
class="refuse"
on:click={() => {
send('refuse', { waiter_id: m.waiter_id });
}}
title="Refuser"
>
<MdClose />
}}>Refuse
</button
>
</p>
@ -187,9 +171,6 @@
font-size: 1em;
width: max-content;
display: flex;
align-items: center;
span {
color: grey;
font-size: 0.9em;
@ -222,27 +203,4 @@
font-weight: 500;
font-size: 0.8em !important;
}
.accept, .refuse {
border: none;
background-color: transparent;
cursor: pointer;
width: 30px;
height: 30px;
transition: .3s;
margin: 0;
&:hover {
transform: scale(1.1);
}
}
.accept {
margin-left: 5px;
color: $green;
}
.refuse {
color: $red;
}
</style>

30
frontend/src/components/rooms/ParcoursDetails.svelte
View File

@ -13,8 +13,6 @@
import { messages, handlers } from "../../store/ws";
import Stats from "./Stats.svelte";
import ChallengesList from "./ChallengesList.svelte";
import { delParcours } from "../../requests/room.request.js";
import FaRegTrashAlt from "svelte-icons/fa/FaRegTrashAlt.svelte";
export let id_code: string;
@ -22,7 +20,7 @@
const member: Writable<Member> = getContext("member");
const { send } = getContext<{ send: Function }>("ws");
const {alert} = getContext<{alert: Function}>("alert");
const parcours: Writable<ParcoursRead | null> = getContext("parcours");
let open = "";
@ -55,27 +53,6 @@
>
<FaEdit />
</div>
<div
class="icon back"
on:keydown={() => {}}
on:click|stopPropagation={() => {
alert({
title: 'Supprimer ?',
description: 'Voulez vous supprimer ce parcours ?',
validate: () => {
delParcours(
$room?.id_code,
$parcours.id_code,
!$member.isUser ? $member?.clientId : null
).then(()=>{
goto(`?${new URLSearchParams().toString()}`);
});
}
});
}}
>
<FaRegTrashAlt />
</div>
{/if}
<div
@ -210,7 +187,6 @@
display: flex;
align-items: center;
width: 20px;
height: 20px;
}
@ -259,7 +235,6 @@
flex-direction: column;
gap: 20px;
align-items: stretch;
padding: 3px 15px;
}
.btn {
@ -294,7 +269,4 @@
.edit {
color: $green;
}
h1{
word-break: break-word;
}
</style>

94
frontend/src/components/rooms/ParcoursList.svelte
View File

@ -1,11 +1,14 @@
<script lang="ts">
import { getContext } from "svelte";
import type { Writable } from "svelte/store";
import type { Member, Room } from "../../types/room.type";
import { goto } from "$app/navigation";
const room: Writable<Room> = getContext("room");
const member: Writable<Member> = getContext("member");
import { delParcours } from '../../requests/room.request';
import { getContext } from 'svelte';
import FaRegTrashAlt from 'svelte-icons/fa/FaRegTrashAlt.svelte';
import type { Writable } from 'svelte/store';
import type { Member, Room } from '../../types/room.type';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
const room: Writable<Room> = getContext('room');
const member: Writable<Member> = getContext('member');
const { alert } = getContext<{ alert: Function }>('alert');
</script>
<div class="parcours">
@ -16,8 +19,7 @@
class="primary-btn"
on:click={() => {
goto(`?${new URLSearchParams({ p: 'new' }).toString()}`);
}}>Nouveau
</button
}}>Nouveau</button
>
{/if}
</div>
@ -33,23 +35,37 @@
}}
on:keydown={() => {}}
>
<p class="parcours-name">{p.name}</p>
<div class="stats">
<p class="stat">
<p>{p.name}</p>
{#if p.best_note}
<strong>Record :</strong> {p.best_note} faute{p.best_note > 1 ? "s" : ""}
<p>Record : {p.best_note} fautes</p>
{:else}
Aucun essai effectué
{/if}
</p>
<p class="stat valid" data-testid="valid"
class:validated={p.validated}>{ p.validated ? "Parcours validé" : "Parcours non validé"}</p>
{#if p.validated}
<p data-testid="valid">Parcours validé</p>
{/if}
{#if $member.isAdmin}
<div
class="icon delete"
on:keydown={() => {}}
on:click|stopPropagation={() => {
alert({
title: 'Supprimer ?',
description: 'Voulez vous supprimer ce parcours ?',
validate: () => {
delParcours(
$room?.id_code,
p.id_code,
!$member.isUser ? $member?.clientId : null
);
}
});
}}
>
<FaRegTrashAlt />
</div>
{/if}
</div>
{/each}
</div>
@ -61,9 +77,6 @@
font-style: italic;
margin: 30px 0;
}
.parcours {
background-color: rgba($background, 0.4);
border: 1px solid $border;
@ -74,34 +87,28 @@
flex-direction: column;
border-radius: 5px;
}
.head {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid $border;
padding: 10px 0;
button {
width: max-content;
}
}
.icon {
width: 18px;
height: 18px;
color: $red;
transition: 0.4s;
opacity: 0;
&:hover {
transform: scale(1.1);
}
}
.list {
overflow: auto;
> div {
padding: 30px 10px;
border-bottom: 1px solid $border-light;
@ -110,41 +117,12 @@
display: flex;
align-items: center;
justify-content: space-between;
&:hover {
background-color: lighten($color: $background, $amount: 10);
.icon {
opacity: 1;
}
}
}
}
.valid {
font-weight: 600;
color: $red;
}
.validated {
color: $green;
}
.stat{
text-align: justify;
height: 1em;
margin: 5px 0;
width: max-content;
&::after{
content: "";
display: inline-block;
width: 100%;
}
}
.parcours-name {
font-weight: 500;
margin: 0;
word-break: break-word;
}
</style>

71
frontend/src/components/rooms/RoomHead.svelte
View File

@ -1,20 +1,16 @@
<script lang="ts">
import { getContext } from "svelte";
import FaRegTrashAlt from "svelte-icons/fa/FaRegTrashAlt.svelte";
import { getContext } from 'svelte';
import FaRegTrashAlt from 'svelte-icons/fa/FaRegTrashAlt.svelte';
import FaUndo from "svelte-icons/fa/FaUndo.svelte";
import FaTimes from "svelte-icons/fa/FaTimes.svelte";
import IoMdLogOut from 'svelte-icons/io/IoMdLogOut.svelte'
import { goto } from "$app/navigation";
import type { Writable } from "svelte/store";
import type { Member, Room } from "../../types/room.type";
import type ReconnectingWebSocket from "reconnecting-websocket";
import { deleteRoom } from "../../requests/room.request.js";
const room: Writable<Room> = getContext("room");
const member: Writable<Member> = getContext("member");
const { send, ws } = getContext<{ send: Function, ws: ReconnectingWebSocket }>("ws");
const { alert } = getContext<{ alert: Function }>("alert");
import FaUndo from 'svelte-icons/fa/FaUndo.svelte';
import FaTimes from 'svelte-icons/fa/FaTimes.svelte';
import { goto } from '$app/navigation';
import type { Writable } from 'svelte/store';
import type { Room, Member } from '../../types/room.type';
import type ReconnectingWebSocket from 'reconnecting-websocket';
const room: Writable<Room> = getContext('room');
const member: Writable<Member>= getContext('member');
const { send, ws } = getContext<{send: Function, ws: ReconnectingWebSocket}>('ws');
let editing = false;
let name = $room.name;
let r: HTMLInputElement;
@ -37,13 +33,14 @@
{/if}
<input
bind:this={r}
bind:value={name}
type="text"
class="input"
class:hide={!editing}
on:focusout={() => {
editing = false;
}}
bind:value={name}
bind:this={r}
on:keydown={(e) => {
if (e.key == 'Escape') {
editing = false;
@ -52,54 +49,28 @@
editing = false;
}
}}
type="text"
/>
</div>
<div class="icons">
{#if $member.isAdmin}
<div class="icon trash" data-testid="delete" on:click={()=>{
alert({title:"Voulez vous vraiment supprimer la salle ?",
description:"L'intégralité des données de la salle sera supprimée et vous ne pourrez plus y accéder",
validate: ()=>{
deleteRoom($room.id_code, !$member.isUser ? $member.clientId: null)
},
validateButton: "Supprimer la salle"})
//goto('/room/join')
}}>
<FaRegTrashAlt />
</div>
{:else}
<div class="icon trash" data-testid="leave" on:click={()=>{
alert({title:"Voulez vous vraiment quitter la salle ?",
description:"Vous perdrez l'intégralité de vos résultats et ne pourrez plus accéder à cette salle sans y avoir été accepté à nouveau",
validate: ()=>{
send('leave')
},
validateButton: "Quitter la salle"})
//goto('/room/join')
}}
on:keypress={()=>{}}
>
<IoMdLogOut />
</div>
<div class="icon trash" data-testid="delete"><FaRegTrashAlt /></div>
{/if}
<div
class="icon refresh"
data-testid="refresh"
on:click={() => {
console.log(ws)
ws.reconnect();
}}
on:keydown={() => {}}
data-testid="refresh"
>
<FaUndo />
</div>
<div
class="icon trash"
data-testid="leave"
class="icon trash"
on:click={() => {
ws.close();
goto('/room/join')
@ -119,7 +90,6 @@
border: none;
opacity: 0;
}
.title {
max-width: 50%;
margin: 10px 0;
@ -134,19 +104,16 @@
padding-left: 0;
padding-top: 0;
}
h1 {
margin: 0;
font-weight: 700;
font-size: inherit;
span {
font-size: 0.5em;
color: grey;
}
}
}
.head {
display: flex;
align-items: center;
@ -159,7 +126,6 @@
transition: 0.2s;
cursor: pointer;
display: flex;
&:hover {
transform: scale(1.1);
}
@ -171,7 +137,6 @@
.refresh {
color: $contrast;
&:hover {
transform: rotate(-360deg);
}

35
frontend/src/components/rooms/Stats.svelte
View File

@ -1,12 +1,12 @@
<script lang="ts">
import type { ParcoursRead, Member } from "../../types/room.type";
import { parseTimer, statsCalculator } from "../../utils/utils";
import { getContext } from "svelte";
import type { Writable } from "svelte/store";
import Classement from "./Classement.svelte";
import type { ParcoursRead, Member } from '../../types/room.type';
import { parseTimer, statsCalculator } from '../../utils/utils';
import { getContext } from 'svelte';
import type { Writable } from 'svelte/store';
import Classement from './Classement.svelte';
const parcours: Writable<ParcoursRead | null> = getContext("parcours");
const member: Writable<Member | null> = getContext("member");
const parcours: Writable<ParcoursRead | null> = getContext('parcours');
const member: Writable<Member | null> = getContext('member');
$: stats =
$parcours != null && $member != null && !!$parcours.challenges[$member.id_code]
@ -80,8 +80,6 @@
{/if}
<style lang="scss">
@import "../../mixins.scss";
.stats {
display: flex;
flex-direction: column;
@ -89,11 +87,9 @@
width: 100%;
gap: 20px;
}
.statistics {
display: flex;
gap: 20px;
p {
display: flex;
flex-direction: column;
@ -106,31 +102,16 @@
color: $red;
text-align: center;
}
.validated {
color: $green;
}
.ranks {
display: flex;
justify-content: space-evenly;
@include down(750) {
flex-direction: column;
align-items: center;
gap: 10px;
& > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
}
}
}
.classement {
width: 100%;
h2 {
h2{
text-align: center;
}
}

2
frontend/src/context/Auth.svelte
View File

@ -94,7 +94,7 @@
if (checkExpire(exp) && refresh != null) {
refreshRequest(refresh).then((r) => {
localStorage.setItem('token', r.access_token);
$username = name;
$username = username;
$isAuth = true;
});

9
frontend/src/context/Modal.svelte
View File

@ -69,19 +69,16 @@
position: fixed;
top: 50%;
left: 50%;
//width: 50%;
width: 50%;
transform: translateX(-50%) translateY(-50%) scale(0.7);
visibility: hidden;
transition: 0.4s;
opacity: 0;
z-index: 1000;
max-height: 57vh;
height: 57vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.visible {
visibility: visible !important;
transform: translateX(-50%) translateY(-50%) scale(1) !important;
@ -98,7 +95,7 @@
.overlay {
background-color: black;
opacity: 0;
z-index: 500;
z-index: 999;
width: 100%;
position: absolute;
top: 0;

54
frontend/src/context/Notification.svelte
View File

@ -1,17 +1,16 @@
<script lang="ts">
import { setContext } from "svelte";
import { writable } from "svelte/store";
import SvelteMarkdown from "svelte-markdown";
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
import SvelteMarkdown from 'svelte-markdown'
type Notif = {
title: string;
description: string;
type: "alert" | "info" | "success" | "error";
type: 'alert' | 'info' | 'success' | 'error';
};
type Notification = {
title: string;
description: string;
type: "alert" | "info" | "success" | "error";
type: 'alert' | 'info' | 'success' | 'error';
id: number;
deleted: boolean;
};
@ -45,23 +44,23 @@
};
const alert = (title: string, description: string) => {
toast({ title, description, type: "alert" });
toast({ title, description, type: 'alert' });
};
const info = (title: string, description: string) => {
toast({ title, description, type: "info" });
toast({ title, description, type: 'info' });
};
const success = (title: string, description: string) => {
toast({ title, description, type: "success" });
toast({ title, description, type: 'success' });
};
const error = (title: string, description: string) => {
toast({ title, description, type: "error" });
toast({ title, description, type: 'error' });
};
setContext("notif", { toast, alert, info, success, error });
setContext('notif', { toast, alert, info, success, error });
</script>
<slot />
<div class="notifs" class:empty={$notifications.length == 0}>
<div class="notifs" class:empty ={$notifications.length == 0}>
{#each $notifications as n}
<div
on:click={() => {
@ -75,9 +74,7 @@
class:deleted={n.deleted}
>
<h1>{n.title}</h1>
<p>
<SvelteMarkdown source={n.description} />
</p>
<p><SvelteMarkdown source={n.description} /></p>
</div>
{/each}
</div>
@ -87,12 +84,12 @@
position: absolute;
right: 0;
top: 0;
margin: 30px;
padding: 30px;
gap: 10px;
display: flex;
flex-direction: column;
width: min(calc(100% - 60px), 500px);
z-index: 500;
width: 500px;
z-index: 1000;
div {
background-color: $background;
@ -102,11 +99,9 @@
position: relative;
overflow: hidden;
word-wrap: break-word;
h1 {
font-size: 1.1em;
}
p {
font-size: 0.9em;
}
@ -121,7 +116,6 @@
right: 0;
left: 0;
}
&::before {
z-index: 3;
background-color: $background-light;
@ -129,40 +123,32 @@
width: 0%;
animation: slide 3s forwards ease-in-out;
}
&::after {
width: 100%;
z-index: 2;
}
&.deleted {
transition: 0.5s;
opacity: 0;
}
}
}
.empty {
.empty{
z-index: -20;
}
.alert::after {
.alert::after{
background-color: $orange;
}
.info::after {
.info::after{
background-color: $bleu;
}
.error::after {
.error::after{
background-color: $red;
}
.success::after {
.success::after{
background-color: $green;
}
@keyframes slide {
from {
width: 0%;

9
frontend/src/requests/auth.request.ts
View File

@ -1,11 +1,10 @@
import axios from 'axios';
import {authInstance} from '../apis/auth.api';
import { env } from "$env/dynamic/public";
export const loginRequest = (data: { username: string; password: string }) => {
return authInstance
.request({
url: '/login',
url: 'http://localhost:8002/login',
method: 'POST',
data,
headers: {
@ -24,7 +23,7 @@ export const registerRequest = (data: {
}) => {
return authInstance
.request({
url: '/register',
url: 'http://localhost:8002/register',
method: 'POST',
data,
headers: {
@ -38,9 +37,9 @@ export const registerRequest = (data: {
};
export const refreshRequest = (token: string) => {
return axios
return authInstance
.request({
url: `${env.PUBLIC_API_BASE}/refresh`,
url: 'http://localhost:8002/refresh',
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',

6
frontend/src/requests/exo.request.ts
View File

@ -131,11 +131,9 @@ export const getExoSource = (id_code: string,) => {
link.click();
link.remove();
});
};
export const generateRequest = (id_code: string,filename: string) => {
};export const generateRequest = (id_code: string,filename: string) => {
return exoInstance({
url: `generator/csv/${id_code}`,
url: `/generator/csv/${id_code}/`,
method: 'Get',
params: {filename}
}).then((r) => {

13
frontend/src/requests/room.request.ts
View File

@ -4,7 +4,7 @@ import { roomInstance } from '../apis/room.api';
export const createRoom = (data: { name: string }, username: string | null = null) => {
return roomInstance
.request({
url: '',
url: '/',
method: 'POST',
params: { username },
data: { ...data, public: false, global_results: false }
@ -13,6 +13,7 @@ export const createRoom = (data: { name: string }, username: string | null = nul
};
export const getRoom = (id_code: string, clientId: string | null = null) => {
console.log('GETROOM', clientId, { ...(clientId != null && { clientId }) });
return roomInstance
.request({
url: '/' + id_code,
@ -22,16 +23,6 @@ export const getRoom = (id_code: string, clientId: string | null = null) => {
.then((r) => r.data);
};
export const deleteRoom = (id_code: string, clientId: string | null = null) => {
return roomInstance
.request({
url: '/' + id_code,
method: 'DELETE',
params: { ...(clientId != null && { clientId }) }
})
.then((r) => r.data);
};
export const createParcours = (
id_code: string,
parcours: { time: number; name: string; max_mistakes: number; exercices: {exercice_id: string, quantity:number}[] },

3
frontend/src/routes/+layout.svelte
View File

@ -21,7 +21,6 @@
<Auth>
<Alert>
<Modal>
<main>
<NavBar/>
<slot/>
@ -79,7 +78,7 @@
height: calc(100vh - var(--navbar-height) - 10px);
overflow: auto;
height: 100%;
overflow-x: hidden;
a {
color: red;
}

30
frontend/src/routes/+page.svelte
View File

@ -1,30 +1,10 @@
<script lang="ts">
<script>
import {goto} from "$app/navigation";
</script>
<div class="rooms">
<h1>Générateur d'exercices</h1>
<div class="btns">
<button class="primary-btn" on:click={()=>{goto('/exercices')}}>Générer</button>
<button class="primary-btn" on:click={()=>{goto('/room')}}>Salles en ligne</button>
</div>
</div>
<button
on:click={() => {
}}>test</button
>
<style lang="scss">
h1{
font-size: 4rem;
margin-bottom: 1rem;
}
.rooms {
display: flex;
flex-direction: column;
align-items: center;
}
.btns {
display: flex;
gap: 20px;
}
</style>

63
frontend/src/routes/dashboard/+page.svelte
View File

@ -1,35 +1,35 @@
<script lang="ts">
import { getContext } from "svelte";
import { dashBoardRequest } from "../../requests/auth.request";
<script lang='ts'>
import {getContext} from "svelte";
import {dashBoardRequest} from "../../requests/auth.request";
import Section from "../../components/auth/Section.svelte";
import InfoForm from "../../components/auth/InfoForm.svelte";
import RoomList from "../../components/auth/RoomList.svelte";
import type { User } from "../../types/auth.type";
import type { Writable } from "svelte/store";
import { writable } from "svelte/store";
import type {User} from "../../types/auth.type";
import type {Writable} from "svelte/store";
import {writable} from "svelte/store";
import PasswordForm from "../../components/auth/PasswordForm.svelte";
import { updatePassword, updateUserRequest } from "../../requests/auth.request.js";
import {updatePassword, updateUserRequest} from "../../requests/auth.request.js";
import UserConfirm from "../../components/auth/UserConfirm.svelte";
import MdInfo from "svelte-icons/md/MdInfo.svelte";
import FaUsers from "svelte-icons/fa/FaUsers.svelte";
import FaUserLock from "svelte-icons/fa/FaUserLock.svelte";
import { goto } from "$app/navigation";
import MdInfo from 'svelte-icons/md/MdInfo.svelte'
import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
import FaUserLock from 'svelte-icons/fa/FaUserLock.svelte'
import {goto} from "$app/navigation";
let u = "";
let p = "";
const user: Writable<User | null> = writable(null);
const { logout, username, isAuth, initialLoading } = getContext("auth");
let u = '';
let p = '';
const user: Writable<User | null> = writable(null)
const {logout, username, isAuth,initialLoading} = getContext('auth')
$: !$initialLoading && $isAuth && dashBoardRequest().then((res) => {
console.log(res);
user.set(res);
});
const { show, close } = getContext("modal");
const { success, error } = getContext("notif");
let passwordForm = null;
let infoForm = null;
console.log(res)
user.set(res)
})
const {show, close} = getContext("modal")
const {success, error} = getContext("notif")
let passwordForm = null
let infoForm = null
$: !$initialLoading && !$isAuth && goto("/");
$: !$initialLoading && !$isAuth && goto('/')
</script>
@ -46,10 +46,10 @@
})
}} canValid={infoForm != null && $infoForm.valid}>
<InfoForm user={$user} bind:myForm={infoForm} />
<InfoForm user={$user} bind:myForm={infoForm}/>
</Section>
<Section title="Salles" icon={FaUsers}>
<RoomList rooms={$user.rooms} />
<RoomList rooms={$user.rooms}/>
</Section>
<Section title="Sécurité" icon={FaUserLock} validate="Modifier mon mot de passe" onValidate={()=>{
show(UserConfirm, {onValidate: ( p )=>{
@ -65,24 +65,15 @@
}, validate: "Changer mon mot de passe", cancel: close, cancelMsg: "Garder le mot de passe actuel"})
}} canValid={passwordForm != null && $passwordForm.valid}>
<PasswordForm bind:myForm={passwordForm} />
<PasswordForm bind:myForm={passwordForm}/>
</Section>
{/if}
</div>
<style lang="scss">
@import "../../mixins.scss";
<style lang='scss'>
h1 {
font-size: 3em;
margin-bottom: 20px;
@include down(800){
text-align: center;
}
}
div {
padding: 7px 15px;
}
</style>

19
frontend/src/routes/room/+page.svelte
View File

@ -1,31 +1,16 @@
<script lang="ts">
import {goto} from "$app/navigation";
</script>
<div class="rooms">
<div>
<h1>Salles</h1>
<div class="btns">
<div>
<button class="primary-btn" on:click={()=>{goto('/room/join')}}>Rejoindre</button>
<button class="primary-btn" on:click={()=>{goto('/room/create')}}>Créer</button>
</div>
</div>
<style lang="scss">
h1{
font-size: 4rem;
margin-bottom: 1rem;
}
.rooms {
display: flex;
flex-direction: column;
align-items: center;
}
.btns {
display: flex;
gap: 20px;
}
</style>

41
frontend/src/routes/room/[...slug]/+page.svelte
View File

@ -26,13 +26,13 @@
const room = writable<Room | null>(null);
const member = writable<Member | null>(null);
const parcours = writable<ParcoursRead | null>(null);
const ws = connect("ws://127.0.0.1:8002/api/ws/room/" + $page.params.slug);
const ws = connect("ws://127.0.0.1:8002/ws/room/" + $page.params.slug);
setContext("room", room);
setContext("member", member);
setContext("parcours", parcours);
setContext("ws", { send: (type: string, data: Object) => ws.send({ type, data }), ws: ws.ws });
const { error, info } = getContext("notif");
const { error } = getContext("notif");
const onMessage = (payload: { type: string; data: any }) => {
if (payload == undefined) return;
const { type, data } = payload;
@ -63,6 +63,7 @@
if ($page.url.searchParams.get("a") == "waiting") {
goto(`?`);
}
console.log("ACCEPTED", data.member);
member.set(data.member);
getRoom($page.params.slug, !$isAuth ? data.member.clientId : null).then((r) => {
@ -82,13 +83,11 @@
case "waiting":
close();
$member = { ...data.waiter, room: data.room };
goto(`?${new URLSearchParams({ a: "waiting" })}`);
return;
case "refused":
error("Refusé", "L'administrateur a refusé votre demande");
close();
ws?.close(1000);
goto("/room/join");
@ -102,25 +101,17 @@
return;
}
if ($room != null) {
info("Départ", `*${data.member.username}* n'est plus dans la salle`);
$room.members = [
...$room.members.filter((r) => "waiter_id" in r || r.id_code != data.member.id_code)
];
}
return;
case "banned":
error("Ban", "Vous avez été banni de la salle par l'administrateur");
ws?.close(1000);
goto("/room/join");
sessionStorage.removeItem("reconnect");
return;
case "deleted":
info("Suppression", "La salle a été supprimée par l'administrateur");
ws.close(1000);
goto("/room/join");
return;
case "error":
const { code, msg } = data;
if (code == 401) {
@ -157,10 +148,6 @@
} else {
error("Erreur", "Message : " + msg);
}
if (code == 404) {
ws.close(1000);
goto("/room/join");
}
return;
case "waiter":
@ -212,7 +199,6 @@
case "joined":
if ($room != null) {
info("Arrivée", `*${data.member.username}* a rejoint la salle`)
$room.members = [
...$room?.members.filter(
(m) =>
@ -360,9 +346,8 @@
$parcours.validated = $parcours.pb.mistakes <= $parcours.max_mistakes;
}
}
return
case "challenge_change":
if ($parcours != null && $member != null && !!$parcours.challenges[data.member]) {
if ($parcours != null && !!$parcours.challenges[data.member]) {
$parcours.challenges[data.member].challenges = $parcours.challenges[
data.member
].challenges.map((c) => {
@ -371,25 +356,9 @@
}
return c;
});
$parcours.challenges[data.member].challenger.validated = data.validated;
if (data.member == $member.id_code) {
$parcours.validated = data.validated;
}
}
return;
case "update_challenges":
if ($parcours != null && $member != null) {
const { challenger, challenges } = data;
if (challenges.length != 0) {
$parcours.challenges[challenger.id_code] = data;
}
if (challenger.id_code == $member.id_code) {
$parcours.validated = data.challenger.validated;
}
}
return;
}
};
handlers.update((h) => {
@ -450,7 +419,6 @@
$: console.log("edit", $page.url.searchParams.get("a"));
onDestroy(() => {
ws.close(1000);
});
@ -539,7 +507,6 @@
column-gap: 50px;
row-gap: 10px;
height: 100%;
padding: 7px 15px;
@include down(800) {
display: flex;
flex-direction: column;

22
frontend/src/routes/room/create/+page.svelte
View File

@ -7,8 +7,6 @@
let name = "";
let pseudo = "";
const { isAuth } = getContext("auth");
let loading = false;
const { error } = getContext("notif");
</script>
<div class="container">
@ -22,27 +20,15 @@
class="primary-btn"
on:click={() => {
console.log('(NAME)', name)
loading = true
createRoom({ name }, !$isAuth ? pseudo : null).then((r) => {
if(!$isAuth){
sessionStorage.setItem('reconnect', r.member)
}
goto(`/room/${r.room}`);
loading= false
}).catch((e) => {
error("Erreur", "Une erreur est survenue lors de la création de la salle")
loading= false
console.log(e);
});
}}
>
{#if loading}
<span class="spinner"></span>
{:else}
Créer
{/if}
Valider
</button>
</div>
</div>
@ -65,10 +51,4 @@
display: flex;
justify-content: center;
}
.spinner {
width: 15px;
height: 15px;
border-width: 2px !important;
}
</style>

1
frontend/src/routes/room/join/+page.svelte
View File

@ -4,6 +4,7 @@
let room = "";
</script>
<div class="container">

14
frontend/src/routes/signin/+page.svelte
View File

@ -11,7 +11,6 @@
$: {
!$initialLoading && !!$isAuth && goto('/dashboard');
}
let loading = false
</script>
<div class="parent">
@ -38,19 +37,13 @@
<button
class="primary-btn"
on:click={() => {
loading = true;
login(username, password).then(()=>{loading=false}).catch((r) => {
login(username, password).catch((r) => {
errors = { ...errors, ...r.data.detail };
loading = false;
});
}}
>
{#if loading}
<span class="spinner" />
{:else}
Se connecter
{/if}
</button>
</div>
</div>
@ -72,9 +65,4 @@
gap: 20px;
}
}
.spinner{
width: 15px;
height: 15px;
border-width: 2px!important;
}
</style>

15
frontend/src/routes/signup/+page.svelte
View File

@ -18,7 +18,6 @@
const myForm = form(username, password, confirm);
$: !$initialLoading && !!$isAuth && goto('/dashboard');
let loading = false
</script>
<div class="parent">
@ -63,9 +62,7 @@
<button
class="primary-btn"
on:click={() => {
loading = true
register($username.value, $password.value, $confirm.value).then(()=>{loading=false}).catch((r) => {
loading = false
register($username.value, $password.value, $confirm.value).catch((r) => {
console.log('ERREUR', r);
errors = { ...errors, ...r.data.detail };
@ -73,12 +70,7 @@
}}
disabled={!$myForm.valid}
>
<!-- loading et span.spinner else text-->
{#if loading}
<span class="spinner"></span>
{:else}
S'inscrire
{/if}
</button>
</div>
</div>
@ -100,9 +92,4 @@
gap: 20px;
}
}
.spinner{
width: 15px;
height: 15px;
border-width: 2px!important;
}
</style>

1
frontend/src/store/ws.ts
View File

@ -9,6 +9,7 @@ export const connect = (url,) => {
const ws = new ReconnectingWebSocket(url);
ws.onmessage = (m) => {
console.log('MESAGE', m)
messages.update((o) => [JSON.parse(m.data), ...o]);
Object.values(get(handlers)).map(h => {