ReiMerc/temperature-alarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of git.reim.ar:ReiMerc/temperature-alarm

Browse Source
This commit is contained in:
Jeas0001 2025-03-24 12:29:06 +01:00
commit eade0f6d69
21 changed files with 368 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
deploy.sh
View File

@ -1,4 +1,4 @@
#!/usr/bin #!/bin/sh
BASEPATH=/home/developers/temperature-alarm BASEPATH=/home/developers/temperature-alarm
@ -13,5 +13,5 @@ chown www-data:www-data -R /var/www/html
# Update backend # Update backend
docker stop api docker stop api
docker build --tag api $BASEPATH/backend/Api docker build --tag api $BASEPATH/backend/Api
docker run -d -p 8080:80 -p 8081:443 -p 5000:5000 --name api --rm api docker run -d -p 5000:5000 --name api --rm api

0
frontend/devices/index.html Normal file
View File

BIN
frontend/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
frontend/fonts/PoetsenOne-Regular.ttf Normal file
View File

Binary file not shown.

8
frontend/home/index.html
View File

@ -5,12 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Temperature-Alarm-Web</title> <title>Temperature-Alarm-Web</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<link rel="stylesheet" href="/styles/home.css" />
<script type="module" src="/scripts/home.js"></script>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div class="topnav"> <div class="topnav">
<a class="active" href="/home/index.html">Home</a> <a class="active" href="/home/index.html">Home</a>
<div style="display: flex; justify-content: flex-end;">
<a class="" href="/home/index.html">Devices</a>
<a class="" href="/profile/index.html">Profile</a>
</div>
</div> </div>
<div class="chartContainer"> <div class="chartContainer">
<canvas id="myChart" style="width: 49%; height: 49%;"></canvas> <canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
@ -27,6 +33,4 @@
</table> </table>
</div> </div>
</body> </body>
<link rel="stylesheet" href="/styles/home.css" />
<script type="module" src="/scripts/home.js"></script>
</html> </html>

BIN
frontend/img/background.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 296 KiB

After

Width:  |  Height:  |  Size: 266 KiB

BIN
frontend/img/background2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 266 KiB

BIN
frontend/img/logo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
frontend/img/user-32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

37
frontend/index.html
View File

@ -3,23 +3,26 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>Temperature Alarm</title> <title>Temperature Alarm</title>
<link rel="stylesheet" href="/styles/frontpage.css"> <link rel="stylesheet" href="/styles/frontpage.css">
</head> </head>
<body> <body>
<main> <main>
<div id="title"> <div id="title">
<h1>Temperature Alarm</h1> <h1>
<img id="logo" src="/img/logo.webp" alt="Logo">
Temperature Alarm
</h1>
<div id="buttons-wrapper"> <div id="buttons-wrapper">
<a href="/login"> <a href="/login">
<button class="secondary">Login</button> <button class="secondary">Login</button>
</a> </a>
<a href="/register"> <a href="/register">
<button class="primary">Sign up</button> <button class="primary">Sign up</button>
</a> </a>
</div> </div>
</div> </div>
</main> </main>
</body> </body>
</html> </html>

6
frontend/mockdata/profile.mockdata.js Normal file
View File

@ -0,0 +1,6 @@
export const profileData = {
id: 1,
username: "LilleBRG",
email: "lillebrg@gmail.com",
pfp: "/img/user-32.png"
}

65
frontend/profile/index.html
View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Register - Temperature Alarm</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles/auth.css">
<link rel="stylesheet" href="/styles/profile.css">
<script defer type="module" src="/scripts/profile.js"></script>
</head>
<body>
<div id="container">
<div id="profileCard"></div>
<div class="btnContainer">
<button class="btn" id="openEditModal">Edit</button>
<button class="btn" id="openPasswordModal">Change Password</button>
</div>
</div>
<div id="editModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Edit Username or Email</h2>
<form id="editForm">
<div class="form-container">
<label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter email "id="email" required>
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter username" id="uname" required>
<button type="submit">Save Changes</button>
<div class="error-text" id="form-error-edit"></div>
</div>
</form>
</div>
</div>
<div id="PasswordModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Change Password</h2>
<form id="PasswordForm">
<div class="form-container">
<label for="psw"><b>Old Password</b></label>
<input type="password" placeholder="Enter your current password" id="oldpsw" required>
<label for="psw"><b>New Password</b></label>
<input type="password" placeholder="Enter the new password" id="psw" required>
<label for="rpsw"><b>Repeat New Password</b></label>
<input type="password" placeholder="Enter the new password again" id="rpsw" required>
<button type="submit">Change Password</button>
<div class="error-text" id="form-error-password"></div>
</div>
</form>
</div>
</div>
</body>
</html>

91
frontend/scripts/profile.js
View File

@ -0,0 +1,91 @@
import { profileData } from "../mockdata/profile.mockdata.js";
var table = document.getElementById(`profileCard`);
table.innerHTML += `
<div class="pfp">
<img style="width:200px; height:200px" src="${profileData.pfp}">
</div>
<div class="userData">
<h2>${profileData.username}</h2>
<h2>${profileData.email}</h2>
</div>
</div>`;
var pswModal = document.getElementById("PasswordModal");
var editModal = document.getElementById("editModal");
var editBtn = document.getElementById("openEditModal");
var passwordBtn = document.getElementById("openPasswordModal");
// Open modals
editBtn.onclick = () => (editModal.style.display = "block");
passwordBtn.onclick = () => (pswModal.style.display = "block");
// Close modals when clicking on any close button
document.querySelectorAll(".close").forEach(closeBtn => {
closeBtn.onclick = () => {
pswModal.style.display = "none";
editModal.style.display = "none";
};
});
// Close modals when clicking outside
window.onclick = (event) => {
if (event.target == pswModal || event.target == editModal) {
pswModal.style.display = "none";
editModal.style.display = "none";
}
};
document.getElementById("editForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevents default form submission
document.getElementById("form-error-edit").style.display = "none";
// Get form values
const email = document.getElementById("email").value;
const username = document.getElementById("uname").value;
// Call function with form values
update(email, username)
.then(response => {
if (response?.error) {
document.getElementById("form-error").innerText = response.error;
document.getElementById("form-error").style.display = "block";
return;
}
location.href = "/login";
});
});
document.getElementById("PasswordForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevents default form submission
document.getElementById("form-error-password").style.display = "none";
// Get form values
const oldPassword = document.getElementById("oldpsw").value;
const newPassword = document.getElementById("psw").value;
const repeatPassword = document.getElementById("rpsw").value;
if (newPassword !== repeatPassword) {
let errorDiv = document.getElementById("form-error-password");
errorDiv.style.display = "block";
errorDiv.innerText = "Passwords do not match!";
return;
}
// Call function with form values
update(email, username)
.then(response => {
if (response?.error) {
document.getElementById("form-error").innerText = response.error;
document.getElementById("form-error").style.display = "block";
return;
}
location.href = "/login";
});
});

16
frontend/scripts/services/users.service.js
View File

@ -28,13 +28,25 @@ export function create(email, username, password, repeatPassword){
.catch(err => { error: err.message }); .catch(err => { error: err.message });
} }
function update(email, username, password){ export function update(email, username){
return fetch(`${address}/user/update`, { return fetch(`${address}/user/update`, {
method: "PATCH", method: "PATCH",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"
}, },
body: JSON.stringify({email: email, username: username, password: password}) body: JSON.stringify({email: email, username: username})
})
.then(handleResponse)
.catch(err => { error: err.message });
}
export function updatePassword(oldPassword, newPassword){
return fetch(`${address}/user/update-password`, {
method: "PATCH",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({oldPassword: oldPassword, newPassword: newPassword})
}) })
.then(handleResponse) .then(handleResponse)
.catch(err => { error: err.message }); .catch(err => { error: err.message });

3
frontend/styles/auth.css
View File

@ -49,3 +49,6 @@ button:hover {
margin-top: 1rem; margin-top: 1rem;
} }
button{
border-radius: 20px;
}

16
frontend/styles/frontpage.css
View File

@ -1,3 +1,8 @@
@font-face {
font-family: "Poetsen One";
src: url("/fonts/PoetsenOne-Regular.ttf");
}
body { body {
margin: 0; margin: 0;
font-family: sans-serif; font-family: sans-serif;
@ -6,17 +11,26 @@ body {
main { main {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-image: url("/img/background2.jpg"); background-image: url("/img/background.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
#logo {
height: 1em;
position: relative;
top: 5px;
filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
}
h1 { h1 {
margin: 0; margin: 0;
font-size: 4rem; font-size: 4rem;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4); text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
font-family: "Poetsen One";
font-weight: normal;
} }
#title { #title {

72
frontend/styles/profile.css
View File

@ -0,0 +1,72 @@
#profileCard{
margin-top: 50px;
justify-content: center;
align-items: center;
flex-direction: column;
display: flex;
}
.userData{
margin-top: 10px;
justify-content: center;
align-items: center;
flex-direction: column;
display: flex;
}
h2{
margin: 0;
}
.btnContainer{
justify-content: center;
align-items: center;
display: flex;
}
.btn{
margin-inline: 5px;
width: 170px;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.form-container{
width: 90%;
}

4
iot/Makefile
View File

@ -1,3 +1,3 @@
all: main.c mqtt.c temperature.c all: main.c mqtt.c temperature.c device_id.c
$(CC) -lmosquitto -lpthread -li2c main.c mqtt.c temperature.c $(CC) -lmosquitto -lpthread -li2c main.c mqtt.c temperature.c device_id.c

46
iot/device_id.c Normal file
View File

@ -0,0 +1,46 @@
#include <stdlib.h>
#include <stdio.h>
#include "device_id.h"
#define DEVICE_ID_SIZE 5
char *get_device_id(void)
{
FILE *file = fopen("device_id.txt", "r");
if (!file) {
char *device_id = generate_device_id();
file = fopen("device_id.txt", "w");
fprintf(file, "%s", device_id);
fclose(file);
return device_id;
}
char *device_id = malloc(DEVICE_ID_SIZE + 1);
fgets(device_id, DEVICE_ID_SIZE + 1, file);
fclose(file);
return device_id;
}
char *generate_device_id(void)
{
char *device_id = malloc(DEVICE_ID_SIZE + 1);
for (int i = 0; i < DEVICE_ID_SIZE; i++) {
device_id[i] = 'A' + (random() % 26);
}
device_id[DEVICE_ID_SIZE] = '\0';
return device_id;
}
void destroy_device_id(char *device_id)
{
free(device_id);
}

6
iot/device_id.h Normal file
View File

@ -0,0 +1,6 @@
char *get_device_id(void);
char *generate_device_id(void);
void destroy_device_id(char *device_id);

23
iot/main.c
View File

@ -4,23 +4,36 @@
#include <stdbool.h> #include <stdbool.h>
#include <string.h> #include <string.h>
#include <stdio.h> #include <stdio.h>
#include <time.h>
#include "mqtt.h" #include "mqtt.h"
#include "temperature.h" #include "temperature.h"
#include "device_id.h"
void *watch_temperature(void *arg) void *watch_temperature(void *arg)
{ {
char *device_id = get_device_id();
printf("Device ID: %s\n", device_id);
temperature_handle_t temp_handle = init_temperature(); temperature_handle_t temp_handle = init_temperature();
get_temperature(temp_handle); get_temperature(temp_handle);
while (true) { while (true) {
double temperature = get_temperature(temp_handle); double temperature = get_temperature(temp_handle);
size_t timestamp = time(NULL);
char *str = malloc(snprintf(NULL, 0, "%lf", temperature) + 1); char *format = "{"
sprintf(str, "%lf", temperature); "\"temperature\": %lf,"
"\"device_id\": \"%s\","
"\"timestamp\": %zu"
"}";
mqtt_send_message("/temperature", str); char *str = malloc(snprintf(NULL, 0, format, temperature, device_id, timestamp) + 1);
sprintf(str, format, temperature, device_id, timestamp);
mqtt_send_message("temperature", str);
free(str); free(str);
@ -29,6 +42,8 @@ void *watch_temperature(void *arg)
sleep(60); sleep(60);
} }
destroy_device_id(device_id);
return NULL; return NULL;
} }
@ -40,6 +55,8 @@ void mqtt_on_connect(void)
int main(void) int main(void)
{ {
srand(time(NULL));
init_mqtt(); init_mqtt();
return EXIT_SUCCESS; return EXIT_SUCCESS;