edit profile

This commit is contained in:
Afonso Baldo 2022-10-07 23:43:31 +01:00
parent 1be9341272
commit 13e3664f47
7 changed files with 838 additions and 1 deletions

View File

@ -11,6 +11,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"/>
<META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/> <META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
</HEAD> </HEAD>
<BODY> <BODY>
@ -47,7 +48,7 @@
<UL id="staffList"> <UL id="staffList">
</UL> <li><a href="members/Afonso">Afonso</a></li></UL>
</SECTION> </SECTION>
</MAIN> </MAIN>

View File

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Staff Details: Afonso | B-10 - Porto Space Team</title>
<meta name="author" content="Afonso">
<link rel="stylesheet" href="https://diogo.site/assets/css/main.css" type="text/css">
<link rel="shortcut icon" href="about:blank">
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="/js/pageEditor.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<header>
<div id="header-content">
<h1>B-10 - Porto Space Team</h1>
<h2>Staff Details: Afonso</h2>
<nav>
<ul>
<li><a href="/B-10/">Back</a></li>
<li><a href="#">Profile</a></li>
<li><a href="https://codeberg.org/portospaceteam/B-10/src/branch/master/members/Afonso/reports">Reports</a>
</li>
</ul>
</nav>
</div>
</header>
<hr>
<style>
#edit_button{
float: right;
cursor: pointer;
}
#save_page{
margin-top: 2em;
padding: 0.25em;
}
</style>
<main>
<span onclick="editPage()" id="edit_button" class="material-symbols-outlined">
edit
</span>
<section id="mytextarea"><h3>Past Responsibilities</h3>
<p>TODO</p>
<h3>Current Responsibilities</h3>
<p>TODO</p>
<h3>Relevant Education background</h3>
<p>TODO</p>
<h3>About</h3>
<p>TODO</p></section>
<input id="save_page" style="display: none;" type="button" value="Save File" onclick="savePage('Afonso', 'B-10')">
</main>
<hr>
<footer>
<p><small>Unless stated otherwise, you can assume <a href="https://creativecommons.org/licenses/by-sa/4.0/">Attribution-ShareAlike 4.0 International (CC BY-SA
4.0)</a>.</small></p>
</footer>
</body>
</html>

51
action/save_page.php Normal file
View File

@ -0,0 +1,51 @@
<?php
try{
if(!isset($_POST['page']) or !isset($_POST['department']) or !isset($_POST['member'])){
header("HTTP/1.1 400 Bad Request 1 ");
die;
}
// check if department is valid
$departmemt = strtoupper($_POST['department']);
$invalid_department = empty($departmemt) || !preg_match('/^[A-Z]-[0-9]*$/', $departmemt);
// check if name is valid
$name = htmlentities($_POST['member']);
$invalid_name = empty( $name) || !preg_match('/^[\w\-()]*$/', $name);
if($invalid_department || $invalid_name){
header("HTTP/1.1 400 Bad Request 2");
die;
}
// check if file exits
$path = __DIR__ . '/../' . $departmemt . '/members/'. $name . '/index.html';
if(!file_exists($path)){
header("HTTP/1.1 400 Bad Request 3");
echo($path);
die;
}
$dom = new DOMDocument();
@$dom->loadHTMLFile($path);
$newNode = $dom->createDocumentFragment();
$newNode->appendXML('<section id = "mytextarea">'.$_POST['page'].'</section>');
$oldNode = $dom->getElementById('mytextarea');
$oldNode->parentNode->replaceChild($newNode, $oldNode);
$dom->saveHTMLFile(__DIR__ . '/../' . $departmemt . '/members/'. $name . '/index.html');
}catch(Exception $e){
header("HTTP/1.1 500 Internal Server Error");
die;
}
header("HTTP/1.1 200 OK");
?>

51
js/pageEditor.js Normal file
View File

@ -0,0 +1,51 @@
function editPage(){
let edit_button = document.querySelector("#edit_button");
let save_button = document.querySelector("#save_page");
if(tinymce.editors.length > 0){
tinymce.remove();
if(edit_button)
edit_button.textContent = "edit";
if(save_button)
save_button.style.display = "none";
}else{
tinymce.init({selector: "#mytextarea",
content_css: ["/main.css"],
content_style: "body#tinymce{margin: 0px;} .tox-notifications-container {display: none;}"});
if(edit_button)
edit_button.textContent = "visibility";
if(save_button)
save_button.style.display = "block";
}
}
function savePage(member, department){
if(tinymce.editors.length <= 0)
return;
var htmlPage = tinymce.get(0).getContent();
let formData = new FormData();
formData.append('page', htmlPage);
formData.append('member', member);
formData.append('department', department);
fetch("/action/save_page.php", {
method: 'POST',
body: formData
}).then(async (response) => {
console.log(await (await response.blob()).text())
if (response.status === 200) {
console.log("Post successfully created!")
}else{
console.log("Post NOT successfully created!")
}
}).catch((error) => {
console.log(error)
})
}

645
main.css Normal file
View File

@ -0,0 +1,645 @@
@import "../fonts/PT-Sans/stylesheet.css";
BODY,DIV,DL,DT,DD,H1,H2,H3,H4,H5,H6,PRE,FORM,FIELDSET,INPUT,TEXTAREA,P,BLOCKQUOTE,TH,TD {
padding: 0;
margin: 0;
}
BODY {
background: #FFFFFC;
color: #242F40;
margin-left: 11vw;
margin-right: 22vw;
margin-top: 1vh;
font-family: 'PT Sans', sans-serif;
font-weight: 400;
line-height: 1.75;
font-size: max(16px, 1em); /*1.25em;*/
text-rendering: geometricPrecision;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: #FFF 0px 1px 1px;
word-wrap: break-word;
}
P {
margin-bottom: 1rem;
}
A {
color: #394A6A;
cursor: pointer;
text-decoration: 1px #394A6A underline;
}
ASIDE {
background: #F2F4F8;
border-left: 2px solid #AFBCD4;
float: right;
font-style: italic;
height: max-content;
width: 33%;
margin: .8rem;
padding: .8rem 1.25rem;
}
CAPTION {
text-align: left;
}
DD {
margin: 0 0 0 160px;
}
DT {
clear: left;
float: left;
font-weight: 700;
text-align: right;
}
DT::after {
content: ": ";
}
EM,
CITE,
cite {
font-style: italic;
}
FIELDSET,
IMG {
border: 0;
max-height: 32em;
max-width: 100%;
}
H1,
H2,
H3,
H4,
H5,
H6 {
margin: 1.25rem 0 .8rem;
font-family: 'PT Sans', sans-serif;
font-weight: 400;
line-height: 1.3;
}
H0 {
font-size: 4.209rem;
}
H1 {
font-size: 3.157rem;
margin-top: 0;
}
H2 {
font-size: 2.369rem;
}
H3 {
font-size: 1.777rem;
}
H4 {
font-size: 1.333rem;
font-weight: 700;
}
H5 {
font-size: 1.25rem;
font-weight: 700;
}
H6 {
font-size: 1em;
font-weight: 700;
}
HEADER {
display: grid;
margin-bottom: 1.618rem;
}
HEADER H1,
pre.sourceCode {
margin: 0;
}
HEADER NAV UL,
MAIN {
display: block;
}
HEADER NAV UL>LI {
display: inline;
margin-right: .8rem;
}
Q:BEFORE,
Q:AFTER {
content: '';
}
SMALL {
font-size: .75rem;
}
TABLE {
border-collapse: collapse;
border-spacing: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
}
TABLE TD,
TABLE TH {
border: 1px solid #DDD;
line-height: 1.2;
min-width: 10px;
padding: 6px 8px;
}
TABLE THEAD {
background: #f8f8f8;
font-weight: 700;
}
TH {
text-align: center;
}
TR:nth-child(even) {
background: #f5f5f5;
}
#header-content {
margin: auto;
}
.img-thumbnail {
padding: 0.25rem;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 0.25rem;
width: 100%;
height: auto;
display: block;
}
.avatar {
padding: 0.25rem;
height: max-content;
width: 15em;
margin: auto;
}
.article-icon {
height: max-content;
margin: 0.8rem;
padding: 0.8rem 1.25rem;
flex: 10%;
max-width: 10%;
align-self: center;
}
.article-header {
display: flex;
flex-flow: row-reverse wrap;
justify-content: space-around;
padding: 0;
margin: 0;
}
.article-header>h3{
flex: 25%;
padding: 0 4px;
align-self: center;
}
abbr,
acronym {
border: 0;
}
blockquote {
background: #f9f9f9;
border-left: 4px solid #888;
margin-left: 0;
padding: 0 1em;
}
code span.al,
code span.er {
color: red;
font-weight: 700;
}
code span.an,
code span.cv,
code span.in,
code span.wa {
color: #60a0b0;
font-style: italic;
font-weight: 700;
}
code span.at {
color: #7d9029;
}
code span.bn,
code span.dv,
code span.fl {
color: #40a070;
}
code span.cf,
code span.kw {
color: #007020;
font-weight: 700;
}
code span.ch,
code span.sc,
code span.st,
code span.vs {
color: #4070a0;
}
code span.cn {
color: #800;
}
code span.co {
color: #60a0b0;
font-style: italic;
}
code span.do {
color: #ba2121;
font-style: italic;
}
code span.dt {
color: #902000;
}
code span.fu {
color: #06287e;
}
code span.op {
color: #666;
}
code span.ot {
color: #007020;
}
code span.pp {
color: #bc7a00;
}
code span.ss {
color: #b68;
}
code span.va {
color: #19177c;
}
code,
pre {
border: 1px solid;
white-space: pre-wrap;
}
code.sourceCode>span {
color: inherit;
text-decoration: inherit;
}
div.column {
display: inline-block;
vertical-align: top;
width: 50%;
}
div.hanging-indent {
margin-left: 1.5em;
text-indent: -1.5em;
}
div.sourceCode {
margin: 1em 0;
}
pre {
background: #f6f8fa;
line-height: 1.642;
overflow: auto;
padding: .5em;
}
pre>code.sourceCode {
position: relative;
white-space: pre;
}
pre>code.sourceCode>span {
display: inline-block;
line-height: 1.25;
}
pre>code.sourceCode>span:empty {
height: 1.2em;
}
pre code {
border: none;
}
pre.numberSource {
border-left: 1px solid #aaa;
margin-left: 3em;
padding-left: 4px;
}
pre.numberSource code {
counter-reset: source-line 0;
}
pre.numberSource code>span {
counter-increment: source-line;
left: -4em;
position: relative;
}
pre.numberSource code>span>a:first-child::before {
border: none;
color: #aaa;
content: counter(source-line);
display: inline-block;
left: -1em;
position: relative;
text-align: right;
vertical-align: baseline;
width: 4em;
padding: 0 4px;
}
q {
display: block;
font-style: italic;
font-weight: 600;
}
span.smallcaps {
font-variant: small-caps;
}
span.underline {
text-decoration: underline;
}
ul.task-list {
list-style: none;
}
@media screen {
div.sourceCode {
overflow: auto;
}
pre>code.sourceCode>span>a:first-child::before {
text-decoration: underline;
}
}
@page {
margin: 2cm;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
font: 12pt "Helvetica", serif;
}
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}
h1 {
font-size: 24pt;
}
h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}
a {
page-break-inside:avoid;
}
blockquote {
page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid;
font-weight: 700;
}
img {
page-break-inside:avoid;
page-break-after:avoid;
}
table, pre { page-break-inside:avoid; }
ul, ol, dl { page-break-before:avoid; }
a:link, a:visited, a {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
pre>code.sourceCode {
white-space: pre-wrap;
}
pre>code.sourceCode>span {
padding-left: 5em;
text-indent: -5em;
}
.article-icon {
min-width: initial !important;
max-width: 100px !important;
max-height: 100px !important;
}
}
@media (max-width: 700px) {
.article-icon {
min-width: 100%;
}
}
@media (max-width: 480px) {
blockquote,
body,
caption,
dd,
dl,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
ol,
p,
pre,
ul,
table,
td,
th {
margin: 0;
padding: 0;
}
blockquote,
caption,
code,
dd,
dl,
fieldset,
figure,
form,
hr,
legend,
ol,
p,
pre,
q,
table,
td,
th,
ul {
margin-bottom: 1.143rem;
}
body {
line-height: 1.714;
min-height: 100vh;
margin-left: 1.5vw;
margin-right: 2.5vw;
overflow-x: hidden;
position: relative;
}
embed+[class*='caption'],
figcaption,
img+[class*='caption'],
object+[class*='caption'],
video+[class*='caption'] {
display: table;
font-size: .857rem;
line-height: 1.667;
margin-bottom: 1rem;
}
embed,
img,
object,
video {
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.417;
margin: 1em 0;
}
hr {
height: 1px 0 0 0;
width: 75%;
border-style: solid;
}
html {
font-size: 14px;
overflow-x: hidden;
}
img {
display: block;
height: auto;
margin: .6rem auto .4rem;
}
ol,
ul {
margin-left: 1.296rem;
}
sub {
bottom: -.25em;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
table {
border-collapse: collapse;
border-spacing: 0;
display: block;
}
td,
th {
padding: .5rem;
}
}
.logbook-note {
background-color: #392F5A;
color: #EAEBEB;
text-align: center;
font-weight: bolder;
text-shadow: none;
}
.logbook-note>a {
color: #FFBA08;
}

17
style.css Normal file
View File

@ -0,0 +1,17 @@
#AddMember span{
vertical-align: middle;
}
section h2{
display: inline-block;
}
#AddMember{
display: inline;
vertical-align: super;
cursor: pointer;
text-decoration: none;
color: black;
}