diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 4cd1884..f0b58cf 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -37,7 +37,8 @@ import { CircularProgress, Stack, Grid, - Avatar + Avatar, + GlobalStyles } from '@mui/material' import { Dashboard as DashboardIcon, @@ -503,176 +504,119 @@ function App(): JSX.Element { const installedPhpVersions = phpVersions.filter(v => v.status === 'installed') return ( - - theme.zIndex.drawer - 1, - bgcolor: 'rgba(21, 62, 94, 0.85)', - backdropFilter: 'blur(10px)' - }} - > - - - - + <> + + + theme.zIndex.drawer - 1, + bgcolor: 'rgba(21, 62, 94, 0.85)', + backdropFilter: 'blur(10px)' + }} + > + + + + + + + setActiveTab('settings')}> + - - setActiveTab('settings')}> - - - - + + - - - Logo - - - - - - setActiveTab('dashboard')}> - - - - - - setActiveTab('projects')}> - - - - - - setActiveTab('tools')}> - - - - - - - - - setActiveTab('settings')}> - - - - - - - + + + Logo + + + + + + setActiveTab('dashboard')}> + + + + + + setActiveTab('projects')}> + + + + + + setActiveTab('tools')}> + + + + + + + + + setActiveTab('settings')}> + + + + + + + - - - - {activeTab === 'settings' && ( - + + + + {activeTab === 'settings' && ( + - - setSettingsTab(v)} textColor="primary" indicatorColor="primary" variant="scrollable" scrollButtons="auto"> - } iconPosition="start" /> - } iconPosition="start" /> - } iconPosition="start" /> - } iconPosition="start" /> - - + + setSettingsTab(v)} textColor="primary" indicatorColor="primary" variant="scrollable" scrollButtons="auto"> + } iconPosition="start" /> + } iconPosition="start" /> + } iconPosition="start" /> + } iconPosition="start" /> + + - {settingsTab === 0 && ( - - - PHP Sürümleri - Gereken PHP sürümlerini buradan indirebilir ve yönetebilirsiniz. - - - {phpVersions.length === 0 && !loadingVersions && ( - - )} - {phpVersions.map((v) => ( - - - {v.status === 'installed' ? : } - - - - {v.status === 'available' && ( - - )} - {v.status === 'downloading' && ( - - - - )} - {v.status === 'installed' && ( - - )} - - - ))} - - - )} - - {settingsTab === 1 && ( - - - MySQL Sürümleri - Farklı MySQL sürümlerini indirebilir ve sunucunuzda kullanabilirsiniz. - - - {mySqlVersions.length === 0 && !loadingVersions && ( - - )} - {mySqlVersions.map((v) => ( - - - {v.status === 'installed' ? : } - - - {`MySQL ${v.version} (${v.cycle})`} - {v.description && ( - - )} - - } - secondary={v.status === 'downloading' ? `İndiriliyor... %${Math.round(v.progress)}` : v.status === 'installed' ? 'Kurulu' : 'İndirilebilir'} - sx={{ flexGrow: 1 }} - /> - - {v.status === 'installed' && ( - { - const newPorts = { ...(settings.mysqlPorts || {}), [v.id]: e.target.value } - setSettings({ ...settings, mysqlPorts: newPorts }) - }} - variant="outlined" - size="small" - sx={{ width: 80 }} - /> - )} + {settingsTab === 0 && ( + + + PHP Sürümleri + Gereken PHP sürümlerini buradan indirebilir ve yönetebilirsiniz. + + + {phpVersions.length === 0 && !loadingVersions && ( + + )} + {phpVersions.map((v) => ( + + + {v.status === 'installed' ? : } + + {v.status === 'available' && ( - )} @@ -685,653 +629,716 @@ function App(): JSX.Element { )} - - - ))} - - - )} - - {settingsTab === 2 && ( - - - Nginx Web Sunucusu - Sunucu için gerekli Nginx binary dosyalarını buradan indirebilirsiniz. - - - {nginxVersions.map((v) => ( - - - {v.status === 'installed' ? : } - - - - {v.status === 'available' && ( - - )} - {v.status === 'downloading' && ( - - - - )} - {v.status === 'installed' && ( - - )} - - - ))} - - - )} - - {settingsTab === 3 && ( - - - Port Ayarları - - setSettings({ ...settings, nginxPort: e.target.value })} - variant="filled" - size="small" - helperText="Varsayılan: 80" - /> - setSettings({ ...settings, phpPort: e.target.value })} - variant="filled" - size="small" - helperText="Varsayılan: 9001" - /> - setSettings({ ...settings, mysqlPort: e.target.value })} - variant="filled" - size="small" - helperText="Varsayılan: 3306" - /> - + + ))} + - - - - - )} - - )} - - {activeTab === 'dashboard' && ( - <> - - - - setDashboardTab(v)} textColor="primary" indicatorColor="primary"> - - - - - - - - - {/* Nginx Box */} - {(dashboardTab === 0 || dashboardTab === 1) && ( - - - - - {getStatusChip(status.nginx)} - - Nginx - Port: {settings.nginxPort} - - - handleOpenLogs('nginx')} title="Hata Logları" size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}> - - - { - window.api.invoke('services:reload', 'nginx').then((res: any) => { - setNotification({ open: true, message: res.message, severity: res.success ? 'success' : 'error' }) - }) - }} - title="Yapılandırmayı Yeniden Yükle" - size="small" - disabled={status.nginx !== 'running'} - sx={{ bgcolor: 'rgba(255,255,255,0.05)', '&:hover': { color: 'primary.main' } }} - > - - - - handleToggleService('nginx')} - disabled={status.nginx === 'starting'} - /> - - - )} - {/* PHP Boxes */} - {(dashboardTab === 0 || dashboardTab === 2) && installedPhpVersions.map(v => ( - - - - - {getStatusChip(status[`php:${v.version}`] || 'stopped')} - - PHP {v.version} - Port: {v.port || '?'} - - handleOpenLogs(`php:${v.version}`)} size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}> - - - handleToggleService(`php:${v.version}`)} - disabled={status[`php:${v.version}`] === 'starting'} - /> - - - - ))} - - {/* MySQL Boxes */} - {(dashboardTab === 0 || dashboardTab === 3) && mySqlVersions.filter(v => v.status === 'installed').map(v => ( - - - - - {getStatusChip(status[`mysql:${v.version}`] || 'stopped')} - - MySQL {v.version} - Port: {settings.mysqlPorts?.[v.id] || v.port} - - - handleOpenLogs(`mysql:${v.version}`)} title="Hata Logları" size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}> - - - handleResetData(`mysql:${v.version}`)} title="Verileri Sıfırla" size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)', '&:hover': { color: 'error.main' } }}> - - - - handleToggleService(`mysql:${v.version}`)} - disabled={status[`mysql:${v.version}`] === 'starting'} - /> - - - - ))} - - - - - - - - )} - - {activeTab === 'tools' && ( - - - {t('common.tools')} - - - - - - - - phpMyAdmin - - {pmaInstalled ? 'Veritabanı yönetimi için phpMyAdmin hazır.' : 'Veritabanlarını web üzerinden yönetmek için phpMyAdmin kurun.'} - - - - {!pmaInstalled ? ( - - ) : ( - - )} - - - {pmaLoading && ( - - - - İndiriliyor... %{Math.round(pmaProgress)} - - - )} - - - - - - - - - MySQL Dump/Import Sihirbazı - - Seçtiğiniz bir .sql veya arşiv dosyasını hızlıca veritabanına yükleyin. - - - - - - - - - )} - - - {activeTab === 'projects' && ( - - - - Projelerim - - - - - {projects.length === 0 ? ( - - Henüz bir proje eklenmemiş. - - ) : ( - - {projects.map((project) => ( - - - - - - - - - - {project.name} - - - {project.path.length > 40 ? '...' + project.path.slice(-37) : project.path} - - - - - - { - setNewProject(project) - setIsProjectDialogOpen(true) - }} sx={{ color: 'rgba(255,255,255,0.4)', '&:hover': { color: '#39A7FF' } }}> - - - - - handleRemoveProject(project.id)} sx={{ color: 'rgba(255,255,255,0.4)', '&:hover': { color: '#ff4444' } }}> - - - - - - - - - } - label={`PHP ${project.phpVersion}`} - sx={{ bgcolor: 'rgba(71, 74, 255, 0.1)', color: '#777bb4', fontWeight: 600, border: '1px solid rgba(71, 74, 255, 0.2)' }} - /> - {project.mySqlVersion && ( - + + MySQL Sürümleri + Farklı MySQL sürümlerini indirebilir ve sunucunuzda kullanabilirsiniz. + + + {mySqlVersions.length === 0 && !loadingVersions && ( + + )} + {mySqlVersions.map((v) => ( + + + {v.status === 'installed' ? : } + + + {`MySQL ${v.version} (${v.cycle})`} + {v.description && ( + + )} + + } + secondary={v.status === 'downloading' ? `İndiriliyor... %${Math.round(v.progress)}` : v.status === 'installed' ? 'Kurulu' : 'İndirilebilir'} + sx={{ flexGrow: 1 }} + /> + + {v.status === 'installed' && ( + { + const newPorts = { ...(settings.mysqlPorts || {}), [v.id]: e.target.value } + setSettings({ ...settings, mysqlPorts: newPorts }) + }} + variant="outlined" size="small" - icon={} - label={`MySQL ${project.mySqlVersion}`} - sx={{ bgcolor: 'rgba(242, 145, 17, 0.1)', color: '#f29111', fontWeight: 600, border: '1px solid rgba(242, 145, 17, 0.2)' }} + sx={{ width: 80 }} /> )} - - - - - - - {project.host} - + + {v.status === 'available' && ( + + )} + {v.status === 'downloading' && ( + + + + )} + {v.status === 'installed' && ( + + )} - + )} + {v.status === 'downloading' && ( + + + + )} + {v.status === 'installed' && ( + + )} + + + ))} + + + )} + + {settingsTab === 3 && ( + + + Port Ayarları + + setSettings({ ...settings, nginxPort: e.target.value })} + variant="filled" + size="small" + helperText="Varsayılan: 80" + /> + setSettings({ ...settings, phpPort: e.target.value })} + variant="filled" + size="small" + helperText="Varsayılan: 9001" + /> + setSettings({ ...settings, mysqlPort: e.target.value })} + variant="filled" + size="small" + helperText="Varsayılan: 3306" + /> + + + + + + + )} + + )} + + {activeTab === 'dashboard' && ( + <> + + + + setDashboardTab(v)} textColor="primary" indicatorColor="primary"> + + + + + + + + + {/* Nginx Box */} + {(dashboardTab === 0 || dashboardTab === 1) && ( + + + + + {getStatusChip(status.nginx)} + + Nginx + Port: {settings.nginxPort} + + + handleOpenLogs('nginx')} title="Hata Logları" size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}> + + + { + window.api.invoke('services:reload', 'nginx').then((res: any) => { + setNotification({ open: true, message: res.message, severity: res.success ? 'success' : 'error' }) + }) }} + title="Yapılandırmayı Yeniden Yükle" + size="small" + disabled={status.nginx !== 'running'} + sx={{ bgcolor: 'rgba(255,255,255,0.05)', '&:hover': { color: 'primary.main' } }} > - Gözat - - - + + + + handleToggleService('nginx')} + disabled={status.nginx === 'starting'} + /> + + + + )} + + {/* PHP Boxes */} + {(dashboardTab === 0 || dashboardTab === 2) && installedPhpVersions.map(v => ( + + + + + {getStatusChip(status[`php:${v.version}`] || 'stopped')} + + PHP {v.version} + Port: {v.port || '?'} + + handleOpenLogs(`php:${v.version}`)} size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}> + + + handleToggleService(`php:${v.version}`)} + disabled={status[`php:${v.version}`] === 'starting'} + /> + + + + ))} + + {/* MySQL Boxes */} + {(dashboardTab === 0 || dashboardTab === 3) && mySqlVersions.filter(v => v.status === 'installed').map(v => ( + + + + + {getStatusChip(status[`mysql:${v.version}`] || 'stopped')} + + MySQL {v.version} + Port: {settings.mysqlPorts?.[v.id] || v.port} + + + handleOpenLogs(`mysql:${v.version}`)} title="Hata Logları" size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}> + + + handleResetData(`mysql:${v.version}`)} title="Verileri Sıfırla" size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)', '&:hover': { color: 'error.main' } }}> + + + + handleToggleService(`mysql:${v.version}`)} + disabled={status[`mysql:${v.version}`] === 'starting'} + /> + ))} - )} - - )} - - - setNotification({ ...notification, open: false })} - > - - {notification.message} - - - - {/* Log Viewer Dialog */} - setLogDialogOpen(false)} - maxWidth="md" - fullWidth - PaperProps={{ - sx: { - bgcolor: '#1e1e1e', - color: '#d4d4d4', - borderRadius: 2, - boxShadow: '0 8px 32px rgba(0,0,0,0.5)' - } - }} - > - - - - - {selectedService?.toUpperCase()} - {t('diagnostics.logs', 'Servis Logları')} - - - setLogDialogOpen(false)} sx={{ color: '#666' }}> - - - - - - {logs.length === 0 ? ( - - {t('diagnostics.noLogs', 'Henüz log kaydı bulunmuyor.')} - - ) : ( - logs.map((log, i) => { - let color = '#d4d4d4' - if (log.toLowerCase().includes('error') || log.toLowerCase().includes('failed') || log.toLowerCase().includes('emerg') || log.toLowerCase().includes('exit code 1')) { - color = '#f44336' - } else if (log.toLowerCase().includes('warning') || log.toLowerCase().includes('warn')) { - color = '#ff9800' - } else if (log.toLowerCase().includes('starting') || log.toLowerCase().includes('started') || log.toLowerCase().includes('ready') || log.toLowerCase().includes('success')) { - color = '#4caf50' - } - - return ( - - - {log.match(/\[(\d+:\d+:\d+)\]/)?.[1] || ''} - - - {log.replace(/\[\d+:\d+:\d+\]\s*/, '')} - - - ) - }) + + + + + )} -
- - - - - - - -
- { - setIsProjectDialogOpen(false) - setNewProject({ name: '', path: '', phpVersion: '', mySqlVersion: '', host: 'localhost' }) - }} fullWidth maxWidth="sm"> - {newProject.id ? 'Proje Düzenle' : 'Yeni Proje Ekle'} - - - setNewProject({ ...newProject, name: e.target.value })} - /> - - - - - - ), + {activeTab === 'tools' && ( + + + {t('common.tools')} + + + + + + + + phpMyAdmin + + {pmaInstalled ? 'Veritabanı yönetimi için phpMyAdmin hazır.' : 'Veritabanlarını web üzerinden yönetmek için phpMyAdmin kurun.'} + + + + {!pmaInstalled ? ( + + ) : ( + + )} + + + {pmaLoading && ( + + + + İndiriliyor... %{Math.round(pmaProgress)} + + + )} + + + + + + + + + MySQL Dump/Import Sihirbazı + + Seçtiğiniz bir .sql veya arşiv dosyasını hızlıca veritabanına yükleyin. + + + + + + + + + )} + + + {activeTab === 'projects' && ( + + + + Projelerim + + + + + {projects.length === 0 ? ( + + Henüz bir proje eklenmemiş. + + ) : ( + + {projects.map((project) => ( + + + + + + + + + + {project.name} + + + {project.path.length > 40 ? '...' + project.path.slice(-37) : project.path} + + + + + + { + setNewProject(project) + setIsProjectDialogOpen(true) + }} sx={{ color: 'rgba(255,255,255,0.4)', '&:hover': { color: '#39A7FF' } }}> + + + + + handleRemoveProject(project.id)} sx={{ color: 'rgba(255,255,255,0.4)', '&:hover': { color: '#ff4444' } }}> + + + + + + + + + } + label={`PHP ${project.phpVersion}`} + sx={{ bgcolor: 'rgba(71, 74, 255, 0.1)', color: '#777bb4', fontWeight: 600, border: '1px solid rgba(71, 74, 255, 0.2)' }} + /> + {project.mySqlVersion && ( + } + label={`MySQL ${project.mySqlVersion}`} + sx={{ bgcolor: 'rgba(242, 145, 17, 0.1)', color: '#f29111', fontWeight: 600, border: '1px solid rgba(242, 145, 17, 0.2)' }} + /> + )} + + + + + + + {project.host} + + + + + + + + ))} + + )} + + )} + + + + setNotification({ ...notification, open: false })} + > + + {notification.message} + + + + {/* Log Viewer Dialog */} + setLogDialogOpen(false)} + maxWidth="md" + fullWidth + PaperProps={{ + sx: { + bgcolor: '#1e1e1e', + color: '#d4d4d4', + borderRadius: 2, + boxShadow: '0 8px 32px rgba(0,0,0,0.5)' + } + }} + > + + + + + {selectedService?.toUpperCase()} - {t('diagnostics.logs', 'Servis Logları')} + + + setLogDialogOpen(false)} sx={{ color: '#666' }}> + + + + + setNewProject({ ...newProject, path: e.target.value })} - /> - setNewProject({ ...newProject, host: e.target.value })} - /> - - - PHP Sürümü - - - v.status === 'installed').length === 0}> - MySQL Sürümü - - - - - - - - - - + > + {logs.length === 0 ? ( + + {t('diagnostics.noLogs', 'Henüz log kaydı bulunmuyor.')} + + ) : ( + logs.map((log, i) => { + let color = '#d4d4d4' + if (log.toLowerCase().includes('error') || log.toLowerCase().includes('failed') || log.toLowerCase().includes('emerg') || log.toLowerCase().includes('exit code 1')) { + color = '#f44336' + } else if (log.toLowerCase().includes('warning') || log.toLowerCase().includes('warn')) { + color = '#ff9800' + } else if (log.toLowerCase().includes('starting') || log.toLowerCase().includes('started') || log.toLowerCase().includes('ready') || log.toLowerCase().includes('success')) { + color = '#4caf50' + } - setIsMySqlWizardOpen(false)} - mySqlVersions={mySqlVersions} - /> - + return ( + + + {log.match(/\[(\d+:\d+:\d+)\]/)?.[1] || ''} + + + {log.replace(/\[\d+:\d+:\d+\]\s*/, '')} + + + ) + }) + )} +
+ + + + + + + +
+ + { + setIsProjectDialogOpen(false) + setNewProject({ name: '', path: '', phpVersion: '', mySqlVersion: '', host: 'localhost' }) + }} fullWidth maxWidth="sm"> + {newProject.id ? 'Proje Düzenle' : 'Yeni Proje Ekle'} + + + setNewProject({ ...newProject, name: e.target.value })} + /> + + + + + + ), + }} + onChange={(e) => setNewProject({ ...newProject, path: e.target.value })} + /> + setNewProject({ ...newProject, host: e.target.value })} + /> + + + PHP Sürümü + + + v.status === 'installed').length === 0}> + MySQL Sürümü + + + + + + + + + + + + setIsMySqlWizardOpen(false)} + mySqlVersions={mySqlVersions} + /> + + ) } export default App -