สร้าง tag ของบทความให้เป็นสี ๆ ตามระยะเวลาที่โพสล่าสุด

| SemanticUI NodeJs Database-Neo4j PugJS | 395 | 486 วันที่แล้ว
สวัสดีครับ บทความนี้ ผมจะเอาโค้ดตัวอย่างที่ใช้ในเว็บ howtoclicks นี้ออกมานะคับ เผื่อมีใครจะนำไปประยุกต์ใช้ หรือสำหรับตัวผมก็เอาไว้ Note ไว้เผื่อลืมเหมือนกัน

สำหรับ tag ที่เป็นสี ๆ นั้น จะเห็นได้จากช่องด้านขวาที่เป็น category ต่าง ๆ นะคับ ปกติผมไม่ได้ใส่สีไว้ ให้โชว์แต่ category แต่ว่า ผมเขียนไป ๆ แล้วรู้สึกอยากจะรู้ว่า เอะ! บทความแต่ละหมวดหมู่นั้นนะ เราไม่ได้เขียนมานานเท่าไหร่แล้วนะ ดังนั้น tag color นี้จึงเกิดขึ้นมา ซึ่งเมื่อทำแล้วผลลัพธ์ก็จะเป็นเหมือนรูปด้านล่าง

ก่อนอื่นเลย เราไปดูความสัมพันธ์ของ Database กันก่อนครับ ซึ่งผมมีความสัมพันธ์ของ board เชื่อมไปหา category ตามรูปด้านล่างครับ
จากนั้นเราก็ต้องทำการ MATCH ข้อมูลจาก neo4j ออกมา ก่อนคับ ในที่นี้ผมใช้ module apoc ในการเชื่อมต่อดาต้าเบสนะคับ ก็จะได้โค้ดตามตัวอย่างด้านล่าง
exports.middleware = function(req, res, next){
	apoc.query(
		'MATCH (c:category)<-[t:tag]-(b:board) \
		RETURN ID(c), c.name, count(t) AS cn, max(b.createdate) AS lastupd \
		ORDER BY c.name').exec().then(
		function (response) {
			res.locals.tags = response[0].data
			res.locals.user = req.user
			next();
		},
		function (fail) {
			middleware.errorHandler(fail, req, res, next)
		}
	)
}
จากโค้ดผมก็เอาค่า response มาใส่ใน ตัวแปรที่ชื่อว่า tags เพื่อ return ค่ากลับไป จากนั้นเมื่อได้ response แล้วผมก็นำไป each loop เพื่อแสดงค่าแต่ละค่า ตามตัวอย่างโค้ดด้านล่าง
div(class='ui segment')
	div(class='ui middle aligned divided list', style='text-align:left;')
		each tag in tags
			div(class='item')
				- var tagId = tag.row[0]
				- var tagName = tag.row[1]
				- var tagCount = tag.row[2]
				- var lastupd = tag.row[3]
				- var lastupdtxt = howTimeSmall(lastupd)
				- var lastupdcolor = howTimeColor(lastupd)
				div(class='right floated content') [#{tagCount}]
				i(class='tag icon')
				div(class='content')
จากโค้ดจะเห็นว่า เราใช้ pug js เพื่อไปเรียก ฟังก์ชัน howTimeSmall กับ howTimeColor ซึ่งฟังก์ชัน howTimeSmall เป็นฟังก์ชันสำหรับคืนค่าว่าโพสล่าสุดผ่านมาแล้วกี่วัน ส่วนฟังก์ชัน howTimeColor เอาไว้สำหรับคืนค่าสี เราไปดูฟังก์ชัน howTimeSmall กันก่อนครับ ซึ่งจะคืนค่ามาเป็นเวลาแบบย่อ โค้ดตามตัวอย่างด้านล่างเลย
function howTimeSmall(strDate) {
	var dateNow = new Date()
	var date = new Date(parseInt(strDate))
	var diffMillisec = (dateNow-date)
	var diffDay = diffMillisec / 86400000
	
	if(diffDay < 1){
		var diffHour = diffMillisec / 3600000
		if(diffHour < 1){
			var diffMinute = diffMillisec / 60000
			if(diffMinute < 1){
				var diffSec = diffMillisec / 1000
				return Math.trunc(diffSec) + " Sec";
			}
			return Math.trunc(diffMinute) + " Min";
		}
		return Math.trunc(diffHour) + " H";
	}

	if(diffDay > 1 || diffDay < 30){
		return Math.trunc(diffDay) + " D";
	}
	return date.toJSON().slice(0,10)
}
เมื่อได้แล้ว เราก็จะได้ระยะเวลาที่โพสล่าสุดในแต่ละหมวดหมู่แล้ว ต่อไป เราไปสร้างฟังก์ชันใส่สีกันก่อน แต่ก่อนอื่นเราก็ต้องไปดูก่อนว่าเราจะสีอะไรดี ในที่นี้ผมใช้ SemanticUI เป็น framework ดังนั้นเราไปดูใน Semantic UI กันก่อนครับ แล้วผมก็เจอสีที่เรียงกันมา ซึ่งก็คือ
<a class="ui red circular label">2</a>
<a class="ui orange circular label">2</a>
<a class="ui yellow circular label">2</a>
<a class="ui olive circular label">2</a>
<a class="ui green circular label">2</a>
<a class="ui teal circular label">2</a>
<a class="ui blue circular label">2</a>
<a class="ui violet circular label">2</a>
<a class="ui purple circular label">2</a>
<a class="ui pink circular label">2</a>
<a class="ui brown circular label">2</a>
<a class="ui grey circular label">2</a>
<a class="ui black circular label">2</a>
ซึ่งจะได้ 2222222222222 จากนั้นก็ใส่เป็น label ให้มันซะหน่อยจะได้สวย ๆ ซึ่งดูได้ตามลิ้ง https://semantic-ui.com/elements/label.html เมื่อได้สีกับได้รูปแบบที่ต้องแสดงแล้ว ก็ถึงเวลาไปเขียนฟังก์ชัน howTimeColor แล้ว โดยในฟังก์ชันก็จะได้ประมาณนี้
function howTimeColor(strDate) {
	var dateNow = new Date()
	var date = new Date(parseInt(strDate))
	var diffMillisec = (dateNow-date)
	var diffDay = diffMillisec / 86400000
	
	if(diffDay < 3){
		return 'blue'
	}
	if(diffDay < 15){
		return 'green'
	}
	if(diffDay < 30){
		return 'olive'
	}
	if(diffDay < 100){
		return 'yellow'
	}
	if(diffDay < 200){
		return 'orange'
	}

	return 'red'
}
เพียงแค่นี้เราก็ได้แล้ว ต่อไปผมก็สามารถรู้ได้แล้วว่า แต่ละหมวดหมู่ไม่ได้เขียนมานานเท่าไหร่แล้วนะ แล้วไม่อยากให้หมวดหมู่ไหนมันเป็นสีแดง ซึ่งสามารถช่วยให้ผมขยันเขียนบทความบ่อย ๆ ได้นะ
comments

[1]
Adobe-PDF
700 D
[1]
Android
591 D
[40]
Animal
684 D
[1]
Apache
700 D
[2]
[10]
[2]
CMS-SMF
701 D
[1]
[3]
[1]
Database
700 D
[4]
[1]
Docker
595 D
[1]
Fruit
684 D
[2]
Git
487 D
[5]
HTML
487 D
[1]
Housework
689 D
[2]
IT
681 D
[2]
Imacro
701 D
[17]
Java
484 D
[1]
Java-Web
591 D
[1]
[2]
MQL5
513 D
[3]
MakeMoney
486 D
[18]
[1]
Maven
485 D
[1]
Mobile
698 D
[1]
NodeJs
486 D
[3]
Physics
482 D
[4]
PugJS
486 D
[2]
React
496 D
[132]
Science
683 D
[1]
[2]
Spring
485 D
[7]
[2]
[1]
[4]
Ubuntu
650 D
[1]
WebLogic
682 D
[4]