TeaWeb/templates.html

573 lines
28 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TeaSpeak-Web client templates</title>
<!-- Imports just for my IDE -->
<link rel="stylesheet" href="css/ts/tab.css" type="text/css">
<link rel="stylesheet" href="css/ts/chat.css" type="text/css">
<link rel="stylesheet" href="css/ts/client.css" type="text/css">
<link rel="stylesheet" href="css/ts/icons.css" type="text/css">
<link rel="stylesheet" href="css/general.css" type="text/css">
</head>
<body>
<!-- Template for chennel create & 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}}"/>
</div>
<div class="align_row property_entry">
<a class="key">Password:</a>
<!-- 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}}"/>
</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>
</div>
</div>
<div style="margin-bottom: 5px"></div>
<x-tab>
<x-entry>
<x-tag>Standard</x-tag>
<x-content>
<div class="settings_standard" style="display: flex; flex-direction: row; width: 100%; justify-content: space-evenly">
<div style="vertical-align: center; margin: 20px;">
<a>Channel Type</a><br>
<fieldset style="border: gray solid; border-width: 2px; border-radius: 0px 6px 6px 6px;">
<div><input type="radio" name="channel_type" value="temp" {{if !channel_flag_semi_permanent && !channel_flag_permanent}}checked{{/if}}> Temporary</div>
<div><input type="radio" name="channel_type" value="semi" {{if channel_flag_semi_permanent}}checked{{/if}}> Semi-Permanent</div>
<div><input type="radio" name="channel_type" value="perm" {{if channel_flag_permanent}}checked{{/if}}> Permanent</div>
<hr style="width: 100%;">
<div><input type="checkbox" name="channel_default" id="default" value="def"> Default Channel</div>
</fieldset>
</div>
<div style="border-left:1px solid #000;height: auto;"></div>
<div style="flex-direction: column; align-content: stretch; vertical-align: center; margin: 20px;">
<div>
<div>Sort this channel after:</div>
<select class="order_id" style="width: 150px">
</select>
</div>
<div style="margin-top: 20px">
<div>Needed Talk Power:</div>
<input type="number" min="0" value="0" name="talk_power" style="width: 150px">
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>Audio</x-tag>
<x-content>TODO!</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>
<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>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>Advanced</x-tag>
<x-content>TODO!</x-content>
</x-entry>
</x-tab>
</script>
<!-- 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">
<div>Remote address and port:</div>
<input type="text" style="width: 100%" class="connect_address" value="unknown">
</div>
<div style="width: 20%">
<div>Server password:</div>
<form name="server_password_form" onsubmit="return false;">
<input type="password" autocomplete="off" style="width: 100%" class="connect_password">
</form>
</div>
</div>
<div>
<div>Nickname:</div>
<input type="text" style="width: 100%" class="connect_nickname" value="">
</div>
<hr>
<div class="group_box">
<div style="display: flex; justify-content: space-between;">
<div style="text-align: right;">Identity Settings</div>
<select class="identity_select">
<option name="identity_type" value="TEAFORO">Forum Account</option>
<option name="identity_type" value="TEAMSPEAK">TeamSpeak</option>
</select>
</div>
<hr>
<div class="identity_config_TEAMSPEAK identity_config">
Please enter your exported TS3 Identity string bellow or select your exported Identity<br>
<div style="width: 100%; display: flex; flex-direction: row">
<input placeholder="Identity string" style="width: 70%; margin: 5px;" class="identity_string">
<div style="width: 30%; margin: 5px"><input class="identity_file" type="file"></div>
</div>
</div>
<div class="identity_config_TEAFORO identity_config">
You're using your forum account as verification
</div>
<div style="background-color: red; border-radius: 1px; display: none" class="error_message"></div>
</div>
</div>
</script>
<!-- Template for the settings -->
<script id="tmpl_settings" type="text/html">
<x-tab>
<x-entry>
<x-tag>General</x-tag>
<x-content>Didnt setuped yet!</x-content>
</x-entry>
<x-entry>
<x-tag>Voice</x-tag>
<x-content>
<div class="settings_voice align_column">
<div style="justify-content: right">
<a style="margin-left: 20px">Microphone:</a>
<select class="voice_microphone_select"></select>
<hr>
</div>
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-evenly"><div style="vertical-align: center; margin: 20px; min-width: 175px">
<a>Voice Activity Detection</a>
<div>
<fieldset class="GroupBox">
<div><input type="radio" name="vad_type" value="pt" display="Always active"> Always active</div>
<div><input type="radio" name="vad_type" value="vad" display="Voice activity detection"> Voice activity detection</div>
<div><input type="radio" name="vad_type" value="ppt" display="Push to talk"> Push to talk</div>
</fieldset>
</div>
</div>
<div style="border-left:1px solid #000;height: auto;"></div>
<div style="flex-direction: column; align-content: stretch; vertical-align: center; margin: 20px;">
<div class="vad_settings">
<div style="font-size: 14px; text-align: center"><a class="vad_type">Type[Unknown]</a> settings</div>
<div class="vad_type_settings vad_type_pt">There are no setting entries for an <b>always</b> online voice detection.</div>
<div class="vad_type_settings vad_type_ppt">
<a>Push to talk key:</a>
<button class="vat_ppt_key">Uninitialised</button>
</div>
<div class="vad_type_settings vad_type_vad">
<div>Voice activity threshold (<a class="vad_vad_slider_value">20</a>%)</div>
<div class="vad_vad_threshold_selector">
<div class="vad_vad_bar">
<div style="width: 100%; height: 100%; position: absolute">
<div class="vad_vad_bar_filler"></div>
</div>
<input type="range" min="0" max="100" value="50" class="vad_vad_slider">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
</x-tab>
</script>
<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>
</script>
<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>
</div>
<div class="align_column" style="margin: 5px">
<a>Reason:</a>
<textarea style="height: 32px; resize: vertical; max-height: 150px; min-height: 32px" maxlength="512" class="ban_reason"></textarea>
</div>
<div class="align_row" style="margin: 5px; justify-content: space-between">
<a>Duration:</a>
<div class="align_row">
<input type="number" value="1" class="ban_duration" style="margin-right: 7px" min="1">
<select class="ban_duration_type">
<option value="sec">seconds</option>
<option value="min">minutes</option>
<option value="hours">hours</option>
<option value="days">days</option>
<option value="perm">permanent</option>
</select>
</div>
</div>
</div>
</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}}
{{*
if(!data.song_max_width) data.song_max_width = 300;
let width = calculate_width(data.song_name);
if(width > data.song_max_width)
data.song_use_scroller = true;
}}
<div class="music-wrapper">
<div class="container">
<div class="left">
<div class="static-card">
<img src="{{:thumbnail}}" alt="Thumbnail" class="thumbnail">
</div>
</div>
<div class="right">
<div class="controls hover">
<label class="btn-forward"><span></span></label>
<label class="btn-rewind"><span></span></label>
<label class="btn-settings"><span></span></label>
</div>
<div class="flip-card">
<img src="{{:thumbnail}}" alt="Thumbnail" class="thumbnail">
</div>
</div>
</div>
<div class="controls-overlay">
<div class="timer">
<div>
<svg class="button button_play" x="0px" y="0px" viewBox="0 0 4.5 6.9" style="enable-background:new 0 0 4.5 6.9;">
<defs>
<filter id="shadow">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
</defs>
<polyline style="filter:url(#shadow);" class="button" points="0.6,0.3 3.9,3.4 0.6,6.6 "></polyline>
</svg>
<svg class="button button_pause" x="0px" y="0px" viewBox="0 0 4.5 6.9" style="enable-background:new 0 0 4.5 6.9;">
<defs>
<filter id="shadow">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
</defs>
<g style="filter:url(#shadow);">
<line x1="0.4" y1="0.1" x2="0.4" y2="6.8"></line>
<line x1="4.1" y1="0.1" x2="4.1" y2="6.8"></line>
</g>
</svg>
</div>
<div class="timeline">
<div class="buffered"></div>
<div class="played"></div>
<div class="slider"></div>
</div>
<div class="time player_time">--:--</div>
</div>
<div class="song">
{{if song_use_scroller}}
<div class="scroll-left">
<p class="name">{{>song_name}}</p>
</div>
{{else}}
<div class="name" style="">{{>song_name}}</div>
{{/if}}
</div>
</div>
</div>
</script>
<template id="tmpl_music_frame_empty">
<div class="music-wrapper empty">
<img src="img/music/empty_disk.svg">
<a>Not playing any music</a>
</div>
</template>
<script id="tmpl_selected_client" type="text/html">
<table class="select_info_table">
<tr>
<td>Name:</td>
<td><node key="client_name"/></td>
</tr>
{{if property_client_description.length > 0}}
<tr>
<td>Description:</td>
<td>{{>property_client_description}}</td>
</tr>
{{/if}}
<tr>
<td>Version:</td>
<td><a title="{{>property_client_version}}">{{*: data.property_client_version.split(" ")[0]; }}</a> on {{>property_client_platform}}</td>
</tr>
<tr>
<td>Online since:</td>
<td class="update_onlinetime">{{:client_onlinetime}}</td>
</tr>
<tr>
<td>Volume:</td>
<td>{{:sound_volume}}%</td>
</tr>
{{if client_teaforum_id > 0}}
<tr>
<td>TeaSpeak Account:</td>
<td><a href="//forum.teaspeak.de/index.php?members/{{:property_client_teaforum_id}}" target="_blank">{{>property_client_teaforum_name}}</a></td>
</tr>
{{/if}}
</table>
<!-- Server groups -->
<div style="display: flex; flex-direction: column;">
<div style="display:flex;margin-top:5px;align-items:center">
<div class="icon client-permission_server_groups"></div>
<div style="margin-left:3px;font-weight:bold">Server groups:</div>
</div>
{{for group_server}}
<div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
<node key="group_{{:group_id}}_icon"/>
<div style="margin-left: 3px">{{:group_name}}</div>
</div>
{{/for}}
</div>
<!-- Channel group -->
<div style="display: flex; flex-direction: column; margin-bottom: 20px">
<div style="display:flex;margin-top:10px;align-items:center">
<div class="icon client-permission_channel"></div>
<div style="margin-left:3px;font-weight:bold">Channel group:</div>
</div>
<div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
<node key="group_{{:group_channel}}_icon"/>
<div style="margin-left: 3px">{{*: data["group_" + data.group_channel + "_name"]}}</div>
</div>
</div>
<!-- Costume tags/icons -->
<!-- Speakers/Headphones disabled -->
{{if !property_client_output_hardware}}
<div style="display: inline-flex">
<div class="icon_x32 client-hardware_output_muted" style="margin-right: 5px"></div>
<a style="align-self: center">Speakers/Headphones disabled</a>
</div>
{{/if}}
<!-- Microphone disabled -->
{{if !property_client_input_hardware}}
<div style="display: inline-flex">
<div class="icon_x32 client-hardware_input_muted" style="margin-right: 5px"></div>
<a style="align-self: center">Microphone disabled</a>
</div>
{{/if}}
<!-- Speakers/Headphones Muted -->
{{if property_client_output_muted}}
<div style="display: inline-flex">
<div class="icon_x32 client-output_muted" style="margin-right: 5px"></div>
<a style="align-self: center">Speakers/Headphones Muted</a>
</div>
{{/if}}
<!-- Microphone Muted -->
{{if property_client_input_muted}}
<div style="display: inline-flex">
<div class="icon_x32 client-input_muted" style="margin-right: 5px"></div>
<a style="align-self: center">Microphone Muted</a>
</div>
{{/if}}
</script>
<script id="tmpl_selected_music" type="text/html">
<table class="select_info_table">
<tr>
<td>Name:</td>
<td><node key="client_name"/></td>
</tr>
{{if property_client_description.length > 0}}
<tr>
<td>Description:</td>
<td>{{>property_client_description}}</td>
</tr>
{{/if}}
<tr>
<td>Livetime:</td>
<td class="update_onlinetime">{{:client_onlinetime}}</td>
</tr>
<!-- player_volume -->
<tr>
<td>Remote Volume:</td>
<td>{{*: data.property_player_volume * 100 }}%</td>
</tr>
<tr>
<td>Local Volume:</td>
<td>{{>sound_volume}}%</td>
</tr>
<!-- TODO: Created by -->
</table>
<!-- Server groups -->
<div style="display: flex; flex-direction: column;">
<div style="display:flex;margin-top:5px;align-items:center">
<div class="icon client-permission_server_groups"></div>
<div style="margin-left:3px;font-weight:bold">Server groups:</div>
</div>
{{for group_server}}
<div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
<node key="group_{{:group_id}}_icon"/>
<div style="margin-left: 3px">{{:group_name}}</div>
</div>
{{/for}}
</div>
<!-- Channel group -->
<div style="display: flex; flex-direction: column; margin-bottom: 20px">
<div style="display:flex;margin-top:10px;align-items:center">
<div class="icon client-permission_channel"></div>
<div style="margin-left:3px;font-weight:bold">Channel group:</div>
</div>
<div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
<node key="group_{{:group_channel}}_icon"/>
<div style="margin-left: 3px">{{*: data["group_" + data.group_channel + "_name"]}}</div>
</div>
</div>
<div>
<node key="music_player"/>
</div>
</script>
<script id="tmpl_selected_server" type="text/html">
<table class="select_info_table">
<tr>
<td>Name:</td>
<td><node key="server_name"/></td>
</tr>
<tr>
<td>Address:</td>
<td>{{>server_address}}</td>
</tr>
<tr>
<td>Type:</td>
<td>TeaSpeak</td>
</tr>
<tr>
<td>Version:</td>
<td><a title="{{>property_virtualserver_version}}">{{*: data.property_virtualserver_version.split(" ")[0]; }}</a> on {{>property_virtualserver_platform}}</td>
</tr>
<tr>
<td>Uptime:</td>
<td class="update_onlinetime">{{:server_onlinetime}}</td>
</tr>
<tr>
<td>Current Channels:</td>
<td>{{:property_virtualserver_channelsonline}}</td>
</tr>
<tr>
<td>Current Clients:</td>
<td>{{:property_virtualserver_clientsonline}}</td>
</tr>
<tr>
<td>Current Queries:</td>
<td>{{:property_virtualserver_queryclientsonline}}</td>
</tr>
</table>
</script>
<script id="tmpl_selected_channel" type="text/html">
<table class="select_info_table">
<tr>
<td>Name:</td>
<td><node key="channel_name"/></td>
</tr>
<tr>
<td>Topic:</td>
<td>{{>property_channel_topic}}</td>
</tr>
<tr>
<td>Codec:</td>
<td>{{>property_channel_codec}}</td>
</tr>
<tr>
<td>Codec Quality:</td>
<td>{{>property_channel_codec_quality}}</td>
</tr>
<tr>
<td>Type:</td>
<td>{{>channel_type}}</td>
</tr>
<tr>
<td>Current clients:</td>
<td>
{{>channel_clients}} /
{{if property_channel_maxclients == -1}}
Unlimited
{{else}}
{{>property_channel_maxclients}}
{{/if}}
</td>
</tr>
<tr>
<td>Subscription Status:</td>
<td>
{{if channel_subscribed}}
Subscribed
{{else}}
Unsubscribed
{{/if}}
</td>
</tr>
<tr>
<td>Voice Data Encryption:</td>
<td>
{{if property_channel_codec_is_unencrypted}}
Unencrypted
{{else}}
Encrypted
{{/if}}
</td>
</tr>
</table>
</script>
</body>
</html>