feat: add Nginx configuration editor component and integrate it into the main application interface
This commit is contained in:
Ümit Tunç
@@ -64,7 +64,6 @@ import {
|
||||
OpenInNew as OpenIcon,
|
||||
Edit as EditIcon,
|
||||
Folder as FolderIcon,
|
||||
Storage as MySQLIcon,
|
||||
Language as HostIcon,
|
||||
Launch as LaunchIcon,
|
||||
Handyman as ToolsIcon,
|
||||
@@ -73,6 +72,7 @@ import {
|
||||
import Swal from 'sweetalert2'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import MySqlImportWizard from './components/MySqlImportWizard'
|
||||
import NginxCodeEditor from './components/NginxCodeEditor'
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
@@ -108,7 +108,6 @@ function App(): JSX.Element {
|
||||
const [phpVersions, setPhpVersions] = useState<any[]>([])
|
||||
const [mySqlVersions, setMySqlVersions] = useState<any[]>([])
|
||||
const [nginxVersions, setNginxVersions] = useState<any[]>([])
|
||||
const [loadingVersions, setLoadingVersions] = useState(false)
|
||||
const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false)
|
||||
const slugify = (text: string) => text.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
|
||||
const [newProject, setNewProject] = useState<any>({ name: '', path: '', phpVersion: '', mySqlVersion: '', host: 'localhost' })
|
||||
@@ -187,14 +186,6 @@ function App(): JSX.Element {
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefreshVersions = async () => {
|
||||
setLoadingVersions(true)
|
||||
try {
|
||||
await Promise.all([fetchPhpVersions(), fetchMySqlVersions(), fetchNginxVersions()])
|
||||
} finally {
|
||||
setLoadingVersions(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isProjectDialogOpen && !newProject.id) {
|
||||
@@ -671,7 +662,7 @@ function App(): JSX.Element {
|
||||
<Typography variant="body2" color="text.secondary">Gereken PHP sürümlerini buradan indirebilir ve yönetebilirsiniz.</Typography>
|
||||
</Box>
|
||||
<List sx={{ maxHeight: 500, overflow: 'auto' }}>
|
||||
{phpVersions.length === 0 && !loadingVersions && (
|
||||
{phpVersions.length === 0 && (
|
||||
<ListItem><ListItemText primary="Yükleniyor veya liste boş..." /></ListItem>
|
||||
)}
|
||||
{phpVersions.map((v) => (
|
||||
@@ -712,7 +703,7 @@ function App(): JSX.Element {
|
||||
<Typography variant="body2" color="text.secondary">Farklı MySQL sürümlerini indirebilir ve sunucunuzda kullanabilirsiniz.</Typography>
|
||||
</Box>
|
||||
<List sx={{ maxHeight: 500, overflow: 'auto' }}>
|
||||
{mySqlVersions.length === 0 && !loadingVersions && (
|
||||
{mySqlVersions.length === 0 && (
|
||||
<ListItem><ListItemText primary="Yükleniyor veya liste boş..." /></ListItem>
|
||||
)}
|
||||
{mySqlVersions.map((v) => (
|
||||
@@ -1417,22 +1408,9 @@ function App(): JSX.Element {
|
||||
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.4)', mb: 2, display: 'block' }}>
|
||||
Dikkat: Hatalı yapılandırma Nginx'in çalışmasını durdurabilir. Değişiklik yapmadan önce test edin.
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
multiline
|
||||
rows={20}
|
||||
<NginxCodeEditor
|
||||
value={nginxConfig}
|
||||
onChange={(e) => setNginxConfig(e.target.value)}
|
||||
sx={{
|
||||
'& .MuiInputBase-root': {
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.875rem',
|
||||
color: '#fff'
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255,255,255,0.1)'
|
||||
}
|
||||
}}
|
||||
onChange={(val) => setNginxConfig(val)}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ p: 2, gap: 1 }}>
|
||||
@@ -1481,22 +1459,9 @@ function App(): JSX.Element {
|
||||
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.4)', mb: 2, display: 'block' }}>
|
||||
İpucu: Bu yapılandırma sadece {selectedProjectHost} projesi için geçerlidir.
|
||||
</Typography>
|
||||
<TextField
|
||||
fullWidth
|
||||
multiline
|
||||
rows={20}
|
||||
<NginxCodeEditor
|
||||
value={projectNginxConfig}
|
||||
onChange={(e) => setProjectNginxConfig(e.target.value)}
|
||||
sx={{
|
||||
'& .MuiInputBase-root': {
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.875rem',
|
||||
color: '#fff'
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: 'rgba(255,255,255,0.1)'
|
||||
}
|
||||
}}
|
||||
onChange={(val) => setProjectNginxConfig(val)}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ p: 2, gap: 1 }}>
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from 'react'
|
||||
import Editor from 'react-simple-code-editor'
|
||||
import Prism from 'prismjs'
|
||||
import 'prismjs/components/prism-nginx'
|
||||
import 'prismjs/themes/prism-tomorrow.css'
|
||||
|
||||
interface NginxCodeEditorProps {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
}
|
||||
|
||||
const NginxCodeEditor: React.FC<NginxCodeEditorProps> = ({ value, onChange }) => {
|
||||
return (
|
||||
<div style={{
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
backgroundColor: '#1e1e1e',
|
||||
fontFamily: '"Fira code", "Fira Mono", monospace',
|
||||
fontSize: '14px',
|
||||
minHeight: '300px'
|
||||
}}>
|
||||
<Editor
|
||||
value={value}
|
||||
onValueChange={code => onChange(code)}
|
||||
highlight={code => Prism.highlight(code, Prism.languages.nginx, 'nginx')}
|
||||
padding={15}
|
||||
style={{
|
||||
fontFamily: '"Fira code", "Fira Mono", monospace',
|
||||
fontSize: 14,
|
||||
minHeight: '400px',
|
||||
outline: 'none'
|
||||
}}
|
||||
textareaClassName="nginx-editor-textarea"
|
||||
preClassName="nginx-editor-pre"
|
||||
/>
|
||||
<style>{`
|
||||
.nginx-editor-textarea {
|
||||
outline: none !important;
|
||||
}
|
||||
.nginx-editor-pre {
|
||||
pointer-events: none;
|
||||
}
|
||||
.token.comment { color: #6a9955; }
|
||||
.token.directive { color: #569cd6; font-weight: bold; }
|
||||
.token.variable { color: #9cdcfe; }
|
||||
.token.string { color: #ce9178; }
|
||||
.token.number { color: #b5cea8; }
|
||||
.token.boolean { color: #569cd6; }
|
||||
.token.operator { color: #d4d4d4; }
|
||||
.token.punctuation { color: #d4d4d4; }
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NginxCodeEditor
|
||||
Reference in New Issue
Block a user