wisecolt/ytp-glm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navbar design değişikliği yapıldı.

Browse Source
This commit is contained in:
szbk
2025-11-08 23:49:12 +03:00
parent dca90658da
commit 82f95e217c
3 changed files with 262 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
src/lib/components/Navbar.svelte
View File

@@ -1,174 +1,281 @@
<script> <script>
import { page } from '$app/stores'; import { goto } from "$app/navigation";
import { goto } from '$app/navigation'; import { browser } from "$app/environment";
import { onMount } from "svelte";
function handleLogout() { let user = null;
localStorage.removeItem('user');
goto('/'); function syncUserFromStorage() {
} if (!browser) return;
try {
const stored = localStorage.getItem("user");
user = stored ? JSON.parse(stored) : null;
} catch (err) {
console.error("Navbar user parse error:", err);
user = null;
}
}
function handleLogout() {
if (browser) {
localStorage.removeItem("user");
}
user = null;
goto("/");
}
onMount(() => {
if (!browser) return;
syncUserFromStorage();
const handler = () => syncUserFromStorage();
window.addEventListener("storage", handler);
return () => window.removeEventListener("storage", handler);
});
</script> </script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar-content"> <div class="navbar-content">
<div class="navbar-brand"> <div class="navbar-brand">
<img src="/logo.png" alt="YTP Logo" class="brand-logo" /> <img src="/logo.png" alt="YTP Logo" class="brand-logo" />
<span class="brand-text">YTP</span> <span class="brand-text">YTP</span>
</div> </div>
<div class="navbar-menu"> <div class="navbar-menu">
<button {#if user?.role === "goods_manager"}
class="logout-btn" <div class="goods-manager-info">
on:click={handleLogout} <div class="gm-avatar">
title="Çıkış Yap" <i class="fa-solid fa-truck s-jZJiUkwef1J0"></i>
aria-label="Çıkış Yap" </div>
> <div class="gm-details">
<i class="fas fa-sign-out-alt"></i> <div class="gm-name">{user.full_name || "Mal Sorumlusu"}</div>
</button> <div class="gm-rank">{user.rank || "Rütbe Bilinmiyor"}</div>
</div> </div>
</div> </div>
{/if}
<button
class="logout-btn"
on:click={handleLogout}
title="Çıkış Yap"
aria-label="Çıkış Yap"
>
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
</div>
</nav> </nav>
<style> <style>
.navbar { .navbar {
background-color: #2c3e50; background-color: #2c3e50;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
width: 100%; width: 100%;
} }
.navbar-content { .navbar-content {
padding: 0 var(--page-horizontal-padding); padding: 0 var(--page-horizontal-padding);
margin-left: 25px; margin-left: 25px;
display: flex;
align-items: center;
justify-content: space-between;
height: 70px;
width: 100%;
box-sizing: border-box;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 3px;
}
.brand-text {
font-size: 45px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
.brand-logo {
height: 47px;
width: auto;
object-fit: contain;
}
.navbar-menu {
display: flex;
align-items: center;
gap: 30px;
margin-right: 30px;
}
.nav-link {
color: #ecf0f1;
text-decoration: none;
font-weight: 500;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.3s ease;
}
.nav-link:hover {
background-color: #34495e;
color: #ffffff;
}
.nav-link.active {
background-color: #3498db;
color: #ffffff;
}
.logout-btn {
background: none;
border: none;
color: #ffffff;
font-size: 18px;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.logout-btn:hover {
background-color: #34495e;
transform: scale(1.1);
}
.goods-manager-info {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; gap: 12px;
height: 70px; padding: 8px 16px 8px 10px;
width: 100%; background: rgba(255, 255, 255, 0.08);
box-sizing: border-box; border-radius: 999px;
color: #ffffff;
flex: 0 1 auto;
min-width: 0;
} }
.navbar-brand { .gm-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.35);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #ffffff;
}
.gm-details {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 3px; line-height: 1.2;
min-width: 0;
} }
.brand-text { .gm-name {
font-size: 45px; font-size: 0.95rem;
font-weight: bold; font-weight: 600;
color: #ffffff; white-space: nowrap;
text-decoration: none;
} }
.brand-logo { .gm-rank {
height: 47px; font-size: 0.8rem;
width: auto; color: rgba(255, 255, 255, 0.7);
object-fit: contain; margin-top: 2px;
white-space: nowrap;
} }
.navbar-menu { @media (max-width: 768px) {
display: flex; .navbar-content {
align-items: center; padding: 0 var(--page-horizontal-padding);
gap: 30px; height: 60px;
margin-right: 30px; }
}
.nav-link { .navbar-brand {
color: #ecf0f1; gap: 10px;
text-decoration: none; }
font-weight: 500;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.3s ease;
}
.nav-link:hover { .brand-text {
background-color: #34495e; font-size: 20px;
color: #ffffff; }
}
.nav-link.active { .brand-logo {
background-color: #3498db; height: 30px;
color: #ffffff; }
}
.logout-btn { .navbar-menu {
background: none; gap: 15px;
border: none; }
color: #ffffff;
font-size: 18px;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.logout-btn:hover { .nav-link {
background-color: #34495e; padding: 6px 12px;
transform: scale(1.1); font-size: 14px;
} }
@media (max-width: 768px) { .logout-btn {
.navbar-content { font-size: 16px;
padding: 0 var(--page-horizontal-padding); padding: 6px;
height: 60px; }
}
.navbar-brand { .goods-manager-info {
padding: 6px 12px 6px 8px;
gap: 10px; gap: 10px;
max-width: 70vw;
} }
.brand-text { .gm-avatar {
font-size: 20px; width: 36px;
} height: 36px;
font-size: 16px;
}
.brand-logo { .gm-name {
height: 30px; font-size: 0.85rem;
} }
.navbar-menu { .gm-rank {
gap: 15px; font-size: 0.7rem;
} }
}
.nav-link { @media (max-width: 480px) {
padding: 6px 12px; .navbar-content {
font-size: 14px; flex-direction: column;
} height: auto;
padding: 0 var(--page-horizontal-padding);
}
.logout-btn { .navbar-brand {
font-size: 16px; margin-bottom: 10px;
padding: 6px; }
}
}
@media (max-width: 480px) { .navbar-menu {
.navbar-content { gap: 10px;
flex-direction: column; align-items: flex-start;
height: auto; }
padding: 0 var(--page-horizontal-padding);
}
.navbar-brand { .nav-link {
margin-bottom: 10px; padding: 4px 8px;
} font-size: 12px;
}
.navbar-menu { .logout-btn {
gap: 10px; font-size: 14px;
} padding: 4px;
}
.nav-link { .goods-manager-info {
padding: 4px 8px; width: 100%;
font-size: 12px; justify-content: flex-start;
} }
}
.logout-btn {
font-size: 14px;
padding: 4px;
}
}
</style> </style>

44
src/routes/dashboard/+page.svelte
View File

@@ -847,49 +847,7 @@
<!-- Ana İçerik Alanı --> <!-- Ana İçerik Alanı -->
<div class="main-content"> <div class="main-content">
<div class="welcome-card card"> <div class="welcome-card card">
<!-- Üst kısım: Kullanıcı bilgileri -->
<div class="user-header">
<div class="user-avatar">
<div class="avatar-circle">
{#if user.role === "admin"}
<i class="fa-solid fa-user-tie"></i>
{:else if user.role === "fuel_manager"}
<i class="fa-solid fa-gas-pump"></i>
{:else if user.role === "goods_manager"}
<i class="fa-solid fa-truck"></i>
{/if}
</div>
</div>
<div class="user-info">
<h2 class="user-name">{user.full_name}</h2>
<div class="role-badge {getRoleBadgeClass(user.role)}">
{@html getRoleDisplayName(user.role)}
</div>
</div>
<div class="header-actions">
<button
class="btn mobile-menu-btn"
on:click={() => (showMobileMenu = !showMobileMenu)}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<line x1="3" y1="12" x2="21" y2="12" />
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="18" x2="21" y2="18" />
</svg>
</button>
</div>
</div>
<!-- Ayırıcı -->
<div class="divider"></div>
<!-- Sadece admin ve goods_manager için bilgilendirme --> <!-- Sadece admin ve goods_manager için bilgilendirme -->
{#if user.role === "admin" && !showVehicles && !showUnits && !showPersonnel && !showGoodsManagers} {#if user.role === "admin" && !showVehicles && !showUnits && !showPersonnel && !showGoodsManagers}
<!-- Karşılama mesajı --> <!-- Karşılama mesajı -->

35
src/server.js
View File

@@ -321,6 +321,7 @@ async function initializeDatabase() {
ensureColumn('unit_id', 'unit_id INTEGER'); ensureColumn('unit_id', 'unit_id INTEGER');
ensureColumn('unit_name', 'unit_name TEXT'); ensureColumn('unit_name', 'unit_name TEXT');
ensureColumn('rank', 'rank TEXT');
} }
}); });
@@ -355,24 +356,24 @@ async function initializeDatabase() {
setTimeout(async () => { setTimeout(async () => {
// Örnek kullanıcıları ekle // Örnek kullanıcıları ekle
const users = [ const users = [
{ username: 'admin', password: 'admin123', role: 'admin', full_name: 'Sistem Yöneticisi' }, { username: 'admin', password: 'admin123', role: 'admin', full_name: 'Sistem Yöneticisi', rank: 'Yönetici' },
{ username: 'fuel', password: 'fuel123', role: 'fuel_manager', full_name: 'Yakıt Sorumlusu' }, { username: 'fuel', password: 'fuel123', role: 'fuel_manager', full_name: 'Yakıt Sorumlusu', rank: 'Yüzbaşı' },
{ username: 'goods', password: 'goods123', role: 'goods_manager', full_name: 'Ali Veli', unit_id: 1, unit_name: '1. Motorlu Piyade Tugayı' }, { username: 'goods', password: 'goods123', role: 'goods_manager', full_name: 'Ali Veli', unit_id: 1, unit_name: '1. Motorlu Piyade Tugayı', rank: 'Binbaşı' },
{ username: 'ibrahim_kara', password: 'kara123', role: 'goods_manager', full_name: 'İbrahim Kara', unit_id: 2, unit_name: '2. Zırhlı Tabur' }, { username: 'ibrahim_kara', password: 'kara123', role: 'goods_manager', full_name: 'İbrahim Kara', unit_id: 2, unit_name: '2. Zırhlı Tabur', rank: 'Yüzbaşı' },
{ username: 'osmankocak', password: 'osman123', role: 'goods_manager', full_name: 'Osman Koçak', unit_id: 3, unit_name: '3. Komutanlık' } { username: 'osmankocak', password: 'osman123', role: 'goods_manager', full_name: 'Osman Koçak', unit_id: 3, unit_name: '3. Komutanlık', rank: 'Üsteğmen' }
]; ];
// Her kullanıcıyı kontrol et ve yoksa ekle // Her kullanıcıyı kontrol et ve yoksa ekle
for (const user of users) { for (const user of users) {
const hashedPassword = await bcrypt.hash(user.password, 10); const hashedPassword = await bcrypt.hash(user.password, 10);
db.get('SELECT id, unit_id, unit_name FROM users WHERE username = ?', [user.username], (err, row) => { db.get('SELECT id, unit_id, unit_name, rank FROM users WHERE username = ?', [user.username], (err, row) => {
if (!row) { if (!row) {
db.run('INSERT INTO users (username, password, role, full_name, unit_id, unit_name) VALUES (?, ?, ?, ?, ?, ?)', db.run('INSERT INTO users (username, password, role, full_name, unit_id, unit_name, rank) VALUES (?, ?, ?, ?, ?, ?, ?)',
[user.username, hashedPassword, user.role, user.full_name, user.unit_id || null, user.unit_name || null]); [user.username, hashedPassword, user.role, user.full_name, user.unit_id || null, user.unit_name || null, user.rank || null]);
} else if ((user.unit_id && !row.unit_id) || (user.unit_name && !row.unit_name)) { } else if ((user.unit_id && !row.unit_id) || (user.unit_name && !row.unit_name) || (user.rank && !row.rank)) {
db.run('UPDATE users SET unit_id = COALESCE(unit_id, ?), unit_name = COALESCE(unit_name, ?) WHERE username = ?', db.run('UPDATE users SET unit_id = COALESCE(unit_id, ?), unit_name = COALESCE(unit_name, ?), rank = COALESCE(rank, ?) WHERE username = ?',
[user.unit_id || null, user.unit_name || null, user.username]); [user.unit_id || null, user.unit_name || null, user.rank || null, user.username]);
} }
}); });
} }
@@ -413,6 +414,7 @@ app.post('/api/login', async (req, res) => {
username: user.username, username: user.username,
role: user.role, role: user.role,
full_name: user.full_name, full_name: user.full_name,
rank: user.rank || null,
unit_id: user.unit_id ? parseInt(user.unit_id) : null, unit_id: user.unit_id ? parseInt(user.unit_id) : null,
unit_name: user.unit_name || null unit_name: user.unit_name || null
}; };
@@ -427,9 +429,10 @@ app.post('/api/login', async (req, res) => {
sessionUser.unit_id = goodsManager.unit_id; sessionUser.unit_id = goodsManager.unit_id;
sessionUser.unit_name = goodsManager.unit_name; sessionUser.unit_name = goodsManager.unit_name;
sessionUser.rank = goodsManager.rank; sessionUser.rank = goodsManager.rank;
db.run('UPDATE users SET unit_id = ?, unit_name = ? WHERE id = ?', [ db.run('UPDATE users SET unit_id = ?, unit_name = ?, rank = ? WHERE id = ?', [
goodsManager.unit_id, goodsManager.unit_id,
goodsManager.unit_name, goodsManager.unit_name,
goodsManager.rank,
user.id user.id
]); ]);
} }
@@ -579,14 +582,15 @@ app.post('/api/units', async (req, res) => {
// Mal sorumlusu kullanıcı olarak ekle // Mal sorumlusu kullanıcı olarak ekle
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
db.run( db.run(
'INSERT INTO users (username, password, role, full_name, unit_id, unit_name) VALUES (?, ?, ?, ?, ?, ?)', 'INSERT INTO users (username, password, role, full_name, unit_id, unit_name, rank) VALUES (?, ?, ?, ?, ?, ?, ?)',
[ [
username.trim(), username.trim(),
hashedPassword, hashedPassword,
'goods_manager', 'goods_manager',
full_name.trim(), full_name.trim(),
newUnit.id, newUnit.id,
newUnit.name newUnit.name,
rank.trim()
], ],
(err) => { (err) => {
if (err) reject(err); if (err) reject(err);
@@ -683,7 +687,7 @@ app.put('/api/units', async (req, res) => {
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
db.run( db.run(
`UPDATE users `UPDATE users
SET username = ?, password = ?, full_name = ?, unit_id = ?, unit_name = ? SET username = ?, password = ?, full_name = ?, unit_id = ?, unit_name = ?, rank = ?
WHERE username = ?`, WHERE username = ?`,
[ [
updatedCommander.username, updatedCommander.username,
@@ -691,6 +695,7 @@ app.put('/api/units', async (req, res) => {
updatedCommander.full_name, updatedCommander.full_name,
units[unitIndex].id, units[unitIndex].id,
units[unitIndex].name, units[unitIndex].name,
updatedCommander.rank,
previousCommanderUsername previousCommanderUsername
], ],
function (err) { function (err) {