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

Implemented all channel edit tabs

Browse source
This commit is contained in:
WolverinDEV 2018-08-13 17:50:55 +02:00
parent 8e3c6fd08e
commit a629e1c6e8
5 changed files with 322 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
css/general.css
View file

@ -201,6 +201,11 @@ html {
background-color: gray;
}
fieldset {
border: unset;
display: unset;
}
.modal-head-error {
background: darkred;

84
css/modals.scss
View file

@ -13,32 +13,16 @@
width: 100%;
}
.general_properties, .properties_general {
.general_properties, .properties_general, .server_properties, .properties_messages {
width: 100%;
.group_box {
margin-top: 5px;
/*
.slots {
width: 100%;
display: inline-flex;
flex-direction: row;
* {
display: inline-flex;
}
.maximum, .reserved {
a {
width: 140px;
}
input {
width: 100px;
margin-right: 20px;
}
&:first-of-type {
margin-top: 0px;
}
}
*/
}
.input_error {
@ -78,14 +62,6 @@
.container {
padding: 6px;
}
.group_box {
margin-top: 5px;
&:first-of-type {
margin-top: 0px;
}
}
}
@ -96,6 +72,7 @@
.group_box {
display: grid;
grid-template-rows: min-content;
.header {
float: left;
@ -112,4 +89,53 @@
.container {
margin: 2px;
}
/* Channel edit/create modal */
.settings_audio {
display: grid;
grid-template-columns: 40% 60%;
grid-gap: 10px;
.custom {
display: grid;
grid-template-columns: min-content auto;
grid-template-rows: repeat(auto-fill, min-content);
grid-column-gap: 5px;
select {
height: fit-content;
}
.quality {
display: inline-grid;
grid-template-columns: auto min-content;
grid-column-gap: 5px;
}
}
}
.settings_advanced {
display: grid;
grid-template-columns: repeat(auto-fill, max-content);
grid-template-rows: repeat(auto-fill, max-content);
grid-gap: 5px;
> div:first-of-type {
grid-column: auto / span 2;
}
.max_limited {
width: 100%;
display: inline-flex;
input[type="number"] {
width: 75px;
}
}
.group_box {
fieldset, fieldset > div {
width: 100%;
}
}
}

7
js/ui/channel.ts
View file

@ -17,6 +17,7 @@ namespace ChannelType {
class ChannelProperties {
channel_order: number = 0;
channel_name: string = "";
channel_name_phonetic: string = "";
channel_topic: string = "";
channel_password: string = "";
@ -38,7 +39,11 @@ class ChannelProperties {
channel_flag_maxfamilyclients_inherited: boolean = false;
channel_flag_maxfamilyclients_unlimited: boolean = false;
channel_icon_id: number;
channel_icon_id: number = 0;
channel_delete_delay: number = 0;
//Only after request
channel_description: string = "";
}
class ChannelEntry {

155
js/ui/modal/ModalCreateChannel.ts
View file

@ -33,6 +33,8 @@ namespace Modals {
applyGeneralListener(properties, modal.htmlTag.find(".general_properties"), modal.htmlTag.find(".button_ok"), !channel);
applyStandardListener(properties, modal.htmlTag.find(".settings_standard"), modal.htmlTag.find(".button_ok"), parent, !channel);
applyPermissionListener(properties, modal.htmlTag.find(".settings_permissions"), modal.htmlTag.find(".button_ok"), permissions, channel);
applyAudioListener(properties, modal.htmlTag.find(".settings_audio"), modal.htmlTag.find(".button_ok"), channel);
applyAdvancedListener(properties, modal.htmlTag.find(".settings_advanced"), channel);
let updated: PermissionValue[] = [];
modal.htmlTag.find(".button_ok").click(() => {
@ -205,4 +207,157 @@ namespace Modals {
});
} else apply_permissions([]);
}
function applyAudioListener(properties: ChannelProperties, tag: JQuery, button: JQuery, channel?: ChannelEntry) {
let update_template = () => {
let codec = properties.channel_codec;
if(!codec && channel)
codec = channel.properties.channel_codec;
if(!codec) return;
let quality = properties.channel_codec_quality;
if(!quality && channel)
quality = channel.properties.channel_codec_quality;
if(!quality) return;
if(codec == 4 && quality == 4)
tag.find("input[name=\"voice_template\"][value=\"voice_mobile\"]").prop("checked", true);
else if(codec == 4 && quality == 6)
tag.find("input[name=\"voice_template\"][value=\"voice_desktop\"]").prop("checked", true);
else if(codec == 5 && quality == 6)
tag.find("input[name=\"voice_template\"][value=\"music\"]").prop("checked", true);
else
tag.find("input[name=\"voice_template\"][value=\"custom\"]").prop("checked", true);
};
let change_codec = codec => {
if(properties.channel_codec == codec) return;
tag.find(".voice_codec option").prop("selected", false).eq(codec).prop("selected", true);
properties.channel_codec = codec;
update_template();
};
let quality_slider = tag.find(".voice_quality_slider");
let quality_number = tag.find(".voice_quality_number");
let change_quality = (quality: number) => {
if(properties.channel_codec_quality == quality) return;
properties.channel_codec_quality = quality;
if(quality_slider.val() != quality)
quality_slider.val(quality);
if(parseInt(quality_number.text()) != quality)
quality_number.text(quality);
update_template();
};
tag.find("input[name=\"voice_template\"]").change(function (this: HTMLInputElement) {
switch(this.value) {
case "custom":
break;
case "music":
change_codec(5);
change_quality(6);
break;
case "voice_desktop":
change_codec(4);
change_quality(6);
break;
case "voice_mobile":
change_codec(4);
change_quality(4);
break;
}
});
tag.find("input[name=\"voice_template\"][value=\"voice_mobile\"]")
.prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_MODIFY_WITH_CODEC_OPUSVOICE).granted(1));
tag.find("input[name=\"voice_template\"][value=\"voice_desktop\"]")
.prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_MODIFY_WITH_CODEC_OPUSVOICE).granted(1));
tag.find("input[name=\"voice_template\"][value=\"music\"]")
.prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_MODIFY_WITH_CODEC_OPUSMUSIC).granted(1));
let codecs = tag.find(".voice_codec option");
codecs.eq(0).prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_MODIFY_WITH_CODEC_SPEEX8).granted(1));
codecs.eq(1).prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_MODIFY_WITH_CODEC_SPEEX16).granted(1));
codecs.eq(2).prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_MODIFY_WITH_CODEC_SPEEX32).granted(1));
codecs.eq(3).prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_MODIFY_WITH_CODEC_CELTMONO48).granted(1));
codecs.eq(4).prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_MODIFY_WITH_CODEC_OPUSVOICE).granted(1));
codecs.eq(5).prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_CREATE_MODIFY_WITH_CODEC_OPUSMUSIC).granted(1));
tag.find(".voice_codec").change(function (this: HTMLSelectElement) {
if($(this.item(this.selectedIndex)).prop("disabled")) return false;
change_codec(this.selectedIndex);
});
if(!channel) {
change_codec(4);
change_quality(6);
} else {
change_codec(channel.properties.channel_codec);
change_quality(channel.properties.channel_codec_quality);
}
update_template();
quality_slider.on('input', event => change_quality(parseInt(quality_slider.val() as string)));
}
function applyAdvancedListener(properties: ChannelProperties, tag: JQuery, button: JQuery, channel?: ChannelEntry) {
tag.find(".channel_name_phonetic").change(function (this: HTMLInputElement) {
properties.channel_topic = this.value;
});
tag.find(".channel_delete_delay").change(function (this: HTMLInputElement) {
properties.channel_delete_delay = parseInt(this.value);
}).prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_MODIFY_TEMP_DELETE_DELAY).granted(1));
tag.find(".channel_codec_is_unencrypted").change(function (this: HTMLInputElement) {
properties.channel_codec_is_unencrypted = parseInt(this.value) == 0;
}).prop("disabled", !globalClient.permissions.neededPermission(PermissionType.B_CHANNEL_MODIFY_MAKE_CODEC_ENCRYPTED).granted(1));
{
let tag_infinity = tag.find("input[name=\"max_users\"][value=\"infinity\"]");
let tag_limited = tag.find("input[name=\"max_users\"][value=\"limited\"]");
let tag_limited_value = tag.find(".channel_maxclients");
if(!globalClient.permissions.neededPermission(!channel ? PermissionType.B_CHANNEL_CREATE_WITH_MAXCLIENTS : PermissionType.B_CHANNEL_MODIFY_MAXCLIENTS).granted(1)) {
tag_infinity.prop("disabled", true);
tag_limited.prop("disabled", true);
tag_limited_value.prop("disabled", true);
} else {
tag.find("input[name=\"max_users\"]").change(function (this: HTMLInputElement) {
console.log(this.value);
let infinity = this.value == "infinity";
tag_limited_value.prop("disabled", infinity);
properties.channel_flag_maxclients_unlimited = infinity;
});
tag_limited_value.change(event => properties.channel_maxclients = parseInt(tag_limited_value.val() as string));
tag.find("input[name=\"max_users\"]:checked").trigger('change');
}
}
{
let tag_inherited = tag.find("input[name=\"max_users_family\"][value=\"inherited\"]");
let tag_infinity = tag.find("input[name=\"max_users_family\"][value=\"infinity\"]");
let tag_limited = tag.find("input[name=\"max_users_family\"][value=\"limited\"]");
let tag_limited_value = tag.find(".channel_maxfamilyclients");
if(!globalClient.permissions.neededPermission(!channel ? PermissionType.B_CHANNEL_CREATE_WITH_MAXCLIENTS : PermissionType.B_CHANNEL_MODIFY_MAXCLIENTS).granted(1)) {
tag_inherited.prop("disabled", true);
tag_infinity.prop("disabled", true);
tag_limited.prop("disabled", true);
tag_limited_value.prop("disabled", true);
} else {
tag.find("input[name=\"max_users_family\"]").change(function (this: HTMLInputElement) {
console.log(this.value);
tag_limited_value.prop("disabled", this.value != "limited");
properties.channel_flag_maxfamilyclients_unlimited = this.value == "infinity";
properties.channel_flag_maxfamilyclients_inherited = this.value == "inherited";
});
tag_limited_value.change(event => properties.channel_maxfamilyclients = parseInt(tag_limited_value.val() as string));
tag.find("input[name=\"max_users_family\"]:checked").trigger('change');
}
}
}
}

122
templates.html
View file

@ -66,39 +66,119 @@
</x-entry>
<x-entry>
<x-tag>Audio</x-tag>
<x-content>TODO!</x-content>
<x-content>
<div class="container">
<div class="settings_audio">
<div class="group_box">
<div class="header">Presets</div>
<div class="content">
<fieldset style="">
<div><input type="radio" name="voice_template" value="voice_mobile"> Voice Mobile</div>
<div><input type="radio" name="voice_template" value="voice_desktop"> Voice Desktop</div>
<div><input type="radio" name="voice_template" value="music"> Music</div>
<div><input type="radio" name="voice_template" value="custom"> Custom</div>
</fieldset>
</div>
</div>
<div class="group_box">
<div class="header">Custom Settings</div>
<div class="content">
<div class="custom">
<div>Codec:</div>
<select class="voice_codec">
<option value="speex_narrow">Speex Narrowband <div class="icon_entry icon client-conflict-icon" title="You don't support this codec"></div></option>
<option value="speex_wide">Speex Wideband <div class="icon_entry icon client-conflict-icon" title="You don't support this codec"></div></option>
<option value="speex_ultra_wide">Speex Ultra-Wideband <div class="icon_entry icon client-conflict-icon" title="You don't support this codec"></div></option>
<option value="celt">CELT Mono <div class="icon_entry icon client-conflict-icon" title="You don't support this codec"></div></option>
<option value="opus_voice">Opus Voice</option>
<option value="opus_music">Opus Music</option>
</select>
<div>Quality:</div>
<div class="quality">
<input class="voice_quality_slider" type="range" min="1" max="10" value="6">
<div class="voice_quality_number">6</div>
</div>
</div>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>Permissions</x-tag>
<x-content>
<div style="display: flex; justify-content: space-evenly" class="settings_permissions">
<div>
Regular needed powers:
<table class="channel_perm_tbl">
<tr><td class="key">Join:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_join_power"></td></tr>
<tr><td class="key">View:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_view_power"></td></tr>
<tr><td class="key">Subscribe:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_subscribe_power"></td></tr>
<tr><td class="key">Desc. view:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_description_view_power"></td></tr>
<tr><td class="key">Modify:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_modify_power"></td></tr>
<tr><td class="key">Delete:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_delete_power"></td></tr>
</table>
<div class="group_box">
<div class="header">Regular needed powers:</div>
<div class="content">
<table class="channel_perm_tbl">
<tr><td class="key">Join:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_join_power"></td></tr>
<tr><td class="key">View:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_view_power"></td></tr>
<tr><td class="key">Subscribe:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_subscribe_power"></td></tr>
<tr><td class="key">Desc. view:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_description_view_power"></td></tr>
<tr><td class="key">Modify:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_modify_power"></td></tr>
<tr><td class="key">Delete:</td><td><input type="number" min="0" value="0" class="value" permission="i_channel_needed_delete_power"></td></tr>
</table>
</div>
</div>
<div>
File transfer needed powers:
<table class="channel_perm_tbl">
<tr><td class="key">Join:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
<tr><td class="key">Subscribe:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
<tr><td class="key">Desc. view:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
<tr><td class="key">Modify:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
<tr><td class="key">Delete:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
</table>
<div class="group_box">
<div class="header">File transfer needed powers:</div>
<div class="content">
<table class="channel_perm_tbl">
<tr><td class="key">Join:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
<tr><td class="key">Subscribe:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
<tr><td class="key">Desc. view:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
<tr><td class="key">Modify:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
<tr><td class="key">Delete:</td><td><input type="number" min="0" value="0" class="value"></td></tr>
</table>
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>Advanced</x-tag>
<x-content>TODO!</x-content>
<x-content>
<div class="container settings_advanced">
<div class="group_box">
<div class="header">Other Settings</div>
<div class="content properties">
<div class="key">Phonetic Name:</div>
<input class="value channel_name_phonetic" value="{{>channel_name_phonetic}}">
<div class="key">Delete delay:</div>
<input class="value channel_delete_delay" type="number" min="0" max="99999999" value="{{:channel_delete_delay}}"> <!-- Implement max? -->
<div><input class="channel_codec_is_unencrypted" type="checkbox" style="margin-left: 0px" {{if !channel_codec_is_unencrypted}}checked{{/if}}> Voice Data encrypted</div>
</div>
</div>
<div class="group_box">
<div class="header">Max users</div>
<div class="content max_users">
<fieldset>
<div><input type="radio" name="max_users" value="infinity" {{if channel_flag_maxclients_unlimited}}checked{{/if}}>Unlimited</div>
<div class="max_limited"><input type="radio" name="max_users" value="limited" {{if !channel_flag_maxclients_unlimited}}checked{{/if}}>Limited
<input style="margin-left: 25px;" class="value channel_maxclients" value="{{:channel_maxclients}}" type="number" min="0" max="99999999"></div>
</fieldset>
</div>
</div>
<div class="group_box">
<div class="header">Family Max users</div>
<div class="content max_users">
<fieldset>
<div><input type="radio" name="max_users_family" value="inherited" {{if channel_flag_maxfamilyclients_inherited}}checked{{/if}}>Inherited</div>
<div><input type="radio" name="max_users_family" value="infinity" {{if channel_flag_maxfamilyclients_unlimited}}checked{{/if}}>Unlimited</div>
<div class="max_limited"><input type="radio" name="max_users_family" value="limited" {{if !channel_flag_maxfamilyclients_unlimited && !channel_flag_maxfamilyclients_inherited}}checked{{/if}}>Limited
<input style="margin-left: 25px;" class="value channel_maxfamilyclients" type="number" value="{{:channel_maxfamilyclients}}" min="0" max="99999999"></div>
</fieldset>
</div>
</div>
</div>
</x-content>
</x-entry>
</x-tab>
</script>