Navigation Menu

Skip to content

Commit

Permalink
Impl UI
Browse files Browse the repository at this point in the history
  • Loading branch information
ysugimoto committed May 20, 2016
1 parent f08c486 commit 3cd8515
Show file tree
Hide file tree
Showing 18 changed files with 19,678 additions and 58 deletions.
5 changes: 3 additions & 2 deletions Makefile
Expand Up @@ -3,15 +3,16 @@
all: assets darwin

assets:
cd assets_src && browserify tailor.js -t babelify -o ../assets/tailor.js && uglifyjs -c -o ../assets/tailor.js ../assets/tailor.js
cd assets_src && browserify tailor.js -t babelify -o ../assets/tailor.js && uglifyjs -c -o ../assets/tailor.min.js ../assets/tailor.js
cleancss assets_src/tailor.css -o assets/tailor.css
cp assets_src/*.html assets/
go-bindata -ignore node_modules -ignore package.json -pkg main -o static.go assets/

linux:
GOOS=linux GOARCH=amd64 go build -o build/tailor ./*.go

windows:
GOOS=windows GOARCH=amd64 go build -o build/tailor ./*.go
GOOS=windows GOARCH=amd64 go build -o build/tailor.exe ./*.go

darwin:
GOOS=darwin GOARCH=amd64 go build -o build/tailor ./*.go
Expand Down
14 changes: 14 additions & 0 deletions assets/index.html
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Tailor log watcher</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/tailor.css">
<meta name="robots" content="noindex,nofollow">
</head>
<body>
<div class="T-Wrap"></div>
<script src="/tailor.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion assets/tailor.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19,426 changes: 19,415 additions & 11 deletions assets/tailor.js

Large diffs are not rendered by default.

12 changes: 12 additions & 0 deletions assets/tailor.min.js

Large diffs are not rendered by default.

20 changes: 1 addition & 19 deletions assets_src/index.html
Expand Up @@ -8,25 +8,7 @@
<meta name="robots" content="noindex,nofollow">
</head>
<body>
<div class="T-Window">
<div class="T-Header">
<h1 class="T-Title">Tailor</h1>
<span class="T-Indicator n">Not Connected</span>
</div>
<div class="T-Main">
<div class="T-Sidebar">
<ul class="T-LogList">
<li><a href="#">foo.log<span>1</span></a></li>
<li><a href="#">bar.log<span>1</span></a></li>
</ul>
</div>
<div class="T-Content">
<div class="T-Log">Lorem ipsum, .....</div>
<div class="T-Log">Lorem ipsum, .....Lorem ipsum, .....Lorem ipsum, .....Lorem ipsum, .....Lorem ipsum, .....Lorem ipsum, .....Lorem ipsum, .....Lorem ipsum, .....Lorem ipsum, .....Lorem ipsum, .....</div>
<div class="T-Log">Lorem ipsum, .....</div>
</div>
</div>
</div>
<div class="T-Wrap"></div>
<script src="/tailor.js"></script>
</body>
</html>
19 changes: 19 additions & 0 deletions assets_src/modules/indicator.js
@@ -0,0 +1,19 @@
import React from "react";

export default class Indicator extends React.Component {
constructor(props) {
super(props);
}

render() {
if ( this.props.connected === true ) {
return (
<span className="T-Indicator c">Connected</span>
);
} else {
return (
<span className="T-Indicator n">Not Connected</span>
);
}
}
}
30 changes: 30 additions & 0 deletions assets_src/modules/log_content.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

41 changes: 41 additions & 0 deletions assets_src/modules/log_file_list.js
@@ -0,0 +1,41 @@
import React from "react";

export default class LogFileList extends React.Component {
constructor(props) {
super(props);
}

selectHost(evt) {
const em = evt.currentTarget.querySelector("em");
em.normalize();
this.props.onSelectHost(em.textContent);
}

render() {
return (
<div className="T-Sidebar">
<ul className="T-LogList">
{ this.props.hosts.map((h) => {
if ( h === this.props.selectedHost ) {
return (
<li onClick={this.selectHost.bind(this)}>
<a href="#" className="active">
<em>{h}</em>
</a>
</li>
);
} else {
return (
<li onClick={this.selectHost.bind(this)}>
<a href="#">
<em>{h}</em>
</a>
</li>
);
}
}) }
</ul>
</div>
);
}
}
44 changes: 36 additions & 8 deletions assets_src/modules/main.js
@@ -1,25 +1,53 @@
const React = require("react");
import React from "react";
import Indicator from "./indicator";
import LogFileList from "./log_file_list";
import LogContent from "./log_content";

export default class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedFile: "",
connected: false,
logs: []
selectedHost: "",
connected: false
};
}

handleSelectHost(host) {
if ( this.state.selectedHost === host ) {
host = "";
}
this.setState({selectedHost: host});
}

flushLog() {
if ( this.state.selectedHost && this.state.selectedHost in this.props.logs ) {
this.props.logs[this.state.selectedHost] = [];
this.forceUpdate();
}
}

render() {
let logs = [];
const hosts = Object.keys(this.props.logs);

if ( this.state.selectedHost && this.state.selectedHost in this.props.logs ) {
logs = this.props.logs[this.state.selectedHost];
} else {
if ( hosts.length > 0 ) {
logs = this.props.logs[hosts[0]];
this.state.selectedHost = hosts[0];
}
}

return (
<div className="T-Window">
<div className="T-Header">
<h1 class="T-Title">Tailor</h1>
<h1 className="T-Title">Tailor</h1>
<Indicator connected={this.state.connected} />
</div>
<div class="T-Main">
<LogFileList selectedFile={this.state.selectedFile} />
<LogContent logs={this.state.logs} />
<div className="T-Main">
<LogFileList hosts={hosts} selectedHost={this.state.selectedHost} onSelectHost={this.handleSelectHost.bind(this)} />
<LogContent logs={logs} flushLog={this.flushLog.bind(this)}/>
</div>
</div>
);
Expand Down
7 changes: 7 additions & 0 deletions assets_src/tailor.css
Expand Up @@ -116,11 +116,13 @@ body, h1, p, ul, li {
margin-left: 260px;
height: 100%;
overflow: auto;
position: relative;
}
.T-Log {
padding: 10px 18px;
line-height: 1.6;
border-bottom: dotted 1px #ccc;
font-size: 1.1em;
}
.T-Log:hover {
background-color: #eee;
Expand All @@ -138,4 +140,9 @@ body, h1, p, ul, li {
content: "]";
margin-left: 2px;
}
.T-Log--erase {
position: absolute;
top: 10px;
right: 10px;
}

42 changes: 33 additions & 9 deletions assets_src/tailor.js
@@ -1,22 +1,46 @@
const ReactDOM = require("react-dom");
const Main = require("./modules/main");
import ReactDOM from "react-dom";
import React from "react";
import Main from "./modules/main";

class Controller {
constructor(element) {
this.element = element;
this.elemment.style.height = (window.innerHeight - 40) + "px";
this.element.style.height = (window.innerHeight - 40) + "px";

this.logs = {};
}

init() {
this.main = ReactDOM.render(main, <Main />);
this.ws = new WebSocket(WEBSOCKET_URL);
this.ws.onmessage = (message) => {
this.main.setState({log: message});
this.main = ReactDOM.render(<Main logs={this.logs} hostList={this.hosts}/>, this.element);
//this.ws = new WebSocket(WEBSOCKET_URL);
this.ws = new WebSocket("ws://localhost:9999/reader");
this.ws.onopen = () => {
this.main.setState({connected: true});
this.ws.onmessage = (evt) => this.handleSocket(evt);
};
this.ws.onclose = () => {
this.main.setState({connected: false});
this.ws.onmessage = null;
};
}

handleSocket(evt) {
const message = JSON.parse(evt.data);
console.log(message);

if ( message.host in this.logs ) {
this.logs[message.host].push(message.message);
} else {
this.logs[message.host] = [message.message];
}
this.main.setState({
logs: this.logs
});
}
}

const controller = new Controller(
document.querySelector(".T-Main")
const c = new Controller(
document.querySelector(".T-Wrap")
);
c.init();

1 change: 1 addition & 0 deletions connection.go
Expand Up @@ -11,6 +11,7 @@ import (
type Payload struct {
Message string `json:"message"`
Host string `json:"host"`
Time string `json:"time"`
}

const (
Expand Down

0 comments on commit 3cd8515

Please sign in to comment.