Created
October 28, 2014 16:13
-
-
Save koduki/79018ba5aae9fd0331dd to your computer and use it in GitHub Desktop.
datasheet sample
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>DataSheet</title> | |
| <style> | |
| table, td, th { | |
| border-collapse: collapse; | |
| border: 1px solid #ddd; | |
| text-align: left; | |
| } | |
| .column-name th { | |
| background-color: #AAAAAA; | |
| text-align: center; | |
| } | |
| .header { | |
| background-color: #f5f5f5; | |
| } | |
| .item th { | |
| width:75px; | |
| } | |
| .item td { | |
| width:400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>DataSheet</h1> | |
| <p></p> | |
| </header> | |
| <p> | |
| <table id="datasheet"> | |
| <tr class="column-name"> | |
| <th colspan="5">Name</th> | |
| <th>Value</th> | |
| <th>Description</th> | |
| </tr> | |
| </table> | |
| </p> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script> | |
| var MAX_INDEX = 5; | |
| var parse = function(data, name, index){ | |
| var split = function(value){ | |
| var size = value.length | |
| var results = [] | |
| var last_item = value[size - 1]; | |
| if(last_item.match(/^desc:/) === null) { | |
| results[0] = value; | |
| results[1] = ''; | |
| } else { | |
| results[0] = value.slice(0, size - 1); | |
| results[1] = last_item.substring(5); | |
| } | |
| return results; | |
| } | |
| var appendName = function(tr, class_name, text, index) { | |
| for (var i = 0; i < MAX_INDEX - index; i++) { | |
| $("<th />").appendTo(tr); | |
| } | |
| $("<th class='" + class_name + "' />").attr('colspan', index).text(text).appendTo(tr); | |
| } | |
| var appendHeader = function(name, index) { | |
| var tr = $('<tr/>'); | |
| appendName(tr, 'header', name, index); | |
| $("<td class='header' />").appendTo(tr); | |
| $("<td class='header' />").appendTo(tr); | |
| $("#datasheet").append(tr); | |
| } | |
| var addItem = function(name, index){ | |
| // add item name | |
| var tr = $('<tr class="item" />'); | |
| appendName(tr, 'item', name, index); | |
| // split value and comment. | |
| var columns = split(data[name]); | |
| // add value | |
| $("<td />").text(columns[0]).appendTo(tr); | |
| // add description | |
| $("<td />").text(columns[1]).appendTo(tr); | |
| $("#datasheet").append(tr); | |
| } | |
| var addListItem = function(name, index){ | |
| // split value and comment. | |
| for(var i = 0; i < data[name].length; i++) { | |
| // add header | |
| var tr = $('<tr/>'); | |
| appendName(tr, '', '', index); | |
| var columns = split(data[name][i]) | |
| // add value | |
| $("<td />").text(columns[0]).appendTo(tr); | |
| // add description | |
| $("<td />").text(columns[1]).appendTo(tr); | |
| $("#datasheet").append(tr); | |
| } | |
| } | |
| var addListItems = function(name, index){ | |
| appendHeader(name, index); | |
| addListItem(name, index); | |
| } | |
| var addLayer = function(name, index) { | |
| // add Layer | |
| appendHeader(name, index); | |
| // add children | |
| for (item in data[name]) { | |
| parse(data[name], item, index - 1); | |
| } | |
| } | |
| var isItem = function(){ | |
| return data[name].constructor === Array; | |
| } | |
| var isItemList = function(){ | |
| return (data[name][0].constructor === Array); | |
| } | |
| // parse items | |
| if (isItem() && isItemList()){ | |
| addListItems(name, index); | |
| } else if (isItem()) { | |
| addItem(name, index); | |
| } else { | |
| addLayer(name, index); | |
| } | |
| } | |
| var preview = function(data){ | |
| for (name in data) { | |
| if (name === 'Description') { | |
| $("header p").text(data[name]); | |
| } else { | |
| parse(data, name, 5); | |
| } | |
| } | |
| } | |
| $(function(){ | |
| $.getJSON("datasheet.json", function(data){ | |
| preview(data); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "Description":"GlassFish Application Server", | |
| "Environment":["production"], | |
| "Network":{ | |
| "Host":["localhost.localdomain"], | |
| "IP":["enp0s3", "10.0.2.15"] | |
| }, | |
| "OSName":["Linux dev-ubuntu 3.13.0-32-generic"], | |
| "JDK":{ | |
| "Version":["1.8.0_20"], | |
| "Path":["/usr/java/java8"] | |
| }, | |
| "GlassFish":{ | |
| "Version":["4.01"], | |
| "Path":["/usr/local/glassfish4"], | |
| "Domain":{ | |
| "Name":["base_domain"], | |
| "Port":["8080","desc:HTTPSではなくHTTPを利用"] | |
| } | |
| }, | |
| "Directories":[ | |
| ["0755", "glassfish:glassfish", "/var/log/glassfish4"] | |
| ], | |
| "Packages":[ | |
| ["rsync"], | |
| ["unzip"], | |
| ["vim"], | |
| ["git", "desc:開発用"] | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment