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

.travis.yml

@@ -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:

index.php

@@ -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>

shared/css/general.scss

@@ -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;

shared/css/modals.scss

@@ -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: auto;
-		overflow-y: auto;
-		width: 300px;
-		flex-grow: 1;
 
 		.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;
+		}
 	}
 }
 

shared/css/ts/tab.scss

@@ -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 {

shared/js/load.ts

@@ -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"]);
+        console.log("Loaded successfully all scripts!");
-    }).then(() => {
+        app.callbackApp();
-        awaitLoad(loadScripts(["js/main.js"])).then(() => {
-            console.log("Loaded successfully all scripts!");
-            app.callbackApp();
-        });
     });
 }
 
-function awaitLoad(promises: {path: string, promise: Promise<Boolean>}[]) : Promise<Boolean> {
+function awaitLoad(promises: {path: string, promise: Promise<Boolean>}[]) : Promise<void> {
-    return new Promise<Boolean>((resolve, reject) => {
+    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([
+    (window.require !== undefined ?
-        ["vendor/jquery/jquery.min.js"],
+        Promise.resolve() :
-    ]))).then(() => awaitLoad(loadScripts([
+        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([
+    ])).then(() => {
-        //["https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"]
-        ["vendor/jsrender/jsrender.min.js"]
-    ]))).then(() => {
         //Load the teaweb scripts
         loadScript("js/proto.js").then(loadDebug).catch(loadRelease);
         //Load the teaweb templates

shared/js/main.ts

@@ -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; }

shared/js/proto.ts

@@ -112,8 +112,12 @@ if(typeof ($) !== "undefined") {
             if(this.render) {
                 result = $(this.render(values));
             } else {
-                result = window.jsrender.templates("xxx", this.html())
+                const template = window.jsrender.render[this.attr("id")];
-                result = window.jsrender.render["xxx"](values);
+                /*
+                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) => {

shared/js/ui/modal/ModalPermissionEdit.ts

@@ -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);

shared/js/utils/modal.ts

@@ -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>");

templates.html

@@ -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">
+        <script class="jsrender-template" id="tmpl_permission_entry" type="text/html">
-            <div class="align_row permission-explorer">
+            {{if type == "entry"}}
-                <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"}}
             <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-value">
-                <div class="permission-skip"><node key="{{>permission_name}}_skip"></node></div>
+                    {{if permission_name.startsWith("b_") }}
-                <div class="permission-negate"><node key="{{>permission_name}}_negate"></node></div>
+                    <label class="checkbox">
-                <div class="permission-grant"><node key="{{>permission_name}}_grant"></node></div>
+                        <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>