mirror of
https://github.com/tjsga/website-2018.git
synced 2025-04-04 03:40:16 -04:00
Editing Site is now a possibility
This commit is contained in:
AnubisSQLi
parent
a4d7908cdb
commit
8237dc668d
26
server.js
26
server.js
|
|
@ -1,8 +1,11 @@
|
|||
const EDITINGPASSWORD = '#420dglazeit'
|
||||
|
||||
// MODULES
|
||||
var express = require('express')
|
||||
var path = require('path')
|
||||
var hbs = require('hbs')
|
||||
var fs = require('fs')
|
||||
var bodyParser = require("body-parser")
|
||||
|
||||
// SERVER INIT
|
||||
var app = express()
|
||||
|
|
@ -11,6 +14,10 @@ var server = require('http').createServer(app)
|
|||
// SERVER CONFIG
|
||||
app.set('trust proxy', 1)
|
||||
app.set('view engine', 'hbs')
|
||||
|
||||
app.use(bodyParser.urlencoded({ extended: false }))
|
||||
app.use(bodyParser.json())
|
||||
|
||||
hbs.registerPartials(path.join(__dirname, 'views'))
|
||||
hbs.registerHelper('listFirstThree', function (context, options) {
|
||||
var ret = ""
|
||||
|
|
@ -35,6 +42,25 @@ app.use('/css', express.static(path.join(__dirname, 'css')))
|
|||
app.use('/resources', express.static(path.join(__dirname, 'resources')))
|
||||
|
||||
// PAGES
|
||||
app.get('/edit', function (req, res) {
|
||||
var content = JSON.parse(fs.readFileSync('site.json'))
|
||||
res.render('edit', { officers: JSON.stringify(content.officers), committee: JSON.stringify(content.committee), council: JSON.stringify(content.council) })
|
||||
})
|
||||
|
||||
app.post('/edit', function (req, res) {
|
||||
var data = JSON.parse(req.body.data)
|
||||
if (data.password === EDITINGPASSWORD) {
|
||||
var content = JSON.parse(fs.readFileSync('site.json'))
|
||||
content.officers = data.officers
|
||||
content.committee = data.committee
|
||||
content.council = data.council
|
||||
fs.writeFileSync('site.json', JSON.stringify(content))
|
||||
res.send({ status: 'editsSaved' })
|
||||
} else {
|
||||
res.send({ status: 'incorrectPassword' })
|
||||
}
|
||||
})
|
||||
|
||||
app.get('/officers', function (req, res) {
|
||||
var content = JSON.parse(fs.readFileSync('site.json'))
|
||||
res.render('officers', { site: content })
|
||||
|
|
|
|||
274
views/edit.hbs
Normal file
274
views/edit.hbs
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
<!doctype html>
|
||||
<html lang='en'>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
input {
|
||||
color: #525f7f;
|
||||
font-family: 'Nunito-Bold', 'Nunito', sans-serif;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
margin: 10px 0px;
|
||||
padding: 10px 20px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
display: inline-block;
|
||||
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-moz-transition: all 0.15s ease;
|
||||
-o-transition: all 0.15s ease;
|
||||
-webkit-transition: all 0.15s ease;
|
||||
transition: all 0.15s ease;
|
||||
margin-right: 20px;
|
||||
min-width: 250px;
|
||||
}
|
||||
textarea {
|
||||
color: #525f7f;
|
||||
font-family: 'Nunito-Bold', 'Nunito', sans-serif;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
padding: 10px 20px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
display: inline-block;
|
||||
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-moz-transition: all 0.15s ease;
|
||||
-o-transition: all 0.15s ease;
|
||||
-webkit-transition: all 0.15s ease;
|
||||
transition: all 0.15s ease;
|
||||
margin-right: 20px;
|
||||
width: 90%;
|
||||
height: 165px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
textarea::placeholder {
|
||||
color: #b8b8d3;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
textarea:hover {
|
||||
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-transform: scale(1.01, 1.01);
|
||||
-o-transform: scale(1.01, 1.01);
|
||||
-ms-transform: scale(1.01, 1.01);
|
||||
-webkit-transform: scale(1.01, 1.01);
|
||||
transform: scale(1.01, 1.01);
|
||||
}
|
||||
textarea:focus {
|
||||
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-transform: scale(1.01, 1.01);
|
||||
-o-transform: scale(1.01, 1.01);
|
||||
-ms-transform: scale(1.01, 1.01);
|
||||
-webkit-transform: scale(1.01, 1.01);
|
||||
transform: scale(1.01, 1.01);
|
||||
}
|
||||
.title {
|
||||
min-width: 565px;
|
||||
color: #323f5f;
|
||||
}
|
||||
input:hover {
|
||||
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-transform: scale(1.02, 1.02);
|
||||
-o-transform: scale(1.02, 1.02);
|
||||
-ms-transform: scale(1.02, 1.02);
|
||||
-webkit-transform: scale(1.02, 1.02);
|
||||
transform: scale(1.02, 1.02);
|
||||
}
|
||||
input:focus {
|
||||
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-transform: scale(1.02, 1.02);
|
||||
-o-transform: scale(1.02, 1.02);
|
||||
-ms-transform: scale(1.02, 1.02);
|
||||
-webkit-transform: scale(1.02, 1.02);
|
||||
transform: scale(1.02, 1.02);
|
||||
}
|
||||
input::placeholder {
|
||||
color: #b8b8d3;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
b {
|
||||
color: #525f7f;
|
||||
font-size: 36px;
|
||||
font-family: 'Nunito-SemiBold', 'Nunito', sans-serif;
|
||||
margin: 7px;
|
||||
}
|
||||
#editApp {
|
||||
margin: 0px 10px;
|
||||
}
|
||||
.btn {
|
||||
font-family: 'Nunito-Bold', 'Nunito', sans-serif;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
padding: 10px 20px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
display: inline-block;
|
||||
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
-moz-transition: all 0.15s ease;
|
||||
-o-transition: all 0.15s ease;
|
||||
-webkit-transition: all 0.15s ease;
|
||||
transition: all 0.15s ease;
|
||||
background-color: #53CB8B;
|
||||
color: #F7F7FA;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
.btn:hover {
|
||||
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-transform: scale(1.02, 1.02);
|
||||
-o-transform: scale(1.02, 1.02);
|
||||
-ms-transform: scale(1.02, 1.02);
|
||||
-webkit-transform: scale(1.02, 1.02);
|
||||
transform: scale(1.02, 1.02);
|
||||
background-color: #67d198;
|
||||
}
|
||||
.btn:focus {
|
||||
-webkit-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 15px 35px rgba(50, 50, 98, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
|
||||
-moz-transform: scale(1.02, 1.02);
|
||||
-o-transform: scale(1.02, 1.02);
|
||||
-ms-transform: scale(1.02, 1.02);
|
||||
-webkit-transform: scale(1.02, 1.02);
|
||||
transform: scale(1.02, 1.02);
|
||||
}
|
||||
.red {
|
||||
background-color: #E9676F;
|
||||
color: #F7F7FA;
|
||||
}
|
||||
.red:hover {
|
||||
background-color: #ec7d84;
|
||||
}
|
||||
.wrap {
|
||||
margin: 0px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<title>SGA Website Editor</title>
|
||||
<link rel='icon' href='https://i.imgur.com/IRJiPeO.png'>
|
||||
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.2.0/css/all.css' integrity='sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ' crossorigin='anonymous'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='editApp'>
|
||||
<b>Officers</b>
|
||||
<div v-for='(officer, idx) in officers'>
|
||||
<input v-model='officer.title' placeholder='Title'>
|
||||
<input v-model='officer.name' placeholder='Name'>
|
||||
<input v-model='officer.img' placeholder='Image URL'>
|
||||
<textarea v-model='officer.paragraphs[0].para' placeholder='Description'></textarea>
|
||||
<a class='btn red wrap' @click='officers.splice(idx, 1)'><i class='fas fa-times'></i></a>
|
||||
</div>
|
||||
<a class='btn' @click='officers.push({"paragraphs": [{"para":""}]})'>Add Person</a>
|
||||
<hr/>
|
||||
<b>Executive Committee</b>
|
||||
<div v-for='(commit, i) in committee'>
|
||||
<input v-model='commit.title' placeholder='Committee Title' class='title'>
|
||||
<a class='btn red' @click='committee.splice(i, 1)'><i class='fas fa-times'></i></a>
|
||||
<div v-for='(person, idx) in commit.people'>
|
||||
<input v-model='person.name' placeholder='Name'>
|
||||
<input v-model='person.year' placeholder='Year'>
|
||||
<a class='btn red' @click='commit.people.splice(idx, 1)'><i class='fas fa-times'></i></a>
|
||||
</div>
|
||||
<a class='btn' @click='commit.people.push({})'>Add Person</a>
|
||||
</div>
|
||||
<a class='btn title' @click='committee.push({"people": []})'>Add Committee</a>
|
||||
<hr/>
|
||||
<b>Class Council</b>
|
||||
<div v-for='(coun, i) in council'>
|
||||
<input v-model='coun.title' placeholder='Type "Class Of ..."' class='title'>
|
||||
<a class='btn red' @click='council.splice(i, 1)'><i class='fas fa-times'></i></a>
|
||||
<div v-for='(person, idx) in coun.people'>
|
||||
<input v-model='person.name' placeholder='Name'>
|
||||
<input v-model='person.role' placeholder='Role'>
|
||||
<a class='btn red' @click='coun.people.splice(idx, 1)'><i class='fas fa-times'></i></a>
|
||||
</div>
|
||||
<a class='btn' @click='coun.people.push({})'>Add Person</a>
|
||||
</div>
|
||||
<a class='btn title' @click='council.push({"people": []})'>Add Council</a>
|
||||
<hr/>
|
||||
<input v-model='password' placeholder='Password' id='password' @keyup.enter='sendEdits' type='password'/>
|
||||
<a class='btn' @click='sendEdits'>SAVE EDITS</a>
|
||||
</div>
|
||||
<p class='hidden' id='officers'>{{officers}}</p>
|
||||
<p class='hidden' id='committee'>{{committee}}</p>
|
||||
<p class='hidden' id='council'>{{council}}</p>
|
||||
</body>
|
||||
<script src='https://code.jquery.com/jquery-3.3.1.min.js' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'></script>
|
||||
<script src='https://cdn.jsdelivr.net/npm/vue'></script>
|
||||
<script>
|
||||
var V = {
|
||||
officers: JSON.parse($('#officers').text()),
|
||||
committee: JSON.parse($('#committee').text()),
|
||||
council: JSON.parse($('#council').text()),
|
||||
password: ''
|
||||
}
|
||||
var app = new Vue({
|
||||
el: '#editApp',
|
||||
data: V,
|
||||
methods: {
|
||||
sendEdits: function(event) {
|
||||
$.post('/edit', { "data": JSON.stringify(V) }, function(resp) {
|
||||
console.log(resp)
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(V);
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user