From 1fc91555d8ec2fddb874147bd0609492cb0ec1fe Mon Sep 17 00:00:00 2001 From: Andi Ersaldy Raisha Date: Mon, 17 Jul 2017 13:38:19 +0700 Subject: [PATCH] Section editor done --- cms.js | 92 +++++++++++++++++++++++++++--------------- cms/index.html | 87 +++++++++++++++++++++++++++++---------- cms/main.js | 56 ++++++++++++++++++------- cms/sectionlist.html | 22 ---------- configs/sectionlist.js | 28 +------------ 5 files changed, 168 insertions(+), 117 deletions(-) delete mode 100644 cms/sectionlist.html diff --git a/cms.js b/cms.js index 88fc2ae..38d691e 100644 --- a/cms.js +++ b/cms.js @@ -8,47 +8,75 @@ app.use(express.static('cms')) app.use(express.static('assets')) app.use(bodyParser.json()) + + + + +const readSection = () => { + let section = fs.readFileSync('configs/sectionlist.js', "utf8").split('\n') + + section.shift() + return (JSON.parse(section.join('\n'))) +} + +const readSectionAsString = () => { + return fs.readFileSync('configs/sectionlist.js', "utf8") +} + +const storeSection = newData => { + const topBuffer = 'var sectionList = \n' + let buffer = topBuffer + JSON.stringify(newData) + + fs.writeFileSync('configs/sectionlist.js', buffer, {encoding: 'utf8'}) +} + + + + + app.get('/', (req, res) => { res.sendFile(path.join(`${__dirname}/cms/index.html`)) }) app.get('/sectionList', (req, res) => { - const buffer = fs.readFileSync('configs/sectionlist.js', "utf8").split('\n') - let newBuffer = buffer - .map( (current, index, arr) => { - if( index !== 0 && index !== arr.length - 1 ) { - return current - } else { - return '' - } - }) - .join('\n') - .replace(/\s/g, '') - newBuffer = `[ ${newBuffer} ]` - res.send(newBuffer) + const bufferObj = readSection() + + res.send(bufferObj) }) app.post('/sectionAdd', (req, res) => { - const buffer = fs.readFileSync('configs/sectionlist.js', "utf8").split('\n') - const topBuffer = buffer[0] - const bottomBuffer = '\n' + buffer[buffer.length - 1] - const midBuffer = buffer - .map( (current, index, arr) => { - if( index !== 0 && index !== arr.length - 1 ) { - return current - } else { - return '' - } - }) - .concat(', ') - .concat(JSON.stringify(req.body)) - .join('\n') - const newBuffer = topBuffer + midBuffer + bottomBuffer - - fs.writeFileSync('configs/sectionlist.js', newBuffer, { - encoding: 'utf8' - }) + let newSection = req.body + let bufferObj = readSection() + + newSection.id = Date.now() + console.log(newSection) + bufferObj.push(newSection) + storeSection(bufferObj) + res.send('ok') +}) + +app.post('/sectionDelete', (req, res) => { + const id = req.body.id + let buffer = readSection().filter( obj => { + return !( obj.id === id ) + }) + + storeSection(buffer) + res.send('ok') +}) + +app.post('/sectionEdit', (req, res) => { + const newData = req.body + console.log(newData) + let buffer = readSection().map( obj => { + if (obj.id === newData.id) { + return newData + } + else + return obj + }) + storeSection(buffer) res.send('ok') }) diff --git a/cms/index.html b/cms/index.html index 9558da0..5109f58 100644 --- a/cms/index.html +++ b/cms/index.html @@ -1,29 +1,72 @@ - + - Suitmedia Front-End Standards Node.JS CMS + + + + + + + + + + + Suitmedia Front-End Standards CMS + + + - -

Section Editor

-
- - - - - -
-
-

Section List

- - +
+
+

Suitmedia Front-end Standards | Section Editor

+
+ +
+

New Section

+
+ + + + + +
+
+

Edit Section

+
    +
  • +
    id:
    +
    route: /
    +
    name:
    +
    header:
    +
    icon:
    +
    + + + + + +
    + + + +

    +
    • +
+
+ +
+ diff --git a/cms/main.js b/cms/main.js index a4354d4..6daa2d9 100644 --- a/cms/main.js +++ b/cms/main.js @@ -2,12 +2,8 @@ const app = angular.module('cms', []) app.controller('cmsController', ['$scope', '$http', ($scope, $http) => { $scope.sectionList = [{}] - $scope.input = { - sectionId: 'css', - sectionName: 'css guideline', - sectionHeader: 'css/sass', - sectionIcon: 'icon' - } + $scope.newInput = {} + $scope.editInput = {} $scope.getSection = () => { $http.get('sectionList').then( res => { @@ -16,19 +12,49 @@ app.controller('cmsController', ['$scope', '$http', ($scope, $http) => { } $scope.postSection = () => { - $http.post('sectionAdd', $scope.input).then( (req, res) => { - console.log(req) + $http.post('sectionAdd', $scope.newInput).then( (req, res) => { + console.log(res) + $scope.getSection() + $scope.resetInput() }) - $scope.getSection() } - - $scope.log = () => { - console.log($scope.sectionList) - console.log($scope.input) + + $scope.deleteSection = (section) => { + $http.post('sectionDelete', section).then( (req, res) => { + console.log(res) + $scope.getSection() + }) } - $scope.init = () => { - $scope.getSection() + $scope.editSection = (sectionId) => { + let newData = { + id: sectionId, + sectionId: $scope.editInput.sectionId, + sectionName: $scope.editInput.sectionName, + sectionHeader: $scope.editInput.sectionHeader, + sectionIcon: $scope.editInput.sectionIcon + } + + $http.post('sectionEdit', newData).then( (req, res) => { + console.log(res) + $scope.getSection() + }) + } + + $scope.resetInput = () => { + $scope.newInput = {} + $scope.editInput = {} + } + + $scope.showForm = (target) => { + let targetObj = document.querySelector(`#${target}`) + let forms = [...document.querySelectorAll('.section-form')] + + $scope.resetInput() + forms.forEach( current => { + current.style.display = 'none' + }) + targetObj.style.display = 'block' } }]) diff --git a/cms/sectionlist.html b/cms/sectionlist.html deleted file mode 100644 index a3a7802..0000000 --- a/cms/sectionlist.html +++ /dev/null @@ -1,22 +0,0 @@ - - - Suitmedia Front-End Standards Node.JS CMS - - - -

Section List

- - - - - - - - \ No newline at end of file diff --git a/configs/sectionlist.js b/configs/sectionlist.js index 7c59165..f7af2c0 100644 --- a/configs/sectionlist.js +++ b/configs/sectionlist.js @@ -1,26 +1,2 @@ -var sectionList = [ - { - "sectionId" : "html", - "sectionName" : "HTML Guideline", - "sectionHeader" : "HTML", - "sectionIcon" : "" - }, - { - "sectionId" : "css", - "sectionName" : "CSS/SASS Guideline", - "sectionHeader" : "CSS/SASS", - "sectionIcon" : "CSS" - }, - { - "sectionId" : "js", - "sectionName" : "JavaScript Guideline", - "sectionHeader" : "JavaScript", - "sectionIcon" : "JS" - }, - { - "sectionId" : "tools", - "sectionName" : "Tools & Plugin", - "sectionHeader" : "Tools & Plugin", - "sectionIcon" : "" - }, - ]; \ No newline at end of file +var sectionList = +[{"id":"html","sectionId":"html","sectionName":"HTML Guideline","sectionHeader":"HTML","sectionIcon":""},{"id":"css","sectionId":"css","sectionName":"CSS/SASS Guideline","sectionHeader":"CSS/SASS","sectionIcon":"CSS"},{"id":"js","sectionId":"js","sectionName":"JavaScript Guideline","sectionHeader":"JavaScript","sectionIcon":"JS"},{"id":"tools","sectionId":"tools","sectionName":"Tools & Plugin","sectionHeader":"Tools & Plugin","sectionIcon":""}] \ No newline at end of file