truncgit/multiphp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement main application dashboard with service management and project configuration UI

Browse Source
This commit is contained in:
Ümit Tunç
2026-03-28 21:50:53 +03:00
parent 2a66537f86
commit 026090e99b
4 changed files with 47 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/App.tsx
+41 -29
View File
@@ -99,6 +99,7 @@ function App(): JSX.Element {
}) })
const [activeTab, setActiveTab] = useState('dashboard') const [activeTab, setActiveTab] = useState('dashboard')
const [settingsTab, setSettingsTab] = useState(0) const [settingsTab, setSettingsTab] = useState(0)
const [dashboardTab, setDashboardTab] = useState(0)
const [projects, setProjects] = useState<any[]>([]) const [projects, setProjects] = useState<any[]>([])
const [phpVersions, setPhpVersions] = useState<any[]>([]) const [phpVersions, setPhpVersions] = useState<any[]>([])
const [mySqlVersions, setMySqlVersions] = useState<any[]>([]) const [mySqlVersions, setMySqlVersions] = useState<any[]>([])
@@ -738,38 +739,49 @@ function App(): JSX.Element {
Hızlı Bakış Hızlı Bakış
</Typography> </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 }}> <Grid container spacing={3} sx={{ mb: 4 }}>
{/* Nginx Box */} {/* Nginx Box */}
<Grid item xs={12} sm={6} md={4}> {(dashboardTab === 0 || dashboardTab === 1) && (
<Paper elevation={4} sx={{ <Grid item xs={12} sm={6} md={4}>
p: 3, borderRadius: 3, <Paper elevation={4} sx={{
bgcolor: 'rgba(255, 255, 255, 0.03)', p: 3, borderRadius: 3,
backdropFilter: 'blur(10px)', bgcolor: 'rgba(255, 255, 255, 0.03)',
border: '1px solid rgba(255, 255, 255, 0.05)', backdropFilter: 'blur(10px)',
transition: 'transform 0.2s', border: '1px solid rgba(255, 255, 255, 0.05)',
'&:hover': { transform: 'scale(1.02)' } transition: 'transform 0.2s',
}}> '&:hover': { transform: 'scale(1.02)' }
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}> }}>
<WebIcon color="primary" sx={{ fontSize: 40 }} /> <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
{getStatusChip(status.nginx)} <WebIcon color="primary" sx={{ fontSize: 40 }} />
</Box> {getStatusChip(status.nginx)}
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>Nginx</Typography> </Box>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Port: {settings.nginxPort}</Typography> <Typography variant="h6" sx={{ fontWeight: 'bold' }}>Nginx</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Port: {settings.nginxPort}</Typography>
<IconButton onClick={() => handleOpenLogs('nginx')} size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}> <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<TerminalIcon fontSize="small" /> <IconButton onClick={() => handleOpenLogs('nginx')} size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}>
</IconButton> <TerminalIcon fontSize="small" />
<Switch </IconButton>
checked={status.nginx === 'running' || status.nginx === 'starting'} <Switch
onChange={() => handleToggleService('nginx')} checked={status.nginx === 'running' || status.nginx === 'starting'}
disabled={status.nginx === 'starting'} onChange={() => handleToggleService('nginx')}
/> disabled={status.nginx === 'starting'}
</Box> />
</Paper> </Box>
</Grid> </Paper>
</Grid>
)}
{/* PHP Boxes */} {/* PHP Boxes */}
{installedPhpVersions.map(v => ( {(dashboardTab === 0 || dashboardTab === 2) && installedPhpVersions.map(v => (
<Grid item xs={12} sm={6} md={4} key={v.id}> <Grid item xs={12} sm={6} md={4} key={v.id}>
<Paper elevation={4} sx={{ <Paper elevation={4} sx={{
p: 3, borderRadius: 3, p: 3, borderRadius: 3,
@@ -800,7 +812,7 @@ function App(): JSX.Element {
))} ))}
{/* MySQL Boxes */} {/* 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}> <Grid item xs={12} sm={6} md={4} key={v.id}>
<Paper elevation={4} sx={{ <Paper elevation={4} sx={{
p: 3, borderRadius: 3, p: 3, borderRadius: 3,
src/renderer/src/locales/de.json
+2 -1
View File
@@ -8,7 +8,8 @@
"close": "Schließen", "close": "Schließen",
"quit": "Beenden", "quit": "Beenden",
"save": "Speichern", "save": "Speichern",
"port": "Port" "port": "Port",
"all": "Alle"
}, },
"dashboard": { "dashboard": {
"title": "Trunçgil Multi-PHP Server", "title": "Trunçgil Multi-PHP Server",
src/renderer/src/locales/en.json
+2 -1
View File
@@ -8,7 +8,8 @@
"close": "Close", "close": "Close",
"quit": "Quit", "quit": "Quit",
"save": "Save", "save": "Save",
"port": "Port" "port": "Port",
"all": "All"
}, },
"dashboard": { "dashboard": {
"title": "Trunçgil Multi-PHP Server", "title": "Trunçgil Multi-PHP Server",
src/renderer/src/locales/tr.json
+2 -1
View File
@@ -8,7 +8,8 @@
"close": "Kapat", "close": "Kapat",
"quit": "Çıkış", "quit": "Çıkış",
"save": "Kaydet", "save": "Kaydet",
"port": "Port" "port": "Port",
"all": "Tümü"
}, },
"dashboard": { "dashboard": {
"title": "Trunçgil Multi-PHP Server", "title": "Trunçgil Multi-PHP Server",