Skip to content
GitLab
Commit 2f300868 authored by Patrick Ade's avatar Patrick Ade
Browse files

Refactor authentication and registration processes to use Axios; update API... 

Refactor authentication and registration processes to use Axios; update API endpoints and improve error handling
parent 07514b02
Show whitespace changes
Inline Side-by-side
frontend/src/stores/auth.ts
View file @ 2f300868
......@@ -28,7 +28,7 @@ export const useAuthStore = defineStore('auth', {
actions: {
async login(username: string, password: string, router: Router | null = null): Promise<void> {
try {
const response = await api.post('/auth/login', {
const response = await api.post('/login', {
username,
password,
})
......@@ -64,7 +64,7 @@ export const useAuthStore = defineStore('auth', {
}
try {
const response = await api.get('/auth/me')
const response = await api.get('/user')
this.user = response.data
this.isAuthenticated = true
} catch (error) {
......
frontend/src/views/BuildingsView.vue
View file @ 2f300868
......@@ -2,6 +2,7 @@
import { ref } from 'vue'
import BauCard from '../components/BauCard.vue'
import RoomCard from '../components/RoomCard.vue'
import api from '@/services/apiClient'
const buildings = [
{
......@@ -27,7 +28,7 @@ const buildings = [
title: 'Bau 8',
description: 'Informatik und IT-Räume',
image: new URL('@/assets/bau-8.png', import.meta.url).href,
}
},
]
const selectedBuildingId = ref<string | null>(null)
......@@ -42,16 +43,13 @@ async function loadRooms(buildingId: string) {
error.value = null
try {
const response = await fetch(`http://localhost:8000/api/get_rooms_from_building?building=${buildingId}`)
const data = await response.json()
const response = await api.get('/get_rooms_from_building', {
params: { building: buildingId },
})
if (response.ok) {
rooms.value = data.rooms
} else {
throw new Error(data.detail || 'Fehler beim Laden der Räume')
}
rooms.value = response.data.rooms
} catch (err: any) {
error.value = err.message
error.value = err.response?.data?.detail || err.message || 'Fehler beim Laden der Räume'
} finally {
isLoading.value = false
}
......@@ -90,12 +88,14 @@ async function loadRooms(buildingId: string) {
display: flex;
padding: 2rem;
gap: 2rem;
align-items: flex-start; /* wichtige Ergänzung */
align-items: flex-start;
/* wichtige Ergänzung */
}
.building-grid {
display: flex;
flex-direction: column; /* Gebäude untereinander */
flex-direction: column;
/* Gebäude untereinander */
gap: 1.5rem;
flex-shrink: 0;
}
......
frontend/src/views/ChartView.vue
View file @ 2f300868
<template>
<div class="chart-view">
<h2>Daten für Raum: {{ room }}</h2>
<div class="time-form">
<label>
Start:
<input class="datetime" type="datetime-local" v-model="start" />
</label>
<label>
Stop:
<input class="datetime" type="datetime-local" v-model="stop" />
</label>
<button @click="loadData">Zeitraum aktualisieren</button>
<button @click="loadDataWithDefaultWindow" class="default-btn">Zeige die letzte Woche</button>
</div>
<div class="chart-grid">
<ChartCard
title="CO₂ Verlauf"
:labels="displayLabels"
:data="co2Data"
borderColor="#ff6384"
/>
<ChartCard
title="Temperatur Verlauf"
:labels="displayLabels"
:data="temperatureData"
borderColor="#36a2eb"
/>
<ChartCard
title="Luftfeuchtigkeit Verlauf"
:labels="displayLabels"
:data="humidityData"
borderColor="#4bc0c0"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import ChartCard from '../components/ChartCard.vue'
import api from '@/services/apiClient' // Axios instance
export default defineComponent({
name: 'ChartView',
......@@ -58,16 +19,12 @@ export default defineComponent({
const start = ref('')
const stop = ref('')
// Computed property for displaying max 6 labels
const displayLabels = computed(() => {
const total = labels.value.length
if (total <= 6) return labels.value
const result: string[] = []
for (let i = 0; i < total; i++) {
result.push('')
}
const result: string[] = Array(total).fill('')
for (let i = 0; i < 6; i++) {
const idx = Math.round(i * (total - 1) / 5)
const idx = Math.round((i * (total - 1)) / 5)
result[idx] = labels.value[idx]
}
return result
......@@ -85,7 +42,6 @@ export default defineComponent({
const now = new Date()
const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
// Format dates properly for datetime-local inputs
const formatForInput = (date: Date) => {
const year = date.getFullYear()
const month = ('0' + (date.getMonth() + 1)).slice(-2)
......@@ -110,16 +66,16 @@ export default defineComponent({
return
}
const url = `http://localhost:8000/api/room_data_range?room=${encodeURIComponent(
room
)}&start=${startISO}&stop=${stopISO}`
try {
const response = await fetch(url)
if (!response.ok) throw new Error('Fehler beim Laden')
const response = await api.get('/room_data_range', {
params: {
room,
start: startISO,
stop: stopISO,
},
})
const json = await response.json()
const entries = Object.entries(json.data).sort(
const entries = Object.entries(response.data.data).sort(
([a], [b]) => new Date(a).getTime() - new Date(b).getTime()
)
......@@ -132,18 +88,14 @@ export default defineComponent({
})
)
co2Data.value = entries.map(([, values]: any) => Number(values.co2))
temperatureData.value = entries.map(([, values]: any) =>
Number(values.temperature)
)
humidityData.value = entries.map(([, values]: any) =>
Number(values.humidity)
)
} catch (err) {
temperatureData.value = entries.map(([, values]: any) => Number(values.temperature))
humidityData.value = entries.map(([, values]: any) => Number(values.humidity))
} catch (err: any) {
console.error('❌ Fehler beim Laden der Daten:', err)
alert('Fehler beim Laden der Daten')
}
}
// Function to load data with default last week window
async function loadDataWithDefaultWindow() {
setDefaultTimeWindow()
await loadData()
......@@ -168,55 +120,3 @@ export default defineComponent({
},
})
</script>
<style scoped>
.chart-view {
padding: 2rem;
color: #1a1a1a;
}
.time-form {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
align-items: center;
flex-wrap: wrap;
}
.time-form input {
padding: 0.5rem;
font-size: 1rem;
border-radius: 5px;
}
.time-form button {
background: #007bff;
color: white;
padding: 0.6rem 1.2rem;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
}
.time-form button:hover {
background-color: #0056b3;
}
.time-form .default-btn {
background: #28a745;
}
.time-form .default-btn:hover {
background-color: #218838;
}
.chart-grid {
display: flex;
flex-wrap: nowrap;
gap: 2rem;
justify-content: flex-start;
flex-direction: row;
}
</style>
frontend/src/views/RegisterView.vue
View file @ 2f300868
<script lang="ts">
import { getCSRFToken } from '../stores/auth'
import api from '@/services/apiClient' // Your axios instance
export default {
data() {
......@@ -13,29 +13,23 @@ export default {
methods: {
async register() {
try {
const response = await fetch('http://localhost:8000/api/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCSRFToken(),
},
body: JSON.stringify({
email: this.email,
const response = await api.post('/register', {
username: this.email,
password: this.password,
}),
credentials: 'include',
})
const data = await response.json()
if (response.ok) {
if (response.status === 200) {
this.success = 'Registration successful! Please log in.'
setTimeout(() => {
this.$router.push('/login')
}, 1000)
} else {
this.error = data.error || 'Registration failed'
this.error = response.data.error || 'Registration failed'
}
} catch (err) {
this.error = 'An error occurred during registration: ' + err
} catch (err: any) {
this.error =
err.response?.data?.error ||
'An error occurred during registration: ' + err.message
}
},
},
......@@ -46,7 +40,9 @@ export default {
<div class="register-container">
<div class="register-card">
<h1>Registrieren</h1>
<p class="intro">Erstelle ein Konto, um Zugriff auf Sensor- und Raumdaten zu erhalten.</p>
<p class="intro">
Erstelle ein Konto, um Zugriff auf Sensor- und Raumdaten zu erhalten.
</p>
<form @submit.prevent="register">
<div class="form-group">
......@@ -80,7 +76,6 @@ export default {
</div>
</template>
<style scoped>
.register-container {
display: flex;
......
frontend/src/views/RoomNavView.vue
View file @ 2f300868
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCSRFToken } from '../stores/auth'
import RoomCard from '../components/RoomCard.vue'
import api from '@/services/apiClient' // Custom Axios instance
const rooms = ref<string[]>([])
const error = ref<string | null>(null)
const fetchRooms = async () => {
try {
const response = await fetch('http://localhost:8000/api/get_rooms', {
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCSRFToken(),
},
credentials: 'include',
})
const data = await response.json()
if (response.ok && data.rooms) {
rooms.value = data.rooms
const response = await api.get('/get_rooms')
if (response.data.rooms) {
rooms.value = response.data.rooms
} else {
error.value = 'Fehler beim Laden der Räume.'
}
} catch (err) {
error.value = 'Serverfehler: ' + err
} catch (err: any) {
error.value = err.response?.data?.detail || 'Serverfehler: ' + err.message
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal