Files
bpe/src/main/jte/edit.jte

147 lines
5.0 KiB
Plaintext

@import java.util.List
@import org.springframework.security.web.server.csrf.CsrfToken
@import com.github.russp.bpe.http.FileDto
@param String selectedFile
@param String selectedFileName
@param List<FileDto> breadcrumbs
@param CsrfToken _csrf
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Browser">
<meta name="_csrf" content="${_csrf.getToken()}"/>
<meta name="_csrf_header" content="${_csrf.getHeaderName()}"/>
<title>Edit ${selectedFileName}</title>
<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
<!-- Pico.css -->
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<!-- Custom template-->
<link rel="stylesheet" href="/stylesheet.css">
</head>
<body>
<header class="container">
<h5>Edit ${selectedFileName}</h5>
<nav>
<ul class="breadcrumbs">
<li><a href="/"><i class="fa fa-home"></i></a></li>
@for(FileDto breadcrumb : breadcrumbs)
<li><a href="/?path=${breadcrumb.getFullName()}">${breadcrumb.getName()}</a></li>
@endfor
<li>${selectedFileName}</li>
</ul>
<ul>
<li><a href="javascript:save()" role="button">Save</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<main class="container">
<section id="editor">
<figure>
<div id="editor"></div>
</figure>
</section>
</main><!-- ./ Main -->
<!-- Footer -->
<footer class="container">
<small>Built with <a href="https://picocss.com">Pico</a> • <a
href="https://github.com/picocss/examples/blob/master/basic-template/">Source code</a></small>
</footer><!-- ./ Footer -->
<!-- Minimal theme switcher -->
<script src="../js/minimal-theme-switcher.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.12.5/ace.js"
integrity="sha512-gLQA+KKlMRzGRNhdvGX+3F5UHojWkIIKvG2lNQk0ZM5QUbdG17/hDobp06zXMthrJrd4U1+boOEACntTGlPjJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.12.5/ext-modelist.min.js"
integrity="sha512-gluOZJrbb4P8hFk1M2HREivZlXwZd0Uf1i5LLt6NRHjjnu7+4eE/yaYH/m82kMTU557+Q2xJhMmqtzMBBh8o/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js"
integrity="sha512-1Gn7//DzfuF67BGkg97Oc6jPN6hqxuZXnaTpC9P5uw8C6W4yUNj5hoS/APga4g1nO2X6USBb/rXtGzADdaVDeA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script>
var modelist = require("ace/ext/modelist");
var mode = modelist.getModeForPath("${selectedFileName}");
var editor = ace.edit("editor",
{
mode: mode.mode,
selectionStyle: "text",
theme: "ace/theme/dracula"
});
document.getElementById('editor').style.fontSize = '1.2em';
fetch('/content?path=${selectedFile}')
.then(function (response) {
return response.text()
})
.then(function (body) {
editor.setValue(body);
editor.clearSelection();
editor.gotoLine(1);
});
function save() {
var blob = new Blob([editor.getValue()]);
var formData = new FormData();
formData.set("file", blob);
fetch('/content?path=${selectedFile}', {
method: 'POST',
credentials: 'include',
headers: {
"${_csrf.getHeaderName()}": "${_csrf.getToken()}"
},
body: formData,
})
.then(function(ok) {
Toastify({
text: "Saved",
duration: 3000,
close: true,
gravity: "top",
position: "right",
stopOnFocus: true,
style: {
background: "green",
},
onClick: function(){} // Callback after click
}).showToast();
}).catch(function(ex) {
Toastify({
text: "Error",
duration: 3000,
close: true,
gravity: "top",
position: "right",
stopOnFocus: true,
style: {
background: "red",
},
onClick: function(){} // Callback after click
}).showToast();
})
}
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
</body>
</html>