Section editor done

suitmedia · Jul 17, 2017 · 1fc9155 · 1fc9155
1 parent 39ba2c4
commit 1fc9155
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 117 deletions.
diff --git 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
@@ -1,29 +1,72 @@
-<html ng-app="cms" ng-controller="cmsController" ng-init="init()">
+<html ng-app="cms" ng-controller="cmsController" ng-init="getSection()">
 	<head>
-		<title>Suitmedia Front-End Standards Node.JS CMS</title>
+		<meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <meta name="description" content="Suitmedia Front-end Standards CMS">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="format-detection" content="telephone=no">
+
+    <link rel="apple-touch-icon" href="assets/img/apple-icon.png">
+    <link rel="icon" type="image/png" href="assets/img/favicon.png">
+
+		<title>Suitmedia Front-End Standards CMS</title>
+
+		<link rel="stylesheet" href="css/main.css">
+		<style>
+			body {
+				font-size: 0.95em;
+			}
+			.cms-header {
+				padding: 2em 0;
+			}
+			.section-form {
+				display: none;
+			}
+		</style>
 	</head>
 	<body>
-
-		<h2>Section Editor</h2>
-		<form ng-submit="postSection()">
-			<input type="text" placeholder="id" ng-model="input.sectionId">
-			<input type="text" placeholder="name" ng-model="input.sectionName">
-			<input type="text" placeholder="header" ng-model="input.sectionHeader">
-			<input type="text" placeholder="icon" ng-model="input.sectionIcon">
-			<button>Submit</button>
-		</form>
-		<hr>
-		<h2>Section List</h2>
-		<ul>
-			<li ng-repeat="section in sectionList">
-				<div ng-bind="section.sectionId"></div>
-				<div ng-bind="section.sectionName"></div>
-				<div ng-bind="section.sectionHeader"></div>
-				<div ng-bind="section.sectionIcon"></div>
-			</li>
-		</ul>
-		<button ng-click="log()">log</button>
+		<div class="container">
+			<header class="cms-header">
+				<h1>Suitmedia Front-end Standards | Section Editor</h1>
+			</header>
+
+			<main>
+				<h2>New Section</h2>
+				<form ng-submit="postSection()">
+					<input class="form-input" type="text" placeholder="route" ng-model="newInput.sectionId">
+					<input class="form-input" type="text" placeholder="name" ng-model="newInput.sectionName">
+					<input class="form-input" type="text" placeholder="header" ng-model="newInput.sectionHeader">
+					<input class="form-input" type="text" placeholder="icon" ng-model="newInput.sectionIcon">
+					<button class="btn">Submit</button>
+				</form>
+				<hr>
+				<h2>Edit Section</h2>
+				<ul class="list-nostyle">
+					<li ng-repeat="section in sectionList">
+						<div>id: <span ng-bind="section.id"></span></div>
+						<div>route: /<span ng-bind="section.sectionId"></span></div>
+						<div>name: <span ng-bind="section.sectionName"></span></div>
+						<div>header: <span ng-bind="section.sectionHeader"></span></div>
+						<div>icon: <span ng-bind="section.sectionIcon"></span></div>
+						<form class="section-form" id="{{section.id}}" ng-submit="editSection(section.id)">
+							<input class="form-input" type="text" placeholder="route" ng-model="editInput.sectionId">
+							<input class="form-input" type="text" placeholder="name" ng-model="editInput.sectionName">
+							<input class="form-input" type="text" placeholder="header" ng-model="editInput.sectionHeader">
+							<input class="form-input" type="text" placeholder="icon" ng-model="editInput.sectionIcon">
+							<button class="btn" type="Submit">edit</button>
+						</form>
+						<button class="btn" ng-click="showForm(section.id)">edit</button>
+						<button class="btn" ng-click="resetInput()">reset</button>
+						<button class="btn" ng-click="deleteSection(section)">delete</button>
+						<br><br><hr>
+					</li>
+				</ul>
+			</main>
+
+		</div>
 
+		<script type="text/javascript" src="js/vendor/jquery.min.js"></script>
 		<script type="text/javascript" src="js/vendor/angular.min.js"></script>
 		<script type="text/javascript" src="main.js"></script>
 	</body>

diff --git 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
diff --git a/configs/sectionlist.js b/configs/sectionlist.js