Skip to content

Commit 862bc23

Browse files
pablo-schpablo-sch
committed
styles and notifications are updated
1 parent 1744c47 commit 862bc23

25 files changed

+335
-66
lines changed

‎index.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,23 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66

7-
<title>Document</title>
7+
<title>Home</title>
88

99
<link rel="icon" type="image/png" href="./src/assets/web_icon.png">
1010

1111
<link rel="stylesheet" href="src/styles/normalize.css">
1212
<link rel="stylesheet" href="src/styles/common.css">
1313

1414
<link rel="stylesheet" href="src/styles/navbar.css">
15+
<link rel="stylesheet" href="src/styles/footer.css">
16+
1517
<link rel="stylesheet" href="src/styles/components/notifications.css">
1618

1719
<link rel="stylesheet" href="src/styles/components/loader.css">
1820
<link rel="stylesheet" href="src/styles/components/loader-container.css">
1921

20-
<link rel="stylesheet" href="src/styles/display-posts.css">
21-
22+
<link rel="stylesheet" href="src/styles/components/posts-display.css">
23+
<link rel="stylesheet" href="src/styles/components/post.css">
2224
</head>
2325

2426
<body>
@@ -39,6 +41,8 @@ <h1>Posts</h1>
3941
<div class="showPosts-container"></div>
4042
</main>
4143

44+
<div class="footer"></div>
45+
4246
<script type="module" src="./src/js/main.js"></script>
4347
</body>
4448
</html>

‎public/no-image-available.jpg‎

11.5 KB
Loading

‎src/js/components/footer/footer.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { footerView } from '../footer/footerView.js';
2+
3+
export function footer() {
4+
const container = document.querySelector('.footer')
5+
container.innerHTML = footerView();
6+
7+
}

‎src/js/components/footer/footerView.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function footerView() {
2+
return `<a href="https://github.com/PabloSch26" class="GitGub Link">Link GitHub PabloSch26</a>`;
3+
}

‎src/js/components/notifications/notificationsController.js‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,30 +15,45 @@ export function notificationsController(container) { // container is ".notificat
1515
newNotification.classList.add(type) // <-- Here we add the class of the container we pass to "type".
1616
newNotification.innerHTML = buildNotification(message, type) // <-- If "type" is not added, the default will be “error”.
1717

18-
container.appendChild(newNotification) // <-- Here we insert our HTML ready to use.
19-
2018
const closeButton = newNotification.querySelector("button"); // <-- It will select only the button element of the container that we pass it.
2119
closeButton.addEventListener("click", () => {
2220
removeNotification(newNotification);
2321
});
2422

23+
container.appendChild(newNotification) // <-- Here we insert our HTML ready to use.
24+
25+
// Obtener todas las notificaciones actuales después de agregar la nueva
26+
let currentNotifications = Array.from(container.querySelectorAll('.notification'));
27+
28+
// Si hay más de 3, elimina las más antiguas
29+
while (currentNotifications.length > 3) {
30+
const oldest = currentNotifications.shift(); // remueve la primera (más vieja)
31+
removeNotification(oldest);
32+
}
33+
34+
// Control de duración dependiendo del tipo
2535
if (type === 'error') {
26-
// Searches for all error notifications, excluding the new one.
27-
const oldErrors = Array.from(container.querySelectorAll('.notification.error'))
28-
.filter(n => n !== newNotification);
36+
// Errores antiguos (excepto el nuevo)
37+
const oldErrors = currentNotifications.filter(n =>
38+
n !== newNotification && n.classList.contains('error')
39+
);
2940

30-
// The previous ones are automatically deleted.
41+
// Los errores antiguos duran 1 segundo
3142
oldErrors.forEach(n => {
32-
setTimeout(() => removeNotification(n), 500);
43+
setTimeout(() => removeNotification(n), 1000);
3344
});
3445

35-
// The new (most recent) one is not automatically deleted.
46+
// El nuevo error dura 5 segundos
47+
setTimeout(() => {
48+
removeNotification(newNotification);
49+
}, 5000);
50+
} else {
51+
// Notificaciones que no son de tipo 'error' también desaparecen a los 5s
52+
setTimeout(() => {
53+
removeNotification(newNotification);
54+
}, 5000);
3655
}
37-
38-
if (type !== 'error') {
39-
setTimeout(() => { removeNotification(newNotification) }, 5000);
40-
}
41-
}
56+
};
4257

4358
return {
4459
showNotification

‎src/js/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@ import { initSignUp } from './modules/signup/signup.js';
1010

1111
import { navbar } from './components/navbar/navbar.js';
1212
import { redirectIfNotAuthenticated } from './auth/auth.js';
13+
import { footer } from './components/footer/footer.js';
1314

1415

1516
document.addEventListener("DOMContentLoaded", () => {
1617

1718
redirectIfNotAuthenticated();
1819
navbar();
20+
footer();
1921

2022
const path = window.location.pathname;
2123

‎src/js/modules/create-post/createPostController.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const createPostController = (createPostForm) => {
4646
type: 'success'
4747
})
4848

49-
setTimeout(() => { window.location = '/'; }, 3000)
49+
setTimeout(() => { window.location = '/'; }, 1000)
5050

5151
} catch (error) {
5252
//dispatchCreateProductError(createPostForm, error.message);

‎src/js/modules/login/loginController.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export function loginController(loginForm) {
5757

5858
localStorage.setItem("accessToken", token)
5959

60-
setTimeout(() => { window.location = '/index.html' }, 500);
60+
setTimeout(() => { window.location = '/index.html' }, 1000);
6161

6262
} catch (error) {
6363

‎src/js/modules/post-detail/postDetailModel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ export async function getLoggedInUserInfo() {
6161

6262
if (!response.ok) {
6363
const errorMessage = response.message;
64-
console.error(`Error: ${response.status} (${response.statusText}): ${errorMessage}`);
65-
throw new Error(response.status + " " + response.statusText);
64+
console.error(`Error: ${response.status} (${response.statusText})`);
65+
//throw new Error(response.status + " " + response.statusText);
6666
}
6767

6868
const user = await response.json();

‎src/js/modules/post-detail/postDetailView.js‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,38 @@
11
export const buildpostDetailView = (post) => {
2+
3+
const postType = post.isPurchase ? 'purchase' : 'sale';
4+
const imageSrc = post.photo ? post.photo : '../public/no-image-available.jpg';
5+
6+
7+
const date = new Date(post.updatedAt);
8+
9+
const hours = date.getHours().toString().padStart(2, '0');
10+
const minutes = date.getMinutes().toString().padStart(2, '0');
11+
const day = date.getDate().toString().padStart(2, '0');
12+
const month = (date.getMonth() + 1).toString().padStart(2, '0');
13+
const year = date.getFullYear();
14+
15+
const formatted = `${hours}:${minutes} ${day}-${month}-${year}`;
16+
17+
218
let postView = `
3-
<label> Post Owner: ${post.user.name}</label>
4-
<label>${post.name}</label>
5-
<label>${post.photo}</label>
6-
<label> Description:</label>
19+
<div class="post form">
20+
21+
<div class='image-container'>
22+
<img src="${imageSrc}" alt="Product Image" class='post-image'>
23+
<p class='sale-label ${postType}'>${postType}</p>
24+
</div>
25+
26+
<p class="title"><strong>${post.name} - €${post.price}</strong></p>
27+
28+
<p><strong>Owner: </strong>${post.user.name}</p>
29+
30+
<p><strong>Description:</strong></p>
731
<p>${post.description}</p>
8-
<label>Price: $ ${post.price}</label>
9-
<label>${post.isPurchase}</label>
32+
33+
<p><strong>Last update at: </strong>${formatted}</p>
34+
35+
</div>
1036
`;
1137

1238
return postView

0 commit comments

Comments
 (0)