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

Updating stuff

Browse source
This commit is contained in:
WolverinDEV 2018-06-24 13:38:53 +02:00
parent a3acf09bc3
commit a733779537
5 changed files with 122 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
css/ts/chat.css
View file

@ -99,8 +99,8 @@
display:inline-block;
border: solid 1px #000;
height: 18px;
min-height: 18px;
height: 22px;
min-height: 22px;
max-height: 80px;
overflow-y: auto;
resize: vertical;

22
js/main.ts
View file

@ -18,8 +18,13 @@ let forumIdentity: TeaForumIdentity;
function main() {
$.views.settings.allowCode(true);
//localhost:63343/Web-Client/index.php?disableUnloadDialog=1&default_connect_type=forum&default_connect_url=localhost
//disableUnloadDialog=1&default_connect_type=forum&default_connect_url=localhost&loader_ignore_age=1
$.views.tags("rnd", (argument) => {
let min = parseInt(argument.substr(0, argument.indexOf('~')));
let max = parseInt(argument.substr(argument.indexOf('~') + 1));
return (Math.round(Math.random() * (min + max + 1) - min)).toString();
});
//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; }
@ -69,10 +74,15 @@ function main() {
}
/*
$("#music-test").replaceWith($("#tmpl_music_frame_empty").tmpl({
thumbnail: "img/loading_image.svg"
}));
*/
let tag = $("#tmpl_music_frame").renderTag({
//thumbnail: "img/loading_image.svg"
});
tag.find(".timeline .slider").on('mousedown', () => {
});
$("#music-test").replaceWith(tag);
//Modals.spawnSettingsModal();
/*

122
js/ui/frames/SelectedItemInfo.ts
View file

@ -26,19 +26,30 @@ abstract class InfoManagerBase {
}
abstract class InfoManager<T> extends InfoManagerBase {
abstract createFrame(object: T, html_tag: JQuery<HTMLElement>);
protected handle?: InfoBar<undefined>;
createFrame<_>(handle: InfoBar<_>, object: T, html_tag: JQuery<HTMLElement>) {
this.handle = handle as InfoBar<undefined>;
}
abstract updateFrame(object: T, html_tag: JQuery<HTMLElement>);
finalizeFrame(object: T, frame: JQuery<HTMLElement>) {
this.resetIntervals();
this.resetTimers();
this.handle = undefined;
}
protected triggerUpdate() {
if(this.handle)
this.handle.update();
}
}
class InfoBar {
class InfoBar<AvailableTypes = ServerEntry | ChannelEntry | ClientEntry | undefined> {
readonly handle: TSClient;
private current_selected?: ServerEntry | ChannelEntry | ClientEntry;
private current_selected?: AvailableTypes;
private _htmlTag: JQuery<HTMLElement>;
private current_manager: InfoManagerBase = undefined;
@ -48,31 +59,16 @@ class InfoBar {
this.handle = client;
this._htmlTag = htmlTag;
this.managers.push(new MusicInfoManager());
this.managers.push(new ClientInfoManager());
this.managers.push(new ChannelInfoManager());
this.managers.push(new ServerInfoManager());
//TODO music client
/*
this._htmlTag.append("Im a music bot!");
let frame = $("#tmpl_music_frame" + (this.current_selected.properties.music_track_id == 0 ? "_empty" : "")).tmpl({
thumbnail: "img/loading_image.svg"
}).css("align-self", "center");
if(this.current_selected.properties.music_track_id == 0) {
} else {
}
this._htmlTag.append(frame);
*/
}
setCurrentSelected<T extends ServerEntry | ChannelEntry | ClientEntry | undefined>(entry: T) {
setCurrentSelected(entry: AvailableTypes) {
if(this.current_selected == entry) return;
if(this.current_manager) {
(this.current_manager as InfoManager<undefined>).finalizeFrame.call(this.current_manager, this.current_selected, this._htmlTag);
(this.current_manager as InfoManager<AvailableTypes>).finalizeFrame(this.current_selected, this._htmlTag);
this.current_manager = null;
this.current_selected = null;
}
@ -88,7 +84,7 @@ class InfoBar {
console.log("Using info manager: %o", this.current_manager);
if(this.current_manager)
(this.current_manager as InfoManager<undefined>).createFrame.call(this.current_manager, this.current_selected, this._htmlTag);
(this.current_manager as InfoManager<AvailableTypes>).createFrame(this, this.current_selected, this._htmlTag);
}
get currentSelected() {
@ -97,7 +93,7 @@ class InfoBar {
update(){
if(this.current_manager && this.current_selected)
(this.current_manager as InfoManager<undefined>).updateFrame.call(this.current_manager, this.current_selected, this._htmlTag);
(this.current_manager as InfoManager<AvailableTypes>).updateFrame(this.current_selected, this._htmlTag);
}
}
@ -106,7 +102,9 @@ class ClientInfoManager extends InfoManager<ClientEntry> {
return typeof object == "object" && object instanceof ClientEntry;
}
createFrame(client: ClientEntry, html_tag: JQuery<HTMLElement>) {
createFrame<_>(handle: InfoBar<_>, client: ClientEntry, html_tag: JQuery<HTMLElement>) {
super.createFrame(handle, client, html_tag);
client.updateClientVariables();
this.updateFrame(client, html_tag);
}
@ -161,7 +159,9 @@ class ClientInfoManager extends InfoManager<ClientEntry> {
}
class ServerInfoManager extends InfoManager<ServerEntry> {
createFrame(server: ServerEntry, html_tag: JQuery<HTMLElement>) {
createFrame<_>(handle: InfoBar<_>, server: ServerEntry, html_tag: JQuery<HTMLElement>) {
super.createFrame(handle, server, html_tag);
if(server.shouldUpdateProperties()) server.updateProperties();
this.updateFrame(server, html_tag);
}
@ -187,31 +187,27 @@ class ServerInfoManager extends InfoManager<ServerEntry> {
}, 1000));
//TODO update button
/*
let requestUpdate = $.spawn("button");
requestUpdate.css("min-height", "16px");
requestUpdate.css("bottom", 0);
requestUpdate.text("update info");
if(this.current_selected.shouldUpdateProperties())
requestUpdate.css("color", "green");
else {
requestUpdate.attr("disabled", "true");
requestUpdate.css("color", "red");
}
this._htmlTag.append(requestUpdate);
requestUpdate.css("min-height", "16px");
requestUpdate.css("bottom", 0);
requestUpdate.text("update info");
if(server.shouldUpdateProperties())
requestUpdate.css("color", "green");
else {
requestUpdate.attr("disabled", "true");
requestUpdate.css("color", "red");
}
html_tag.append(requestUpdate);
const _server : ServerEntry = this.current_selected;
const _this = this;
requestUpdate.click(function () {
_server.updateProperties();
_this.buildBar();
});
this.timers.push(setTimeout(function () {
requestUpdate.css("color", "green");
requestUpdate.removeAttr("disabled");
}, _server.nextInfoRequest - new Date().getTime()));
*/
requestUpdate.click(() => {
server.updateProperties();
this.triggerUpdate();
});
this.registerTimer(setTimeout(function () {
requestUpdate.css("color", "green");
requestUpdate.removeAttr("disabled");
}, server.nextInfoRequest - new Date().getTime()));
}
available<V>(object: V): boolean {
@ -220,7 +216,8 @@ class ServerInfoManager extends InfoManager<ServerEntry> {
}
class ChannelInfoManager extends InfoManager<ChannelEntry> {
createFrame(channel: ChannelEntry, html_tag: JQuery<HTMLElement>) {
createFrame<_>(handle: InfoBar<_>, channel: ChannelEntry, html_tag: JQuery<HTMLElement>) {
super.createFrame(handle, channel, html_tag);
this.updateFrame(channel, html_tag);
}
@ -245,5 +242,32 @@ class ChannelInfoManager extends InfoManager<ChannelEntry> {
available<V>(object: V): boolean {
return typeof object == "object" && object instanceof ChannelEntry;
}
}
class MusicInfoManager extends InfoManager<MusicClientEntry> {
createFrame<_>(handle: InfoBar<_>, channel: MusicClientEntry, html_tag: JQuery<HTMLElement>) {
super.createFrame(handle, channel, html_tag);
this.updateFrame(channel, html_tag);
}
updateFrame(bot: MusicClientEntry, html_tag: JQuery<HTMLElement>) {
html_tag.append("Im a music bot!");
let frame = $("#tmpl_music_frame" + (bot.properties.music_track_id == 0 ? "_empty" : "")).renderTag({
thumbnail: "img/loading_image.svg"
}).css("align-self", "center");
if(bot.properties.music_track_id == 0) {
} else {
}
html_tag.append(frame);
}
available<V>(object: V): boolean {
return typeof object == "object" && object instanceof MusicClientEntry;
}
}

2
js/ui/modal/ModalConnect.ts
View file

@ -9,7 +9,7 @@ namespace Modals {
return header;
},
body: function () {
let tag = $("#tmpl_connect").contents().clone();
let tag = $("#tmpl_connect").renderTag();
let updateFields = function () {
if(connectIdentity) tag.find(".connect_nickname").attr("placeholder", connectIdentity.name());

93
templates.html
View file

@ -14,27 +14,26 @@
</head>
<body>
<!-- Template for chennel create & edit-->
<template id="tmpl_channel_edit">
<script id="tmpl_channel_edit" type="text/html">
<div class="align_column channel_general_properties">
<div class="align_row property_entry">
<a class="key">Name:</a>
<input class="value channel_name" value="${channel_name}"/>
<input class="value channel_name" value="{{>channel_name}}"/>
</div>
<div class="align_row property_entry">
<a class="key">Password:</a>
{{if channel_flag_password == "1"}}
<input class="value channel_password" type="password" value="WolverinDEV">
{{else}}
<input class="value channel_password" type="password">
{{/if}}
<!-- Use a random id to trick the default browser password manager. (I think something like a default password is really useless and -->
<!-- Just display a random value here-->
<input class="value channel_password" type="password" id="field_channel_password_{{rnd '0~13377331'/}}" {{if channel_flag_password}} value="WolverinDEV"{{/if}}/>
</div>
<div class="align_row property_entry">
<a class="key">Topic:</a>
<input class="value channel_topic" value="${channel_topic}"/>
<input class="value channel_topic" value="{{>channel_topic}}"/>
</div>
<div class="align_row property_entry">
<a class="key">Description:</a>
<textarea class="value channel_description" style="height: 150px; resize: none">${channel_description}</textarea>
<textarea class="value channel_description" style="height: 150px; resize: none">{{>channel_description}}</textarea>
</div>
</div>
<div style="margin-bottom: 5px"></div>
@ -107,11 +106,11 @@
<x-content>TODO!</x-content>
</x-entry>
</x-tab>
</template>
</script>
<!-- Template for the connect modal -->
<template id="tmpl_connect">
<!-- Template for the connect modal -->
<script 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">
@ -153,11 +152,11 @@
<div style="background-color: red; border-radius: 1px; display: none" class="error_message"></div>
</div>
</div>
</template>
</script>
<!-- Template for the settings -->
<template id="tmpl_settings">
<script id="tmpl_settings" type="text/html">
<x-tab>
<x-entry>
<x-tag>General</x-tag>
@ -209,20 +208,20 @@
</x-content>
</x-entry>
</x-tab>
</template>
</script>
<template id="tmpl_change_volume">
<script 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>
</template>
</script>
<template id="tmpl_client_ban">
<script id="tmpl_client_ban" type="text/html">
<div class="align_column">
<div class="align_column" style="margin: 5px">
<a>Name:</a>
<input value="${client_name}" readonly>
<input value="{{>client_name}}" readonly>
</div>
<div class="align_column" style="margin: 5px">
<a>Reason:</a>
@ -242,14 +241,19 @@
</div>
</div>
</div>
</template>
</script>
<script id="tmpl_music_frame" type="text/html">
<!-- First we want to define some variables if not defined yet. -->
{{if !thumbnail}}
{{* data.thumbnail = "img/music/no_thumbnail.svg"; }}
{{/if}}
<template id="tmpl_music_frame">
<div class="music-wrapper">
<div class="container">
<div class="left">
<div class="static-card">
<img src="${thumbnail}" alt="Thumbnail" class="thumbnail">
<img src="{{:thumbnail}}" alt="Thumbnail" class="thumbnail">
</div>
</div>
<div class="right">
@ -259,7 +263,7 @@
<label class="btn-settings"><span></span></label>
</div>
<div class="flip-card">
<img src="${thumbnail}" alt="Thumbnail" class="thumbnail">
<img src="{{:thumbnail}}" alt="Thumbnail" class="thumbnail">
</div>
</div>
</div>
@ -294,7 +298,7 @@
</div>
</div>
</div>
</template>
</script>
<template id="tmpl_music_frame_empty">
<div class="music-wrapper empty">
@ -303,26 +307,6 @@
</div>
</template>
<!--
let spawnTag = (type: string, description: string) : JQuery => {
return $.spawn("div").css("display", "inline-flex")
.append($.spawn("div").addClass("icon_x32 client-" + type).css("margin-right", "5px"))
.append($.spawn("a").text(description).css("align-self", "center"));
};
if(!this.current_selected.properties.client_output_hardware)
spawnTag("hardware_output_muted", "Speakers/Headphones disabled").appendTo(this._htmlTag);
if(!this.current_selected.properties.client_input_hardware)
spawnTag("hardware_input_muted", "Microphone disabled").appendTo(this._htmlTag);
if(this.current_selected.properties.client_output_muted)
spawnTag("output_muted", "Speakers/Headphones Muted").appendTo(this._htmlTag);
if(this.current_selected.properties.client_input_muted)
spawnTag("input_muted", "Microphone Muted").appendTo(this._htmlTag);
-->
<script id="tmpl_selected_client" type="text/html">
<table class="select_info_table">
<tr>
@ -416,23 +400,7 @@
</div>
{{/if}}
</script>
<!--
let version = this.current_selected.properties.virtualserver_version;
if(version.startsWith("TeaSpeak ")) version = version.substr("TeaSpeak ".length);
this._htmlTag.append(this.createInfoTable({
"Name": this.current_selected.properties.virtualserver_name,
"Address": "unknown",
"Type": "TeaSpeak",
"Version": version + " on " + this.current_selected.properties.virtualserver_platform,
"Uptime": "<a class='uptime'>" + formatDate(this.current_selected.calculateUptime()) + "</a>",
"Current Channels": this.current_selected.properties.virtualserver_channelsonline,
"Current Clients": this.current_selected.properties.virtualserver_clientsonline,
"Current Queries": this.current_selected.properties.virtualserver_queryclientsonline
}));
-->
<script id="tmpl_selected_server" type="text/x-jsrender">
<script id="tmpl_selected_server" type="text/html">
<table class="select_info_table">
<tr>
<td>Name:</td>
@ -468,8 +436,7 @@
</tr>
</table>
</script>
<script id="tmpl_selected_channel" type="text/x-jsrender">
<script id="tmpl_selected_channel" type="text/html">
<table class="select_info_table">
<tr>
<td>Name:</td>