Adding new vtl file

files/working/en-us/demo.dotcms.com/template.vtl

@@ -0,0 +1,207 @@
+<script type="application/javascript">
+
+dojo.require("dotcms.dojo.data.TemplateReadStore");
+
+function templateChanged() {
+    var templateSel=dijit.byId("templateSel");
+    var value=templateSel.get('value');
+    if(value == "0") {
+        var store=window.top._templateStore;
+        store.hostId="";
+        templateSel.set("value","");
+        templateSel.filter();
+    }
+    else if(value) {
+        dojo.byId("template").value=value;
+        fetch("/api/v1/templates/image", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                templateId: value
+            })
+        }).then(async (response) => {
+            // The ok value represents the result of the response status 200 codes
+            if (response.ok) {
+                const result = await response.json();
+
+                getTemplateCallBack(result); // here we pass the result of the json response to the callback function
+            } else {
+                throw new Error("Error fetching template image");
+            }
+        })
+        .catch((error) => {
+            var imageEl = dojo.byId("templateThumbnailHolder");
+            imageEl.src = "/html/images/shim.gif";
+            imageEl.style.border = "0px";
+        });
+    }
+}
+
+function getTemplateCallBack(data) {
+    var imageInode = data.identifier;
+    var imageExtension = data.extension;
+
+    var imageEl=dojo.byId("templateThumbnailHolder");
+    if (isInodeSet(imageInode)) {
+    	imageEl.src = "/dA/" + imageInode + "/250w";
+        imageEl.style.border = '1px solid #B6CBEB';
+        imageEl.style.marginTop = '1rem';
+    } else {
+        imageEl.src  = "/html/images/shim.gif";
+        imageEl.style.border = '0px';
+    }
+
+}
+
+dojo.ready(function(){
+    var hostId = "$request.getSession().getAttribute('CMS_SELECTED_HOST_ID')";
+    var templateId = dojo.byId("template").value;
+    var templateStore = new dotcms.dojo.data.TemplateReadStore({
+        hostId: hostId,
+        templateSelected: templateId
+    });
+
+    window.top._templateStore=templateStore;
+
+    var templateSelect=new dijit.form.FilteringSelect({
+        id:"templateSel",
+        name:"templateSel",
+        style:"width:350px;",
+        onChange: templateChanged,
+        store: templateStore,
+        searchDelay: 300,
+        pageSize: 15,
+        autoComplete: false,
+        ignoreCase: true,
+        labelType:"html",
+        searchType:"html",
+        labelAttr: "htmlTitle",
+        searchAttr: "fullTitle",
+        value: templateId,
+        invalidMessage: '$text.get("Invalid-option-selected")'
+    },"templateHolder");
+
+
+    var val  = dojo.byId("template").value;
+    if (val != undefined && val != "" && val != "0"){
+        fetch("/api/v1/templates/image", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                templateId: val
+            })
+        }).then(async (response) => {
+            // The ok value represents the result of the response status 200 codes
+            if (response.ok) {
+                const result = await response.json();
+
+                getTemplateCallBack(result); // here we pass the result of the json response to the callback function
+            } else {
+                throw new Error("Error fetching template image");
+            }
+        })
+        .catch((error) => {
+            var imageEl = dojo.byId("templateThumbnailHolder");
+            imageEl.src = "/html/images/shim.gif";
+            imageEl.style.border = "0px";
+        });
+
+        var templateSel=dijit.byId("templateSel");
+        templateSel.set("value",val);
+    }
+
+    var currentTemplateIdElement = dojo.byId("currentTemplateId");
+    currentTemplateIdElement.value = val;
+
+
+
+    // try to preload the default template.
+    var defaultTemplateName = '$config.getStringProperty("DEFAULT_TEMPLATE_NAME", "System Template")';
+
+    var onTemplateFetchComplete = function(templates, currentRequest){
+
+        var normalizeKey = function (obj) {
+            return obj.fullTitle.replace(new RegExp("\\("+obj.hostName+"\\)"), '').replace(/\s+/g,'').toLowerCase();
+        }
+
+        if((templates) && (templates.length > 0)){
+            var templatesMapByName = templates.reduce(function(map, obj) {
+                var key = normalizeKey(obj);
+                if (!(key in map)){
+                    map[key] = obj;
+                }
+                return map;
+            }, {});
+
+            var templatesMapById = templates.reduce(function(map, obj) {
+                map[obj.identifier] = obj;
+                return map;
+            }, {});
+
+            var obj = val != undefined && val != "" && val != "0"? templatesMapById[val]:null;
+
+            if (!obj) {
+                var normalizedTemplateName = defaultTemplateName.replace(/\s+/g,'').toLowerCase();
+                var obj = templatesMapByName[normalizedTemplateName];
+            }
+
+            if(obj){
+                var value = obj.identifier;
+                var fullTitle = obj.fullTitle;
+                // We set the values directly into the components because setting it direcrtly into`templateSel` fires another load operation.
+                dojo.byId("currentTemplateId").value = value;
+                dojo.byId("template").value = value;
+                dijit.byId('templateSel').set("displayedValue", fullTitle);
+                fetch("/api/v1/templates/image", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify({
+                        templateId: value
+                    })
+                }).then(async (response) => {
+                    // The ok value represents the result of the response status 200 codes
+                    if (response.ok) {
+                        const result = await response.json();
+
+                        getTemplateCallBack(result); // here we pass the result of the json response to the callback function
+                    } else {
+                        throw new Error("Error fetching template image");
+                    }
+                })
+                .catch((error) => {
+                    var imageEl = dojo.byId("templateThumbnailHolder");
+                    imageEl.src = "/html/images/shim.gif";
+                    imageEl.style.border = "0px";
+                });
+            }
+        }
+    };
+
+    var templateFetchParams = {
+        query: {
+            fullTitle: '*',
+            hostId: hostId
+        },
+        queryOptions: {},
+        start: 0,
+        count: 1000,
+        sort: [],
+        onComplete: onTemplateFetchComplete
+    };
+
+    window.top._templateStore.fetch(templateFetchParams);
+});
+</script>
+
+<div id="templateHolder"></div>
+<input id="currentTemplateId" type="hidden" name="currentTemplateId" value=""/>
+<div>
+    <img id="templateThumbnailHolder" src="/html/images/shim.gif" alt="Template Thumbnail"/>
+</div>
+