mirror of
https://thingvellir.net/git/overte
synced 2025-03-27 23:52:03 +01:00
Update entity list to use list.js more directly
This commit is contained in:
parent
92b99237a2
commit
d3a6a411fb
2 changed files with 33 additions and 44 deletions
|
@ -1,4 +1,3 @@
|
|||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
|
@ -14,6 +13,8 @@
|
|||
var DESC_STRING = ' ▴';
|
||||
|
||||
function loaded() {
|
||||
entityList = new List('entity-list', { valueNames: ['type', 'url']});
|
||||
entityList.clear();
|
||||
elEntityTable = document.getElementById("entity-table");
|
||||
elEntityTableBody = document.getElementById("entity-table-body");
|
||||
elRefresh = document.getElementById("refresh");
|
||||
|
@ -37,7 +38,8 @@
|
|||
|
||||
selectedEntities = selection;
|
||||
|
||||
entities[id].el.className = 'selected';
|
||||
this.className = 'selected';
|
||||
|
||||
EventBridge.emitWebEvent(JSON.stringify({
|
||||
type: "selectionUpdate",
|
||||
focus: false,
|
||||
|
@ -46,8 +48,6 @@
|
|||
}
|
||||
|
||||
function onRowDoubleClicked() {
|
||||
var id = this.dataset.entityId;
|
||||
|
||||
EventBridge.emitWebEvent(JSON.stringify({
|
||||
type: "selectionUpdate",
|
||||
focus: true,
|
||||
|
@ -60,21 +60,21 @@
|
|||
var urlParts = url.split('/');
|
||||
var filename = urlParts[urlParts.length - 1];
|
||||
|
||||
var el = document.createElement('tr');
|
||||
el.setAttribute('id', 'entity_' + id);
|
||||
el.innerHTML += "<td class='type'>" + type + "</td>";
|
||||
el.innerHTML += "<td class='url' title='" + url + "'><div class='outer'><div class='inner'>" + filename + "</div></div></td>";
|
||||
el.dataset.entityId = id;
|
||||
el.onclick = onRowClicked;
|
||||
el.ondblclick = onRowDoubleClicked;
|
||||
elEntityTableBody.appendChild(el);
|
||||
|
||||
// Add element to local dict
|
||||
entities[id] = {
|
||||
id: id,
|
||||
name: id,
|
||||
el: el,
|
||||
};
|
||||
entityList.add([{ id: id, type: type, url: filename }], function(items) {
|
||||
var el = items[0].elm;
|
||||
var id = items[0]._values.id;
|
||||
entities[id] = {
|
||||
id: id,
|
||||
name: id,
|
||||
el: el,
|
||||
};
|
||||
el.setAttribute('id', 'entity_' + id);
|
||||
el.setAttribute('title', url);
|
||||
el.dataset.entityId = id;
|
||||
el.onclick = onRowClicked;
|
||||
el.ondblclick = onRowDoubleClicked;
|
||||
el.innerHTML
|
||||
});
|
||||
|
||||
if (refreshEntityListTimer) {
|
||||
clearTimeout(refreshEntityListTimer);
|
||||
|
@ -91,10 +91,8 @@
|
|||
}
|
||||
|
||||
function clearEntities() {
|
||||
for (id in entities) {
|
||||
elEntityTableBody.removeChild(entities[id].el);
|
||||
}
|
||||
entities = {};
|
||||
entityList.clear();
|
||||
}
|
||||
|
||||
var elSortOrder = {
|
||||
|
@ -122,7 +120,6 @@
|
|||
|
||||
function refreshEntityListObject() {
|
||||
refreshEntityListTimer = null;
|
||||
entityList = new List('entity-list', { valueNames: ['type', 'url']});
|
||||
entityList.sort(currentSortColumn, { order: currentSortOrder });
|
||||
entityList.search(document.getElementById("filter").value);
|
||||
}
|
||||
|
@ -174,15 +171,6 @@
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
// var _id = 0;
|
||||
// setInterval(function() {
|
||||
// for(var i = 0; i < 2; i++) {
|
||||
// addEntity(_id, ['Model', 'Light'][i], 'http' + _id);
|
||||
// _id++;
|
||||
// }
|
||||
// }, 5000);
|
||||
setTimeout(refreshEntities, 1);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
@ -198,11 +186,16 @@
|
|||
<table id="entity-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th id="entity-type">Type <span class="sort-order" style="display: inline"> ▾</span></th>
|
||||
<th id="entity-url">URL <span class="sort-order" style="display: none"> ▾</span></th>
|
||||
<th id="entity-type" data-sort="type">Type <span class="sort-order" style="display: inline"> ▾</span></th>
|
||||
<th id="entity-url" data-sort="url">URL <span class="sort-order" style="display: none"> ▾</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list" id="entity-table-body">
|
||||
<tr>
|
||||
<td class="id" style="display: none">Type</td>
|
||||
<td class="type">Type</td>
|
||||
<td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
@ -5,9 +5,10 @@ body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
background-color: #efefef;
|
||||
background-color: rgb(76, 76, 76);
|
||||
color: rgb(204, 204, 204);
|
||||
font-family: Arial;
|
||||
font-size: 11.5px;
|
||||
font-size: 11px;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
|
@ -17,12 +18,6 @@ body {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
body.properties {
|
||||
background-color: rgb(76, 76, 76);
|
||||
color: rgb(204, 204, 204);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.selectable {
|
||||
-webkit-touch-callout: text;
|
||||
-webkit-user-select: text;
|
||||
|
@ -117,13 +112,13 @@ input.coord {
|
|||
table#entity-table {
|
||||
border-collapse: collapse;
|
||||
font-family: Sans-Serif;
|
||||
/* font-size: 12px; */
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#entity-table tr {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid rgb(63, 63, 63)
|
||||
}
|
||||
|
||||
#entity-table tr.selected {
|
||||
|
@ -140,6 +135,7 @@ table#entity-table {
|
|||
}
|
||||
|
||||
#entity-table td {
|
||||
font-size: 11px;
|
||||
border: 0px black solid;
|
||||
word-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
|
|
Loading…
Reference in a new issue