feat: implement main application dashboard with service management and project configuration UI
This commit is contained in:
+41
-29
@@ -99,6 +99,7 @@ function App(): JSX.Element {
|
||||
})
|
||||
const [activeTab, setActiveTab] = useState('dashboard')
|
||||
const [settingsTab, setSettingsTab] = useState(0)
|
||||
const [dashboardTab, setDashboardTab] = useState(0)
|
||||
const [projects, setProjects] = useState<any[]>([])
|
||||
const [phpVersions, setPhpVersions] = useState<any[]>([])
|
||||
const [mySqlVersions, setMySqlVersions] = useState<any[]>([])
|
||||
@@ -738,38 +739,49 @@ function App(): JSX.Element {
|
||||
Hızlı Bakış
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
|
||||
<Tabs value={dashboardTab} onChange={(_e, v) => setDashboardTab(v)} textColor="primary" indicatorColor="primary">
|
||||
<Tab label={t('common.all')} />
|
||||
<Tab label="Nginx" />
|
||||
<Tab label="PHP" />
|
||||
<Tab label="MySQL" />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={3} sx={{ mb: 4 }}>
|
||||
{/* Nginx Box */}
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<Paper elevation={4} sx={{
|
||||
p: 3, borderRadius: 3,
|
||||
bgcolor: 'rgba(255, 255, 255, 0.03)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.05)',
|
||||
transition: 'transform 0.2s',
|
||||
'&:hover': { transform: 'scale(1.02)' }
|
||||
}}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
||||
<WebIcon color="primary" sx={{ fontSize: 40 }} />
|
||||
{getStatusChip(status.nginx)}
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>Nginx</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Port: {settings.nginxPort}</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<IconButton onClick={() => handleOpenLogs('nginx')} size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}>
|
||||
<TerminalIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<Switch
|
||||
checked={status.nginx === 'running' || status.nginx === 'starting'}
|
||||
onChange={() => handleToggleService('nginx')}
|
||||
disabled={status.nginx === 'starting'}
|
||||
/>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
{(dashboardTab === 0 || dashboardTab === 1) && (
|
||||
<Grid item xs={12} sm={6} md={4}>
|
||||
<Paper elevation={4} sx={{
|
||||
p: 3, borderRadius: 3,
|
||||
bgcolor: 'rgba(255, 255, 255, 0.03)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.05)',
|
||||
transition: 'transform 0.2s',
|
||||
'&:hover': { transform: 'scale(1.02)' }
|
||||
}}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
|
||||
<WebIcon color="primary" sx={{ fontSize: 40 }} />
|
||||
{getStatusChip(status.nginx)}
|
||||
</Box>
|
||||
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>Nginx</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Port: {settings.nginxPort}</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<IconButton onClick={() => handleOpenLogs('nginx')} size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}>
|
||||
<TerminalIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<Switch
|
||||
checked={status.nginx === 'running' || status.nginx === 'starting'}
|
||||
onChange={() => handleToggleService('nginx')}
|
||||
disabled={status.nginx === 'starting'}
|
||||
/>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* PHP Boxes */}
|
||||
{installedPhpVersions.map(v => (
|
||||
{(dashboardTab === 0 || dashboardTab === 2) && installedPhpVersions.map(v => (
|
||||
<Grid item xs={12} sm={6} md={4} key={v.id}>
|
||||
<Paper elevation={4} sx={{
|
||||
p: 3, borderRadius: 3,
|
||||
@@ -800,7 +812,7 @@ function App(): JSX.Element {
|
||||
))}
|
||||
|
||||
{/* MySQL Boxes */}
|
||||
{mySqlVersions.filter(v => v.status === 'installed').map(v => (
|
||||
{(dashboardTab === 0 || dashboardTab === 3) && mySqlVersions.filter(v => v.status === 'installed').map(v => (
|
||||
<Grid item xs={12} sm={6} md={4} key={v.id}>
|
||||
<Paper elevation={4} sx={{
|
||||
p: 3, borderRadius: 3,
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
"close": "Schließen",
|
||||
"quit": "Beenden",
|
||||
"save": "Speichern",
|
||||
"port": "Port"
|
||||
"port": "Port",
|
||||
"all": "Alle"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Trunçgil Multi-PHP Server",
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
"close": "Close",
|
||||
"quit": "Quit",
|
||||
"save": "Save",
|
||||
"port": "Port"
|
||||
"port": "Port",
|
||||
"all": "All"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Trunçgil Multi-PHP Server",
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
"close": "Kapat",
|
||||
"quit": "Çıkış",
|
||||
"save": "Kaydet",
|
||||
"port": "Port"
|
||||
"port": "Port",
|
||||
"all": "Tümü"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Trunçgil Multi-PHP Server",
|
||||
|
||||
Reference in New Issue
Block a user