Skip to content

Commit

Permalink
collector: webui: add tabs; changing fraction
Browse files Browse the repository at this point in the history
  • Loading branch information
@lynxzp
lynxzp committed Nov 24, 2021
1 parent 540a4bd commit 0bde89f
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 51 deletions.
2 changes: 1 addition & 1 deletion collector/sources/pkg/ucma/reader.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ func (ucma *Ucma) request() {
}

func (ucma *Ucma) requestProxy(addr uint16, dataP *int32) {
ucma.Requests++
if len(ucma.IP) == 0 {
return
}
Expand All @@ -60,6 +59,7 @@ func (ucma *Ucma) requestProxy(addr uint16, dataP *int32) {
if ucma.DataPerfAddr == 0 {
return
}
ucma.Requests++
var err error
ucma.conn, err = net.Dial("tcp", ucma.IP+":"+ucma.Port)
if err != nil {
Expand Down
65 changes: 54 additions & 11 deletions collector/sources/pkg/webui/www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,61 @@
<title>Collector</title>
</head>
<body>
<div class="rows">
<div>Название</div>
<div>Накопление</div>
<div>Производительность</div>
<div>Адрес производ.</div>
<div>IP адресс</div>
<div>RS-485 адрес</div>
<div>К-во запросов</div>
<div>К-во ответов</div>
<div class="tab">
<button class="tablinks" onclick="selectTab('vesi')">Весы</button>
<button class="tablinks" onclick="selectTab('tseha')">Цеха</button>
<button class="tablinks" onclick="selectTab('users')">Пользователи</button>
<button class="tablinks" onclick="selectTab('logs')">Журнал</button>
</div>
<div class="row"></div>
<div class="row"></div>

<div id="vesi" class="tabcontent">
<div class="rows">
<div>Название</div>
<div>Фракция</div>
<div>Накопление</div>
<div>Производительность</div>
<div>Адрес производ.</div>
<div>IP адресс</div>
<div>RS-485 адрес</div>
<div>К-во запросов</div>
<div>К-во ответов</div>
</div>
</div>

<div id="tseha" class="tabcontent">
<p><h3>ДЦ-1</h3></p>
<table id="tseh1"><tbody><tr><th rowspan='2'>№ ЛК</th><th rowspan='2'>Фракция</th><th colspan='6'>Количество продукции</th></tr>
<tr><th>1 смена</th><th>2 смена</th><th>3 смена</th><th>За сутки</th><th>С начала месяца</th><th>С начала года</th></tr>
<tr><td>ЛК-6</td><td> 0*40</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>ЛК-6</td><td> 0*70</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>ЛК-6</td><td> 20*40</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>ЛК-6</td><td> 20*70</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>ЛК-7</td><td> 5*10</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>ЛК-8</td><td> 10*20</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>ЛК-8</td><td> 5*20</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>ЛК-9</td><td>песок(0-5)</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
</tbody></table>
<p><h3>ДЦ-2</h3></p>
<table id="tseh2"><tbody><tr><th rowspan='2'>№ ЛК</th><th rowspan='2'>Фракция</th><th colspan='6'>Количество продукции</th></tr>
<tr><th>1 смена</th><th>2 смена</th><th>3 смена</th><th>За сутки</th><th>С начала месяца</th><th>С начала года</th></tr>
<tr><td>ЛК-14</td><td> 5*10</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>ЛК-15</td><td> 10*20</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>ЛК-17</td><td> 5*20</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
<tr><td>ЛК-4 </td><td>песок(0*5)</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
</tbody></table>
</div>

<div id="users" class="tabcontent">
<h3>На данный момент пользователей нет, все могут изменить все</h3>
</div>

<div id="logs" class="tabcontent">
<h3>Журнал работы весов</h3>
<div></div>
<h3>Журнал смены фракции</h3>
<div></div>
</div>

<footer></footer>
</body>
</html>
38 changes: 37 additions & 1 deletion collector/sources/pkg/webui/www/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ div {
}
.rows {
display: grid;
grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content;
grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content max-content;
background: gainsboro;
}
.table {
Expand Down Expand Up @@ -39,4 +39,40 @@ button{
.dropdown input {
position: absolute;
width: calc(100% - 20px);
}

/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
87 changes: 49 additions & 38 deletions collector/sources/pkg/webui/www/update.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
window.setInterval(update,200)
// window.setInterval(update,200)

let rows
const nums = 10
let names=[['ЛК-4', 'песок(0*5)'], ['ЛК-6', '0*40', '0*70', '20*40', '20*70'], ['ЛК-7', '5*10'], ['ЛК-8', '10*20', '5*20'],
['ЛК-9', 'песок(0-5)'], ['ЛК-14', '5*10'], ['ЛК-15', '10*20'], ['ЛК-17', '5*20']]

window.onload = function () {
rows = document.getElementsByClassName("rows")[0]
for(let i=0;i<nums;i++) {
addrow(i)
}
names.forEach((element, index) => {addrow(element, index)})
}

function update() {
let a = ""
for(let i=0;i<nums;i++) {

}
ajaxRequest()
}

Expand All @@ -32,7 +27,7 @@ function ajaxRequest() {

let params = "?"
let separator = ""
for(let i=0;i<nums;i++) {
for(let i=0;i<names.length;i++) {
params += separator
separator = "&"
let id = "dtype"+i
Expand All @@ -52,7 +47,7 @@ function ajaxUpdate() {
document.getElementsByTagName("footer")[0].innerText=""
let params = JSON.parse(httpRequest.responseText)
console.log(params)
for(let i=0;i<nums;i++){
for(let i=0;i<names.length;i++){
let DataPerfValue = params[i].DataPerfValue / 10
let DataAccumValue = params[i].DataAccumValue
if(DataPerfValue>=0) {
Expand All @@ -71,33 +66,44 @@ function ajaxUpdate() {
}
}

function addrow(i) {
function addrow(name, i) {
// name
let d = document.createElement("div");
d.setAttribute('id', 'name'+i)
d.innerHTML = "<input type='text' maxlength='25' size='25' value='ДЦ-"+(i+1)+"'>"
d.innerHTML = "<input type='text' maxlength='10' size='1' value='"+name[0]+"'>"
rows.appendChild(d)
// fraction
d = document.createElement("div");
d.setAttribute('id', 'fraction'+i)
d.className+='dropdown'
let fractions = name.slice(1, name.length)
let fractions_select = ''
fractions.forEach((fr) => {fractions_select+='<option>'+fr+'</option>'})
d.innerHTML = "<input type='text'>" +
"<select onchange='this.previousElementSibling.value=this.value; this.previousElementSibling.focus()' autofocus='true'>" +
fractions_select + fractions[0] +
"</select>\n"
d.value=fractions[0]
rows.appendChild(d)
document.getElementById('fraction'+i).getElementsByTagName("input")[0].value=fractions[0]
// DataAccumValue
d = document.createElement("div");
d.setAttribute('id', 'DataAccumValue'+i)
d.innerHTML = "-2"
rows.appendChild(d)
// DataPerfValue
d = document.createElement("div");
d.setAttribute('id', 'DataPerfValue'+i)
d.innerHTML = "-2"
rows.appendChild(d)
// type
d = document.createElement("div");
d.setAttribute('id', 'dtype'+i)
d.className+='dropdown'
d.innerHTML = "<input type=\"text\" />\n" +
"<select onchange=\"this.previousElementSibling.value=this.value; this.previousElementSibling.focus()\">\n" +
"<option>0x?? Свое значение</option>\n" +
// "<option>0x60 Накопление</option>\n" +
"<option>0x5d Производительность v2</option>\n" +
"<option>0x3f Производительность v1</option>\n" +
"</select>\n"
d.innerHTML = "<input type='text' />" +
"<select onchange='this.previousElementSibling.value=this.value; this.previousElementSibling.focus()'>" +
"<option>0x?? Свое значение</option>" +
"<option>0x5d Производительность v2</option>" +
"<option>0x3f Производительность v1</option>" + "sdsdsd" +
"</select>"
rows.appendChild(d)
// ip address
d = document.createElement("div");
Expand All @@ -106,31 +112,36 @@ function addrow(i) {
rows.appendChild(d)
// rs-485 address
d = document.createElement("div");
d.setAttribute('id', 'rs485addr'+i)
d.setAttribute('id', 'rs485adErrordr'+i)
d.innerHTML = "<input type=\"text\" minlength=\"1\" maxlength=\"3\" size=\"3\" pattern=\"^\\d{1,3}$\">"
rows.appendChild(d)
// Requests
d = document.createElement("div");
d.setAttribute('id', 'requests'+i)
d.innerHTML = "-2"
rows.appendChild(d)
// Responses
d = document.createElement("div");
d.setAttribute('id', 'responses'+i)
d.innerHTML = "-2"
rows.appendChild(d)
// Table
d = document.createElement("div");
d.setAttribute('id', 'table'+i)
d.setAttribute('class', 'table')
d.innerHTML = tableHtml
rows.appendChild(d)
}

const tableHtml = "<table><tbody><tr><th rowspan='2'>№ ЛК</th><th rowspan='2'>Фракция</th><th colspan='6'>Количество продукции</th></tr>" +
"<tr><th>1 смена</th><th>2 смена</th><th>3 смена</th><th>За сутки</th><th>С начала месяца</th><th>С начала года</th></tr>" +
"<tr><td>-</td><td>20x40</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>" +
"<tr><td>-</td><td>5x10</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>" +
"<tr><td>-</td><td>10x20</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>" +
"<tr><td>-</td><td>отсев</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>" +
"</tbody></table>"
function selectTab(tabName) {
// Declare all variables
let i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
event.currentTarget.className += " active";
}

0 comments on commit 0bde89f

Please sign in to comment.