Skip to content

Commit 46af3f5

Browse files
blavkablavka
committed
Refactoring Messages
1 parent 6cb5c34 commit 46af3f5

2 files changed

Lines changed: 136 additions & 58 deletions

File tree

‎src/assets/scss/MqttLog.scss‎

Lines changed: 87 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,89 @@
1+
$bottomLog: 260px;
2+
13
#mqttlog {
24
padding: 10px;
3-
.Console {
5+
width: 100%;
6+
.highlightedMessages {
7+
position: absolute;
8+
top: 10px;
9+
right: 10px;
10+
left: 10px;
11+
ul {
12+
padding: 5px;
13+
margin: 0px;
14+
}
15+
&>ul {
16+
margin: 0px;
17+
padding-left: 5px;
18+
padding-right: 5px;
19+
justify-content: space-between;
20+
}
21+
& li {
22+
margin: 2px 0 0 0;
23+
display: flex;
24+
align-items: center;
25+
.ConsoleButton {
26+
margin-left: auto;
27+
}
28+
}
29+
.fa {
30+
cursor: pointer;
31+
}
432
border: 2px solid gray;
5-
border-radius: 4px;
33+
background-color: white;
34+
}
35+
.messagesLog {
36+
border-radius: 0px;
637
overflow-y: auto;
38+
position: absolute;
39+
top: 10px;
40+
bottom: $bottomLog;
41+
right: 10px;
42+
left: 10px;
43+
border: 2px solid gray;
44+
min-height: 100px;
45+
ul {
46+
padding: 5px;
47+
margin: 0px;
48+
}
49+
&>ul {
50+
margin: 0px;
51+
padding-left: 5px;
52+
padding-right: 5px;
53+
justify-content: space-between;
54+
}
55+
& li {
56+
margin: 2px 0 0 0;
57+
display: flex;
58+
align-items: center;
59+
.ConsoleButton {
60+
margin-left: auto;
61+
}
62+
}
63+
.fa {
64+
cursor: pointer;
65+
}
66+
}
67+
68+
.btnClear {
69+
position: absolute;
70+
bottom: $bottomLog - 30px;
71+
right: 10px;
72+
}
73+
74+
.subTable {
75+
border: 2px solid gray;
76+
border-radius: 0px;
77+
overflow-y: auto;
78+
height: 60px;
779
&>ul {
880
margin: 1px;
981
padding-left: 5px;
1082
padding-right: 5px;
1183
justify-content: space-between;
1284
}
1385
& li {
14-
min-height: 35px;
86+
margin: 2px 0 0 0;
1587
display: flex;
1688
align-items: center;
1789
.ConsoleButton {
@@ -22,6 +94,13 @@
2294
cursor: pointer;
2395
}
2496
}
97+
.bottomLog {
98+
position: absolute;
99+
bottom: 0px;
100+
width: 100%;
101+
padding: 10px;
102+
margin: 0 -10px 0 -10px;
103+
}
25104
hr {
26105
margin: 0px;
27106
border-color: #333;
@@ -79,4 +158,8 @@
79158
.slider.round:before {
80159
border-radius: 50%;
81160
}
82-
}
161+
162+
.btn {
163+
min-width: 140px;
164+
}
165+
}

‎src/components/MqttLog.js‎

Lines changed: 49 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ export default class extends Component {
3131
this.onMessage = this.onMessage.bind(this);
3232
this.onSubscribeChange = this.onSubscribeChange.bind(this);
3333
this.onClickClear = this.onClickClear.bind(this);
34+
this._handleKeyDownPub = this._handleKeyDownPub.bind(this);
35+
this._handleKeyDownSub = this._handleKeyDownSub.bind(this);
3436
}
3537

3638
componentDidMount() {
@@ -113,6 +115,18 @@ export default class extends Component {
113115
});
114116
}
115117

118+
_handleKeyDownPub(event) {
119+
if (event.key === 'Enter') {
120+
this.onClickPublish(event);
121+
}
122+
}
123+
124+
_handleKeyDownSub() {
125+
if (event.key === 'Enter') {
126+
this.onClickSubscribe(event);
127+
}
128+
}
129+
116130
componentDidUpdate() {
117131
let el = ReactDOM.findDOMNode(this._ref_messages.current);
118132
el.scrollTop = el.scrollHeight;
@@ -122,92 +136,73 @@ export default class extends Component {
122136
let isHighlightedMessages = this.props.model.isHighlightedMessages;
123137
return (
124138
<div id="mqttlog">
125-
{this.state.highlighted_messages.length > 0 ? <div className="Console">
126-
<ul>
139+
140+
<div className="messagesLog" ref={this._ref_messages}>
141+
<ul >
127142
{
128-
this.state.highlighted_messages.map((item, index) => {
143+
this.state.messages.map((item, index) => {
129144
return (
130145
<li key={item.key}>
131146
<div>{formatTime(item.time)}&nbsp;<i title="Copy topic to Clipboard" onClick={() => this.onClickCopyTopic(item)} className="fa fa-clipboard" aria-hidden="true"></i>&nbsp;<span style={{ fontWeight: "bold" }}>{item.topic}&nbsp;</span></div>
132147
<div>{item.payload}</div>
133-
<div className="ConsoleButton"><i title="remove" onClick={() => this.onClickRemove(item)} className="fa fa-remove" aria-hidden="true"></i></div>
134-
</li>
135-
)
148+
<div className="ConsoleButton">
149+
{isHighlightedMessages(item.topic) ? null :<i title="pinned topic" onClick={() => this.onClickAdd(item)} className="fa fa-thumb-tack" aria-hidden="true"></i>}
150+
</div>
151+
</li>)
136152
})
137153
}
138154
</ul>
139-
</div> : null}
155+
</div>
140156

141-
<div className="Console" ref={this._ref_messages} style={{height: "300px"}}>
142-
<ul >
157+
{this.state.highlighted_messages.length > 0 ? <div className="highlightedMessages">
158+
<ul>
143159
{
144-
this.state.messages.map((item, index) => {
160+
this.state.highlighted_messages.map((item, index) => {
145161
return (
146162
<li key={item.key}>
147163
<div>{formatTime(item.time)}&nbsp;<i title="Copy topic to Clipboard" onClick={() => this.onClickCopyTopic(item)} className="fa fa-clipboard" aria-hidden="true"></i>&nbsp;<span style={{ fontWeight: "bold" }}>{item.topic}&nbsp;</span></div>
148164
<div>{item.payload}</div>
149-
<div className="ConsoleButton">
150-
{isHighlightedMessages(item.topic) ? null :<i title="pinned topic" onClick={() => this.onClickAdd(item)} className="fa fa-thumb-tack" aria-hidden="true"></i>}
151-
</div>
152-
</li>)
165+
<div className="ConsoleButton"><i title="remove" onClick={() => this.onClickRemove(item)} className="fa fa-remove" aria-hidden="true"></i></div>
166+
</li>
167+
)
153168
})
154169
}
155170
</ul>
171+
</div> : null}
172+
173+
<button onClick={this.onClickClear} className="btn btn-secondary btn-sm float-right btnClear" >Clear all messages</button>
174+
175+
<div className="bottomLog">
176+
177+
<header className="h4">Publish message</header>
178+
<div className="input-group mb-3 input-group-sm">
179+
<input className="form-control" value={this.state.pub_topic} onChange={(e) => this.setState({ pub_topic: e.target.value })} onKeyDown={this._handleKeyDownPub} type="text" placeholder="Enter topic to publish" />
180+
<input className="form-control" value={this.state.pub_payload} onChange={(e) => this.setState({ pub_payload: e.target.value })} onKeyDown={this._handleKeyDownPub} type="text" placeholder="Enter payload to publish" />
181+
<button disabled={!this.state.isConnected} onClick={this.onClickPublish} className="btn btn-primary btn-sm">Publish</button>
156182
</div>
157183

158-
<button onClick={this.onClickClear} className="btn btn-secondary btn-sm float-right" >Clear</button>
159-
160-
<form>
161-
<div className="form-group">
162-
<label className="control-label col-xs-1">
163-
{this.state.checkbox ? "Publish mode" : "Subscribe mode"}
164-
</label>
165-
<div className="col-xs-2">
166-
<label className="switch">
167-
<input type="checkbox" onChange={(event) => this.setState({ checkbox: event.target.checked })} />
168-
<span className="slider round"></span>
169-
</label>
170-
</div>
171-
</div>
172-
{this.state.checkbox ?
173-
<div className="form-group">
174-
<label className="control-label col-xs-1">Payload</label>
175-
<div className="col-xs-8">
176-
<input className="form-control" value={this.state.pub_topic} onChange={(e) => this.setState({ pub_topic: e.target.value })} type="text" placeholder="Enter topic to publish" />
177-
<input className="form-control" value={this.state.pub_payload} onChange={(e) => this.setState({ pub_payload: e.target.value })} type="text" placeholder="Enter message to publish" />
178-
</div>
179-
<div className="col-xs-2">
180-
<button disabled={!this.state.isConnected} onClick={this.onClickPublish} className="btn btn-primary btn-sm">Publish</button>
181-
</div>
182-
</div>
183-
:
184-
<div className="form-group">
185-
<label className="control-label col-xs-1">Topic</label>
186-
<div className="col-xs-8">
187-
<input className="form-control" placeholder="Enter topic to subscribe" value={this.state.sub_topic} onChange={(e) => this.setState({ sub_topic: e.target.value })} type="text" />
188-
</div>
189-
<div className="col-xs-2">
190-
<button disabled={!this.state.isConnected} onClick={this.onClickSubscribe} className="btn btn-primary btn-sm">Subscribe</button>
191-
</div>
192-
</div>
193-
}
194-
</form>
195184
<header className="h4">Subscribed topics</header>
196-
<div className="Console">
185+
<div className="input-group input-group-sm">
186+
<input type="text" className="form-control" placeholder="Enter topic to subscribe" value={this.state.sub_topic} onChange={(e) => this.setState({ sub_topic: e.target.value })} onKeyDown={this._handleKeyDownSub} type="text" />
187+
<div className="input-group-append">
188+
<button type="submit" className="btn btn-primary mb-2" disabled={!this.state.isConnected} onClick={this.onClickSubscribe} >Subscribe</button>
189+
</div>
190+
</div>
191+
<div className="subTable">
197192
<ul>
198193
{
199194
this.state.subscribed_topics.map((topic, index) => {
200195
return (
201196
<li key={index}>
202197
<div>{topic}</div>
203-
<div className="ConsoleButton"><button onClick={() => this.onClickUnsubscribe(topic)}>-</button></div>
198+
<div className="ConsoleButton"><i title="remove" onClick={() => this.onClickUnsubscribe(topic)} className="fa fa-remove" aria-hidden="true"></i></div>
204199
</li>
205200
)
206201
})
207202
}
208203
</ul>
209204
</div>
210-
<button disabled={!this.state.isConnected} onClick={this.onClickUnsubscribeAll} className="btn btn-danger btn-sm">Unsubscribe all</button>
205+
</div>
211206
</div>
212207

213208
)

0 commit comments

Comments
 (0)