TeaSpeak
/
TeaWeb
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Fixed some style bugs and permission editor bug for the native client

canary
WolverinDEV 2018-10-14 13:27:48 +02:00
parent fa60846606
commit ebf3e9f7b9
11 changed files with 215 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.travis.yml
View File

@ -9,7 +9,7 @@ jobs:
- docker images
- docker pull $DOCKER_USERNAME/teaweb:build
- docker images
- docker run --rm $DOCKER_USERNAME/teaweb /bin/bash -c /root/build_teaweb.sh travis
- docker run --rm $DOCKER_USERNAME/teaweb /bin/bash -c /root/build_teaweb.sh travis travis
if: branch = master
- stage: test teaweb
script:

4
index.php
View File

@ -72,7 +72,7 @@
?>
</x-properties>
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- Global site tag (gtag.js) - Google Analytics
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113151733-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
@ -84,7 +84,7 @@
gtag('js', new Date());
gtag('config', 'UA-113151733-4');
</script>
<script src="vendor/jquery/jquery.min.js"></script>
-->
<script>
//const exports = {};
</script>

9
shared/css/general.scss
View File

@ -79,7 +79,13 @@
}
/* Modal Body */
.modal-body:not(:empty) {padding: 2px 16px;}
.modal-body:not(:empty) {
display: flex;
padding: 2px 16px;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
}
/* Modal Footer */
.modal-footer:not(:empty) {
@ -120,6 +126,7 @@
animation-name: modalFlyIn;
animation-duration: 0.4s;
top: 10%;
max-height: 80%;
left: 0;
right: 0;

32
shared/css/modals.scss
View File

@ -140,10 +140,21 @@
}
}
.horizontal-stretch {
display: flex;
flex-grow: 1;
flex-direction: column;
}
.container-permissions {
display: flex;
height: 100%;
}
.permission-explorer {
width: 100%;
display: grid;
grid-template-rows: min-content auto;
grid-template-rows: min-content auto min-content;
grid-gap: 5px;
.bar-filter {
@ -355,15 +366,21 @@
.layout-group-server, .layout-group-channel, .layout-channel, .layout-client, .layout-client-channel {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: stretch;
& > div {
margin: 5px;
}
.list-group-server, .list-group-channel, .list-group-server-clients, .list-channel {
border: grey solid 1px;
position: relative;
width: 175px;
flex-grow: 0;
.entries {
display: table;
position: absolute;
@ -374,8 +391,6 @@
}
.list-group-server, .list-group-channel {
width: 300px;
flex-grow: 0;
border: grey solid 1px;
user-select: none;
overflow: auto;
@ -419,7 +434,6 @@
.list-group-server-clients {
flex-grow: 0;
width: 200px;
border: grey solid 1px;
}
}
@ -428,10 +442,7 @@
display: flex;
flex-direction: column;
overflow-x: scroll;
overflow-y: auto;
width: 300px;
flex-grow: 1;
overflow: auto;
.channel {
cursor: pointer;
@ -455,6 +466,7 @@
.client-info {
display: flex;
flex-direction: column;
width: 200px;
& > div:not(.list-channel) {
display: grid;
@ -467,6 +479,10 @@
pointer-events: none;
}
}
.list-channel {
flex-grow: 1;
}
}
}

12
shared/css/ts/tab.scss
View File

@ -1,10 +1,14 @@
x-tab { display:none }
x-content {
width: 100%;
}
.tab {
padding: 2px;
height: 100%;
display: flex;
flex-direction: column;
display: flex;
flex-grow: 1;
}
.tab div * {
@ -18,6 +22,9 @@ x-tab { display:none }
overflow-y: auto;
height: 100%;
padding: 2px;
display: flex;
flex-grow: 1;
}
/*
@ -47,6 +54,9 @@ x-tab { display:none }
flex-direction: row;
justify-content: stretch;
width: 100%;
flex-grow: 0;
flex-shrink: 0;
}
.tab .tab-header .entry {

39
shared/js/load.ts
View File

@ -115,7 +115,7 @@ function loadDebug() {
app.type = app.Type.DEBUG;
console.log("Load for debug!");
awaitLoad(loadScripts([
load_wait_scripts([
["wasm/TeaWeb-Identity.js"],
//Load general API's
@ -170,18 +170,18 @@ function loadDebug() {
"js/client.js",
"js/chat.js",
"js/Identity.js"
]).then(() => load_wait_scripts([
"js/codec/CodecWrapper.js"
])).then(() => load_wait_scripts([
"js/main.js"
])).then(() => {
return loadScripts(["js/codec/CodecWrapper.js"]);
}).then(() => {
awaitLoad(loadScripts(["js/main.js"])).then(() => {
console.log("Loaded successfully all scripts!");
app.callbackApp();
});
console.log("Loaded successfully all scripts!");
app.callbackApp();
});
}
function awaitLoad(promises: {path: string, promise: Promise<Boolean>}[]) : Promise<Boolean> {
return new Promise<Boolean>((resolve, reject) => {
function awaitLoad(promises: {path: string, promise: Promise<Boolean>}[]) : Promise<void> {
return new Promise<void>((resolve, reject) => {
let awaiting = promises.length;
let success = true;
@ -205,6 +205,10 @@ function awaitLoad(promises: {path: string, promise: Promise<Boolean>}[]) : Prom
});
}
function load_wait_scripts(paths: (string | string[])[]) : Promise<void> {
return awaitLoad(loadScripts(paths));
}
function loadTemplates() {
//Load the templates
@ -248,6 +252,7 @@ function loadSide() {
if(window.require !== undefined) {
console.log("Loading node specific things");
const remote = require('electron').remote;
module.paths.push(remote.app.getAppPath() + "/node_modules");
module.paths.push(remote.app.getAppPath() + "/app");
module.paths.push(remote.getGlobal("browser-root") + "js/");
window.$ = require("assets/jquery.min.js");
@ -269,15 +274,17 @@ function loadSide() {
return;
}
//Load the general scripts and required scripts
(window.require !== undefined ? Promise.resolve(true) : awaitLoad(loadScripts([
["vendor/jquery/jquery.min.js"],
]))).then(() => awaitLoad(loadScripts([
(window.require !== undefined ?
Promise.resolve() :
load_wait_scripts([
"vendor/jquery/jquery.min.js"
])
).then(() => load_wait_scripts([
"vendor/jsrender/jsrender.min.js"
])).then(() => load_wait_scripts([
["vendor/bbcode/xbbcode.js"],
["https://webrtc.github.io/adapter/adapter-latest.js"]
]))).then(() => awaitLoad(loadScripts([
//["https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"]
["vendor/jsrender/jsrender.min.js"]
]))).then(() => {
])).then(() => {
//Load the teaweb scripts
loadScript("js/proto.js").then(loadDebug).catch(loadRelease);
//Load the teaweb templates

19
shared/js/main.ts
View File

@ -49,14 +49,14 @@ function setup_close() {
};
}
function main() {
function setup_jsrender() : boolean {
if(!js_render) {
displayCriticalError("Missing jsrender extension!");
return;
return false;
}
if(!js_render.views) {
displayCriticalError("Missing jsrender viewer extension!");
return;
return false;
}
js_render.views.settings.allowCode(true);
js_render.views.tags("rnd", (argument) => {
@ -65,6 +65,19 @@ function main() {
return (Math.round(Math.random() * (min + max + 1) - min)).toString();
});
$(".jsrender-template").each((idx, _entry) => {
if(!js_render.templates(_entry.id, _entry.innerHTML)) { //, _entry.innerHTML
console.error("Failed to cache template " + _entry.id + " for js render!");
} else
console.debug("Successfully loaded jsrender template " + _entry.id);
});
return true;
}
function main() {
if(!setup_jsrender()) return;
//http://localhost:63343/Web-Client/index.php?_ijt=omcpmt8b9hnjlfguh8ajgrgolr&default_connect_url=true&default_connect_type=teamspeak&default_connect_url=localhost%3A9987&disableUnloadDialog=1&loader_ignore_age=1
AudioController.initializeAudioController();
if(!TSIdentityHelper.setup()) { console.error("Could not setup the TeamSpeak identity parser!"); return; }

8
shared/js/proto.ts
View File

@ -112,8 +112,12 @@ if(typeof ($) !== "undefined") {
if(this.render) {
result = $(this.render(values));
} else {
result = window.jsrender.templates("xxx", this.html())
result = window.jsrender.render["xxx"](values);
const template = window.jsrender.render[this.attr("id")];
/*
result = window.jsrender.templates("tmpl_permission_entry", $("#tmpl_permission_entry").html());
result = window.jsrender.templates("xxx", this.html());
*/
result = template(values);
result = $(result);
}
result.find("node").each((index, element) => {

40
shared/js/ui/modal/ModalPermissionEdit.ts
View File

@ -37,41 +37,6 @@ namespace Modals {
entry.permission_name = perm.name;
entry.unset = true;
group_entry.entries.push(entry);
{
let tag: JQuery<HTMLElement>;
if(perm.name.startsWith("b_")) {
tag = $.spawn("label").addClass("checkbox");
$.spawn("input").attr("type", "checkbox").appendTo(tag);
$.spawn("span").addClass("checkmark").appendTo(tag);
} else {
tag = $.spawn("input");
tag.attr("type", "number");
tag.attr("min-value", -1);
tag.attr("max-value", 9999999999); //TODO use there may the grant permission
}
root_entry[perm.name + "_value"] = tag;
}
{
let tag = $.spawn("label").addClass("checkbox");
$.spawn("input").attr("type", "checkbox").appendTo(tag);
$.spawn("span").addClass("checkmark").appendTo(tag);
root_entry[perm.name + "_skip"] = tag;
}
{
let tag = $.spawn("label").addClass("checkbox");
$.spawn("input").attr("type", "checkbox").appendTo(tag);
$.spawn("span").addClass("checkmark").appendTo(tag);
root_entry[perm.name + "_negate"] = tag;
}
{
let tag = $.spawn("input");
tag.attr("type", "number");
tag.attr("min-value", -1);
tag.attr("max-value", 9999999999);
root_entry[perm.name + "_grant"] = tag;
}
//{{>permission_name}}_value
}
};
groups.forEach(entry => insert_group(entry));
@ -115,7 +80,8 @@ namespace Modals {
return tag;
},
width: "90%"
width: "90%",
height: "80%"
});
connectModal.htmlTag.find(".btn_close").on('click', () => {
@ -152,7 +118,7 @@ namespace Modals {
function make_permission_editor(tag: JQuery, default_number: number, cb_edit: (type: PermissionInfo, value?: number, skip?: boolean, negate?: boolean) => Promise<boolean>, cb_grant_edit: (type: PermissionInfo, value?: number) => Promise<boolean>) {
tag = tag.hasClass("permission-explorer") ? tag : tag.find(".permission-explorer");
const list = tag.find(".list");
list.css("max-height", document.body.clientHeight * .7)
//list.css("max-height", document.body.clientHeight * .7)
list.find(".arrow").each((idx, _entry) => {
let entry = $(_entry);

7
shared/js/utils/modal.ts
View File

@ -58,7 +58,7 @@ class ModalProperties {
return this;
}
width: number | string = "60%";
hight: number | string = "auto";
height: number | string = "auto";
closeable: boolean = true;
@ -92,7 +92,10 @@ class Modal {
let content = $.spawn("div");
content.addClass("modal-content");
content.css("width", this.properties.width);
if(this.properties.width)
content.css("width", this.properties.width);
if(this.properties.height)
content.css("height", this.properties.height);
let header = ModalFunctions.divify(ModalFunctions.jqueriefy(this.properties.header)).addClass("modal-header");
if(this.properties.closeable) header.append("<span class=\"close\">&times;</span>");

199
templates.html
View File

@ -6,7 +6,7 @@
</head>
<body>
<!-- main frame -->
<script id="tmpl_main" type="text/html">
<script class="jsrender-template" id="tmpl_main" type="text/html">
<div class="app-container">
<div class="app">
<!-- Container -->
@ -98,7 +98,7 @@
<div style="height: 100px"></div>
</script>
<!-- Template for the connect modal -->
<script id="tmpl_connect" type="text/html">
<script class="jsrender-template" id="tmpl_connect" type="text/html">
<div style="margin-top: 5px;">
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between">
<div style="width: 68%; margin-bottom: 5px">
@ -154,7 +154,7 @@
</script>
<!-- Template for chennel create & edit-->
<script id="tmpl_channel_edit" type="text/html">
<script class="jsrender-template" id="tmpl_channel_edit" type="text/html">
<div class="align_column general_properties">
<div class="properties">
<a class="key">Name:</a>
@ -322,7 +322,7 @@
</x-entry>
</x-tab>
</script>
<script id="tmpl_server_edit" type="text/html">
<script class="jsrender-template" id="tmpl_server_edit" type="text/html">
<div class="align_column properties_general server_properties">
<div class="properties">
<a class="key">Name:</a>
@ -554,7 +554,7 @@
</script>
<!-- Template for the settings -->
<script id="tmpl_settings" type="text/html">
<script class="jsrender-template" id="tmpl_settings" type="text/html">
<x-tab>
<x-entry>
<x-tag>General</x-tag>
@ -607,13 +607,13 @@
</x-entry>
</x-tab>
</script>
<script id="tmpl_change_volume" type="text/html">
<script class="jsrender-template" id="tmpl_change_volume" type="text/html">
<div style="display: flex; justify-content: center; vertical-align: center">
<input type="range" min="0" max="200" value="100" class="volume_slider" style="width: 100%">
<div class="display_volume" style="width: 60px; align-self: center; text-align: center">&plusmn;0 %</div>
</div>
</script>
<script id="tmpl_client_ban" type="text/html">
<script class="jsrender-template" id="tmpl_client_ban" type="text/html">
<div class="align_column">
<div class="align_column" style="margin: 5px">
<a>Name:</a>
@ -640,7 +640,7 @@
</script>
<!-- Permission overview -->
<script id="tmpl_server_permissions" type="text/html">
<script class="jsrender-template" id="tmpl_server_permissions" type="text/html">
<x-tab>
<x-entry>
<x-tag>Server Groups</x-tag>
@ -649,7 +649,9 @@
<div class="list-group-server">
<div class="entries"></div>
</div>
<node key="permissions_group_server"/>
<div class="horizontal-stretch">
<node key="permissions_group_server"/>
</div>
<div class="list-group-server-clients"></div>
</div>
</x-content>
@ -661,7 +663,9 @@
<div class="list-group-channel">
<div class="entries"></div>
</div>
<node key="permissions_group_channel"/>
<div class="horizontal-stretch">
<node key="permissions_group_channel"/>
</div>
</div>
</x-content>
</x-entry>
@ -672,7 +676,9 @@
<div class="list-channel">
<div class="entries"></div>
</div>
<node key="permissions_channel"/>
<div class="horizontal-stretch">
<node key="permissions_channel"/>
</div>
</div>
</x-content>
</x-entry>
@ -697,7 +703,9 @@
<input class="client-dbid">
</div>
</div>
<node key="permissions_client"/>
<div class="horizontal-stretch">
<node key="permissions_client"/>
</div>
</div>
</x-content>
</x-entry>
@ -726,13 +734,15 @@
<div class="entries"></div>
</div>
</div>
<node key="permissions_client_channel"/>
<div class="horizontal-stretch">
<node key="permissions_client_channel"/>
</div>
</div>
</x-content>
</x-entry>
</x-tab>
</script>
<script id="tmpl_server_group_assignment" type="text/html">
<script class="jsrender-template" id="tmpl_server_group_assignment" type="text/html">
<div class="group-assignment-list">
<a>Changing groups of <b>{{>client_name}}</b></a>
<div class="group-list">
@ -750,82 +760,105 @@
</div>
</script>
<script id="tmpl_permission_explorer" type="text/html">
<div class="align_row permission-explorer">
<div class="bar-filter">
<div><a>Filter:</a></div>
<div><input type="text" class="filter-input"></div>
<div><input type="checkbox" class="filter-granted"><a>Show granted permissions only</a></div>
</div>
<div class="list">
<div class="entry header">
<div>Permission Name</div>
<div>Value</div>
<div>Skip</div>
<div>Negate</div>
<div>Granted</div>
</div>
<div class="entries">
{{for permissions tmpl="#tmpl_permission_entry"/}}
</div>
<!--
<div class="entry">
<div>this_is_a_test_permission</div>
<div>value</div>
<div>skip</div>
<div>negate</div>
<div>granted</div>
</div>
<div class="entry group">
<div class="title"><div class="arrow right"></div><a>Test group</a></div>
<div class="group-entries">
<div class="entry">
<div>Grouped entry A</div>
<div>value</div>
<div>skip</div>
<div>negate</div>
<div>granted</div>
</div>
<div class="entry">
<div>Grouped entry B</div>
<div>value</div>
<div>skip</div>
<div>negate</div>
<div>granted</div>
</div>
</div>
</div>
-->
<div class="overlay-disabled"></div>
</div>
<div>
<button class="button-update"><div class="icon client-check_update"></div> Update</button>
</div>
</div>
</script>
<script id="tmpl_permission_entry" type="text/html">
{{if type == "entry"}}
<script class="jsrender-template" id="tmpl_permission_entry" type="text/html">
{{if type == "entry"}}
<div class="entry {{if unset}}unset{{/if}} permission {{>permission_name}}">
<div class="permission-name filter-key">{{>permission_name}}</div>
<div class="permission-value"><node key="{{>permission_name}}_value"></node></div>
<div class="permission-skip"><node key="{{>permission_name}}_skip"></node></div>
<div class="permission-negate"><node key="{{>permission_name}}_negate"></node></div>
<div class="permission-grant"><node key="{{>permission_name}}_grant"></node></div>
<div class="permission-value">
{{if permission_name.startsWith("b_") }}
<label class="checkbox">
<input type="checkbox">
<span class="checkmark"></span>
</label>
{{else}}
<input type="number" min-value="-1" max-value="9999999999" />
{{/if}}
</div>
<div class="permission-skip">
<label class="checkbox">
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="permission-negate">
<label class="checkbox">
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="permission-grant">
<input type="number" min-value="-1" max-value="9999999999" />
</div>
</div>
{{else}}
{{else}}
<div class="entry group">
<div class="title"><div class="arrow down"></div><a>{{>name}}</a></div>
<div class="group-entries">
{{for entries tmpl="#tmpl_permission_entry"/}}
{{for entries tmpl="tmpl_permission_entry"/}}
</div>
</div>
{{/if}}
</script>
<script class="jsrender-template" id="tmpl_permission_explorer" type="text/html">
<div class="container-permissions">
<div class="align_row permission-explorer">
<div class="bar-filter">
<div><a>Filter:</a></div>
<div><input type="text" class="filter-input"></div>
<div><input type="checkbox" class="filter-granted"><a>Show granted permissions only</a></div>
</div>
<div class="list">
<div class="entry header">
<div>Permission Name</div>
<div>Value</div>
<div>Skip</div>
<div>Negate</div>
<div>Granted</div>
</div>
<div class="entries">
{{for permissions tmpl="tmpl_permission_entry" /}}
</div>
<!--
<div class="entry">
<div>this_is_a_test_permission</div>
<div>value</div>
<div>skip</div>
<div>negate</div>
<div>granted</div>
</div>
<div class="entry group">
<div class="title"><div class="arrow right"></div><a>Test group</a></div>
<div class="group-entries">
<div class="entry">
<div>Grouped entry A</div>
<div>value</div>
<div>skip</div>
<div>negate</div>
<div>granted</div>
</div>
<div class="entry">
<div>Grouped entry B</div>
<div>value</div>
<div>skip</div>
<div>negate</div>
<div>granted</div>
</div>
</div>
</div>
-->
<div class="overlay-disabled"></div>
</div>
<div>
<button class="button-update"><div class="icon client-check_update"></div> Update</button>
</div>
</div>
</div>
{{/if}}
</script>
<!-- Music interface -->
<script id="tmpl_music_frame" type="text/html">
<script class="jsrender-template" id="tmpl_music_frame" type="text/html">
<!-- First we want to define some variables if not defined yet. -->
{{if !thumbnail}}
{{*
@ -900,14 +933,14 @@
</div>
</div>
</script>
<script id="tmpl_music_frame_empty" type="text/html">
<script class="jsrender-template" id="tmpl_music_frame_empty" type="text/html">
<div class="music-wrapper empty">
<img src="img/music/empty_disk.svg">
<a>Not playing any music</a>
</div>
</script>
<script id="tmpl_selected_client" type="text/html">
<script class="jsrender-template" id="tmpl_selected_client" type="text/html">
<table class="select_info_table">
<tr>
<td>Name:</td>
@ -1018,7 +1051,7 @@
</div>
{{/if}}
</script>
<script id="tmpl_selected_music" type="text/html">
<script class="jsrender-template" id="tmpl_selected_music" type="text/html">
<table class="select_info_table">
<tr>
<td>Name:</td>
@ -1077,7 +1110,7 @@
<node key="music_player"/>
</div>
</script>
<script id="tmpl_selected_server" type="text/html">
<script class="jsrender-template" id="tmpl_selected_server" type="text/html">
<div class="select_server">
<table class="select_info_table">
<tr>
@ -1117,7 +1150,7 @@
<button class="button-update btn_update">Update info</button>
</div>
</script>
<script id="tmpl_selected_channel" type="text/html">
<script class="jsrender-template" id="tmpl_selected_channel" type="text/html">
<table class="select_info_table">
<tr>
<td>Name:</td>