Kendo UI Grid Column typed date has a trouble - kendo-ui

I have a grid which would have many columns typed date. These all grids is generated from a generic function, so that I cannot know whether the column type is date or not. There is one rule validates through all columns. It is that all columns name end with "Date" suffix. For instance, createDate, editDate, visitedDate, etc...
So that, I can understand that it can be date and I parse it like you can see at the dataSource parse function
I have trouble when I update the cell. It does not reflect its own value to Model. The date column proto function returns "Invalid Date" error. I do not understand what it happen
var dataSource = new kendo.data.DataSource({
"data": [
{
"hidden_gridColumns": "",
"id": "21632",
"projectId": "146",
"customerTypeId": "4",
"district": "0",
"fieldSize": "12",
"fieldType": "0",
"floorCoveringType": "12",
"lastChangeDate": null,
"estimatedModificationDate": null,
"latestCompany": ""
}
],
"schema": {
"model": {
"id": "id",
"fields": {
"gridColumns": {
"type": "string"
},
"id": {
"type": "string"
},
"projectId": {
"type": "string"
},
"customerTypeId": {
"type": "string"
},
"district": {
"type": "string"
},
"fieldSize": {
"type": "string"
},
"fieldType": {
"type": "string"
},
"floorCoveringType": {
"type": "string"
},
"lastChangeDate": {
"type": "date"
},
"estimatedModificationDate": {
"type": "string"
},
"latestCompany": {
"type": "string"
}
}
},
parse: function(data){
$.each(data,
function(rowNo,
row){
$.each(row,
function(colName,
column){
if(colName.indexOf("Date")>=0){
console.log(colName + " taranıyor");
row[colName] = kendo.parseDate(row[colName], "dd-MM-yyyy");
}
});
});
return data;
}
},
"batch": true
})
And this is my columns structure:
var columns = [
{
"title": "gridColumns",
"field": "gridColumns",
"hidden": true
},
{
"title": "id",
"field": "id",
"hidden": true
},
{
"title": "projectId",
"field": "projectId",
"hidden": true
},
{
"title": "Müşteri Tipi",
"field": "customerTypeId",
"hidden": false,
"width": "91",
"values": [
{
"value": "1",
"text": "Yurtiçi "
},
{
"value": "2",
"text": "Yurtdışı"
},
{
"value": "3",
"text": "Spor Kulübü"
},
{
"value": "4",
"text": "Diğer"
},
{
"value": "5",
"text": "Üniversite"
},
{
"value": "6",
"text": ""
}
]
},
{
"title": "district",
"field": "district",
"hidden": true,
"width": "132"
},
{
"title": "Saha Ölçüsü",
"field": "fieldSize",
"hidden": false,
"width": "85"
},
{
"title": "Saha Türü",
"field": "fieldType",
"hidden": false,
"values": [
{
"value": "1",
"text": "Açık"
},
{
"value": "0",
"text": "Kapalı"
}
]
},
{
"title": "Halı Cinsi",
"field": "floorCoveringType",
"hidden": false,
"width": "76"
},
{
"title": "Son Halı değişim Tarih",
"field": "lastChangeDate",
"hidden": false,
"format": "{0:dd-MM-yyyy}"
},
{
"title": "Tahmini Yenileme Tarihih",
"field": "estimatedModificationDate",
"hidden": false
},
{
"title": "Son Çalıştığı Halı Firması",
"field": "latestCompany",
"hidden": false
}
]

I solved this problem by the code below:
parse: function(response) {
var tmpData=[];
for (var i = 0; i < response.length; i++) {
var tmpRow = response[i];
$.each(tmpRow, function(colNo, colValue){
if(colNo.indexOf("Date")>-1){
tmpRow[colNo]=kendo.parseDate(new Date(tmpRow[colNo]));
}
});
tmpData.push(tmpRow);
}
return tmpData;
}

Related

ruby extract data from nested array

How I can access to a depth key value from a nested hash?
I want to extract values inside of _Data, I want to extract the field and size inside data[], to be printed like fieldvalue_sizevalue
elemento3_3
I have this code but only get the all the data keys and values and i had some troubles making this iteration, I am new at ruby
_Data[0][:checks].each do |intera|
puts "#{itera[:data]}
end
this is the nested array
_Data =[
{
"agent": "",
"bottom_comments": [],
"checks": [
{
"title": "new",
"data": [{
"field": "elemento1",
"value": "0",
}
]
},
{
"title": "new",
"data": [{
"field": "elemento2",
"value": "0",
"size":"4",
}
]
},
{
"title": "new",
"data": [{
"field": "elemento3",
"value": "0",
"size":"3",
}
]
},
{
"title": "new",
"data": [{
"field": "elemento4",
"value": "0",
"size":"17",
}
]
},
{
"title": "new",
"data": [{
"field": "elemento5",
"value": "0",
"size":"12",
}
]
},
{
"title": "new",
"data": [{
"field": "elemento6",
"value": "0",
"size":"19",
}
]
},
{
"title": "new",
"data": [{
"field": "elemento7",
"value": "0",
"size":"9",
}
]
},
{
"title": "new",
"data": [{
"field": "elemento8",
"value": "0",
"size":"10",
}
]
},
{
"title": "new",
"data": [{
"field": "elemento11",
"value": "0",
"size":"14",
}
]
},
{
"title": "new",
"data": [{
"field": "elemento19",
"value": "0",
"size":"14",
}
]
},
{
"type": "condiciones",
"elementos": [
{
"table": [
{
"title": "",
"name": "radio",
},
{
"title": "",
"name": "xenon",
},
{
"title": "",
"name": "aluminio",
},
{
"title": "",
"name": "boro",
},
{
"title": "",
"name": "oro",
},
{
"title": "",
"name": "bromo",
},
{
"title": "",
"name": "oxigeno",
}
]
}
]
}
]
}
]
_Data[0][:checks].each do |intera|
intera[:data].each do |data|
puts "#{data[:filed]}_#{data[:value]}"
end
end
Hope this may help you.
Here is one line code to print the values if they exist. Let me know if any further details on any of the methods used will be helpful.
_Data[0][:checks].pluck(:data).flatten.compact.each{|i| puts "#{i[:field]}_#{i[:size]}" if i[:field] && i[:size]}

Kafka JDBC source not showing numeric values

I am deploying a Kafka Connect JDBC Source. It is connecting properly to the dabase, but the result I am getting is this:
{
"schema": {
"type": "struct",
"fields": [
{
"type": "bytes",
"optional": false,
"name": "org.apache.kafka.connect.data.Decimal",
"version": 1,
"parameters": {
"scale": "0"
},
"field": "ID"
},
{
"type": "bytes",
"optional": false,
"name": "org.apache.kafka.connect.data.Decimal",
"version": 1,
"parameters": {
"scale": "0"
},
"field": "TENANT_ID"
},
{
"type": "bytes",
"optional": false,
"name": "org.apache.kafka.connect.data.Decimal",
"version": 1,
"parameters": {
"scale": "0"
},
"field": "IS_ACTIVE"
},
{
"type": "int64",
"optional": false,
"name": "org.apache.kafka.connect.data.Timestamp",
"version": 1,
"field": "CREATION_DATE"
},
{
"type": "int64",
"optional": true,
"name": "org.apache.kafka.connect.data.Timestamp",
"version": 1,
"field": "LAST_LOGIN"
},
{
"type": "string",
"optional": true,
"field": "NAME"
},
{
"type": "string",
"optional": true,
"field": "MOBILEPHONE"
},
{
"type": "string",
"optional": true,
"field": "EMAIL"
},
{
"type": "string",
"optional": true,
"field": "USERNAME"
},
{
"type": "string",
"optional": true,
"field": "PASSWORD"
},
{
"type": "string",
"optional": true,
"field": "EXTERNAL_ID"
}
],
"optional": false
},
"payload": {
"ID": "fdo=",
"TENANT_ID": "Uw==",
"IS_ACTIVE": "AQ==",
"CREATION_DATE": 1548987456000,
"LAST_LOGIN": 1557401837030,
"NAME": " ",
"MOBILEPHONE": " ",
"EMAIL": " ",
"USERNAME": "ES00613751",
"PASSWORD": " ",
"EXTERNAL_ID": " "
}
}
As you can see, the numeric and timestamp values are not showing the value properly.
The config:
name=jdbc-teradata-source-connector
connector.class=io.confluent.connect.jdbc.JdbcSourceConnector
tasks.max=1
connection.url=...
numeric.maping=best_fit
topic.prefix=test-2
mode=timestamp+incrementing
timestamp.column.name=LAST_LOGIN
incrementing.column.name=ID
topic=test-jdbc-oracle-source
The numeric mapping does not work since it is Confluent 3.2.2
I have also tried to cast the numbers to numeric but it does not work either.
Add in your connector config numeric.mapping
"numeric.mapping":"best_fit"
you can see all explication here

JSONata, pulling data from nested objects

I'm new to JSONata and so still getting my head around it. I need to pull data out of a nested object, for example from :
{
"transaction": {
"id": "de112b4b-82e2-4172-a89f-68724c90b692"
},
"domain": {
"id": "realworld"
},
"listing": {
"spanner": {
"information": {
"type": {
"VENDOR": "Charlie"
},
"variables": {
},
"uid": "08_spanner",
"mode": {
"store": "bob"
},
"version": "1",
"name": "Harrold"
}
},
"hammer": {
"information": {
"type": {
"VENDOR": "Cliff"
},
"variables": {
},
"uid": "08_hammer",
"mode": {
"store": "steve"
},
"version": "1",
"name": "Mike"
}
},
"wrench": {
"information": {
"type": {
"VENDOR": "Dave"
},
"variables": {
},
"uid": "08_wrench",
"mode": {
"store": "bob"
},
"version": "1",
"name": "Kent"
}
}
}
}
... I need to pull out the listing data with it's "information", but without the information key. So the result would look like:
{
"spanner": {
"type": {
"VENDOR": "Charlie"
},
"variables": {
},
"uid": "08_spanner",
"mode": {
"store": "bob"
},
"version": "1",
"name": "Harrold"
},
"hammer": {
"type": {
"VENDOR": "Cliff"
},
"variables": {
},
"uid": "08_hammer",
"mode": {
"store": "steve"
},
"version": "1",
"name": "Mike"
},
"wrench": {
"type": {
"VENDOR": "Dave"
},
"variables": {
},
"uid": "08_wrench",
"mode": {
"store": "bob"
},
"version": "1",
"name": "Kent"
}
}
I have been messing around on http://try.jsonata.org/ and can see how powerful the library is but so far no success at achieving this goal. Any and all help is appreciated :).
The following expression will do this:
listing.$each(function($value, $key) {
{ $key: $value.information }
}) ~> $merge()
See http://try.jsonata.org/S17Erm85z

Ghost image showing up in kendo grid drag and drop

A kendo grid has been having a problem with the drag-and-drop functionality, where it has a copy of all the data essentially stuck to the left side of the grid, in-line with the cursor.
The grid that I attach it to is set to editable, however, that appears to have no impact on this. Disabling editing does not fix the problem. It is also worth noting that the grid is bound to the dynamic type, which may have some impact, but I didn't find anything looking into that.
Sortable block is below
#(Html.Kendo().Sortable()
.For("#QuestionGridEditable")
.Filter("table > tbody > tr")
.Cursor("move")
.Axis(SortableAxis.Y)
.PlaceholderHandler("placeholder")
.ContainerSelector("#QuestionGridEditable tbody")
.Events(e => {
e.Change("onDrag");
e.Move("startDrag");
})
Image of the problem
Generated javascript
<script>
kendo.syncReady(function() {
jQuery("#QuestionGridEditable").kendoGrid({
"dataBound": onNewRow,
"columns": [{
"title": "#",
"attributes": {
"style": "width: 2em"
},
"headerAttributes": {
"data-field": "number",
"data-title": "#"
},
"field": "number",
"encoded": true,
"editor": "\u003cinput id=\"number\" max=\"2147483647\" min=\"-2147483648\" name=\"number\" style=\"width:100%\" type=\"text\" /\u003e\u003cscript\u003e\r\n\tkendo.syncReady(function(){jQuery(\"#number\").kendoNumericTextBox({\"format\":\"n0\",\"decimals\":0});});\r\n\u003c/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"number\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e",
"editable": funcFalse
}, {
"title": "Visibility",
"attributes": {
"style": "width: 30%"
},
"headerAttributes": {
"data-field": "viewableby",
"data-title": "Visibility"
},
"template": "#=ArrayToString(viewableby)#",
"field": "viewableby",
"encoded": true,
"editor": "\u003cselect id=\"viewableby\" multiple=\"multiple\" name=\"viewableby\"\u003e\u003c/select\u003e\u003cscript\u003e\r\n\tkendo.syncReady(function(){jQuery(\"#viewableby\").kendoMultiSelect({\"dataSource\":[\"Everyone\",\"Faculty\",\"Students\",\"Self\"],\"value\":\"#=ViewersCompactToList(data)#\"});});\r\n\u003c/script\u003e\r\n\r\n\r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"viewableby\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"
}, {
"title": "Radio button",
"headerAttributes": {
"data-field": "cells[0].Text.text",
"data-title": "Radio button"
},
"field": "cells[0].Text.text",
"encoded": true,
"editor": "\u003cbutton id=\"buttonAddRadio\" class=\"k-button k-button-icontext\" onclick=\"addRB\"\u003e+\u003c/button\u003e\r\n\u003cinput class=\"k-textbox\" id=\"cells_0__Text_text\" name=\"cells[0].Text.text\" /\u003e\r\n \r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"cells[0].Text.text\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e",
"editable": funcTrue
}, {
"title": "Basic text entry static",
"headerAttributes": {
"data-field": "cells[1].Text.text",
"data-title": "Basic text entry static"
},
"field": "cells[1].Text.text",
"encoded": true,
"editor": "\u003cinput class=\"k-textbox\" id=\"cells_1__Text_text\" name=\"cells[1].Text.text\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"cells[1].Text.text\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e",
"editable": funcTrue
}, {
"attributes": {
"style": "width: 2em"
},
"command": [{
"name": "destroy",
"buttonType": "ImageAndText",
"text": "Delete"
}]
}],
"scrollable": false,
"editable": {
"confirmation": "Are you sure you want to delete this record?",
"confirmDelete": "Delete",
"cancelDelete": "Cancel",
"mode": "incell",
"template": null,
"createAt": "bottom",
"create": true,
"update": true,
"destroy": true
},
"toolbar": {
"command": [{
"name": null,
"buttonType": "ImageAndText",
"text": "Add new record"
}, {
"name": null,
"buttonType": "ImageAndText"
}]
},
"messages": {
"noRecords": "No records available."
},
"dataSource": {
"type": (function() {
if (kendo.data.transports['aspnetmvc-ajax']) {
return 'aspnetmvc-ajax';
} else {
throw new Error('The kendo.aspnetmvc.min.js script is not included.');
}
}
)(),
"transport": {
"read": {
"url": "/FeedbackForm/ReadQuestionGrid/57"
},
"prefix": "",
"update": {
"url": "/FeedbackForm/UpdateQuestionGrid"
},
"create": {
"url": "/FeedbackForm/CreateQuestionGrid/57"
},
"destroy": {
"url": "/FeedbackForm/DestroyQuestionGrid"
}
},
"serverPaging": true,
"serverSorting": true,
"serverFiltering": true,
"serverGrouping": true,
"serverAggregates": true,
"filter": [],
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"id": "id",
"fields": {
"id": {
"editable": false,
"type": "number",
"defaultValue": -1
},
"number": {
"type": "number"
},
"viewableby": {
"type": "object",
"defaultValue": []
},
"cells": {
"type": "object",
"defaultValue": [{
"Location": {
"id": 0,
"question_id": 0,
"column_id": 14
},
"Text": {
"id": 0,
"location_id": 0,
"viewableby": null,
"text": null
}
}, {
"Location": {
"id": 0,
"question_id": 0,
"column_id": 9
},
"Text": {
"id": 0,
"location_id": 0,
"viewableby": null,
"text": null
}
}]
}
}
}
},
"batch": true
},
"navigatable": true
});
});
<script>
kendo.syncReady(function() {
jQuery("#QuestionGridEditable").kendoSortable({
"change": onDrag,
"filter": "table \u003e tbody \u003e tr",
"container": "#QuestionGridEditable tbody",
"axis": "y",
"cursor": "move",
"placeholder": placeholder
});
});
The problem came down to the HintHandler. Setting the sortable item's HintHandler to a JavaScript function that returned false fixed the issue with the ghost image.

Ace Editor save as txt file

I have incorporated ace editor in my project
<div id="page-content-wrapper">
<pre id="editor">
</pre>
</div>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/text");
editor.setShowPrintMargin(false);
$('#mode').on('change', function(){
console.log("Change");
var newMode = document.getElementById('mode').value
console.log(newMode);
editor.getSession().setMode("ace/mode/" + newMode);
});
</script>
I want to store the contents written on this editor as a text file using php or javascript.
Need help on this.
Thanks in advance.
Cheers :)
I have implemented download file from ACE editor using Controller.
<div id="editor"></div>
<form action="downloadFromAce" method="post">
<textarea type="text" hidden id="valueInput" name=value ></textarea>
<button class="btn btn-primary" id="downloadBtn" type="submit">Download</button>
</form>
And on click of download button send this data (setting data in text area using jquery) form ACE editor to controller on POST request.
<script>
let editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/yaml");
$(document).ready(function () {
$("#downloadBtn").click(function () {
const data = editor.getValue();
$("#valueInput").val(data);
})
})
#PostMapping("/download")
Public void downloadFile(#ModelAttribute DownloadFileContent fileContent,HttpServletResponse response){
try{
response.setContentType("text/plain");
response.setHeader("content-Disposition","attachment;filename=demo.txt");
InputStream is=new ByteArrayInputStream(fileContent.getValue().getBytes());
IOUtils.copy(is,response.getOutputStream());
response.flushBuffer();
}catch(Exception e){
e.printStackTrace();
}
}
}
I have used spring boot for backend. But you can do that using other language also.
Here is a complete example of how to save a file, with a particular extension based on the selected mode.
Populate the mode selection box
Enter text you wish to save
Click the "Save" button in the toolbar
Enter a filename; a default file extension will be provided, based on the mode
Confirm
A dialog will be presented asking where to save the file
I used the following libraries:
jQuery - ace-editor requires it
tingle - nice light-weight plain js modal windows
FileSaver - an HTML5 saveAs() FileSaver implementation
const MODES = getModes();
ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11');
$('select[name="sel-mode"]').append(MODES.map(mode => new Option(mode.text, mode.value)));
const defaultMode = 'text';
const editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode(`ace/mode/${defaultMode}`);
editor.setShowPrintMargin(false);
$('select[name="sel-mode"]').on('change', function(e) {
editor.getSession().setMode("ace/mode/" + e.target.value);
}).val(defaultMode);
$('button[name="btn-save"]').on('click', e => saveDialog.open());
const saveDialog = new tingle.modal({
footer: true,
stickyFooter: false,
closeMethods: ['overlay', 'button', 'escape'],
closeLabel: 'Close',
cssClass: ['dialog-save'],
onOpen: function() {
$('input[name="filename"]').val(`*.${lookupFileExtension()}`);
},
onClose: function() {},
beforeClose: function() {
return true;
}
});
saveDialog.addFooterBtn('Confirm', 'tingle-btn tingle-btn--primary tingle-btn--pull-right', function() {
const filename = $('input[name="filename"]').val();
const file = new File([editor.getValue()], filename, {
type: "text/plain;charset=utf-8"
});
saveAs(file);
saveDialog.close();
});
saveDialog.addFooterBtn('Cancel', 'tingle-btn tingle-btn--danger tingle-btn--pull-right', function() {
saveDialog.close();
});
saveDialog.setContent($('<div>')
.append($('<h1>', {
text: 'Enter a filename'
}))
.append($('<input>', {
name: 'filename'
})).unwrap().html());
function lookupFileExtension() {
const selectedMode = $('select[name="sel-mode"]').val();
const mode = MODES.find(currMode => currMode.value === selectedMode);
return mode.extension || mode.value;
}
// TODO: Extensions need some more work.
// Option text/values via: https://ace.c9.io/tool/mode_creator.html
function getModes() {
return [{
"text": "ABAP",
"value": "abap"
}, {
"text": "ABC",
"value": "abc"
}, {
"text": "ActionScript",
"value": "actionscript",
"extension": "as"
}, {
"text": "ADA",
"value": "ada"
}, {
"text": "Alda",
"value": "alda"
}, {
"text": "Apache Conf",
"value": "apache_conf"
}, {
"text": "Apex",
"value": "apex"
}, {
"text": "AQL",
"value": "aql"
}, {
"text": "AsciiDoc",
"value": "asciidoc"
}, {
"text": "ASL",
"value": "asl"
}, {
"text": "Assembly x86",
"value": "assembly_x86"
}, {
"text": "AutoHotkey / AutoIt",
"value": "autohotkey",
"extension": "ahk"
}, {
"text": "BatchFile",
"value": "batchfile",
"extension": "bat"
}, {
"text": "C and C++",
"value": "c_cpp",
"extension": "cpp"
}, {
"text": "C9Search",
"value": "c9search"
}, {
"text": "Cirru",
"value": "cirru"
}, {
"text": "Clojure",
"value": "clojure",
"extension": "clj"
}, {
"text": "Cobol",
"value": "cobol",
"extension": "cob"
}, {
"text": "CoffeeScript",
"value": "coffee"
}, {
"text": "ColdFusion",
"value": "coldfusion",
"extension": "cfm"
}, {
"text": "Crystal",
"value": "crystal",
"extension": "rpt"
}, {
"text": "C#",
"value": "csharp",
"extension": "cs"
}, {
"text": "Csound Document",
"value": "csound_document",
"extension": "csd"
}, {
"text": "Csound",
"value": "csound_orchestra",
"extension": "csd"
}, {
"text": "Csound Score",
"value": "csound_score",
"extension": "csd"
}, {
"text": "CSS",
"value": "css"
}, {
"text": "Curly",
"value": "curly"
}, {
"text": "D",
"value": "d"
}, {
"text": "Dart",
"value": "dart"
}, {
"text": "Diff",
"value": "diff"
}, {
"text": "Dockerfile",
"value": "dockerfile"
}, {
"text": "Dot",
"value": "dot"
}, {
"text": "Drools",
"value": "drools",
"extension": "drl"
}, {
"text": "Edifact",
"value": "edifact",
"extension": "edi"
}, {
"text": "Eiffel",
"value": "eiffel",
"extension": "e"
}, {
"text": "EJS",
"value": "ejs"
}, {
"text": "Elixir",
"value": "elixir",
"extension": "ex"
}, {
"text": "Elm",
"value": "elm"
}, {
"text": "Erlang",
"value": "erlang",
"extension": "erl"
}, {
"text": "Forth",
"value": "forth",
"extension": "4th"
}, {
"text": "Fortran",
"value": "fortran",
"extension": "f90"
}, {
"text": "FSharp",
"value": "fsharp",
"extension": "fs"
}, {
"text": "FSL",
"value": "fsl"
}, {
"text": "FreeMarker",
"value": "ftl"
}, {
"text": "Gcode",
"value": "gcode"
}, {
"text": "Gherkin",
"value": "gherkin"
}, {
"text": "Gitignore",
"value": "gitignore"
}, {
"text": "Glsl",
"value": "glsl"
}, {
"text": "Gobstones",
"value": "gobstones"
}, {
"text": "Go",
"value": "golang",
"extension": "go"
}, {
"text": "GraphQLSchema",
"value": "graphqlschema"
}, {
"text": "Groovy",
"value": "groovy"
}, {
"text": "HAML",
"value": "haml"
}, {
"text": "Handlebars",
"value": "handlebars",
"extension": "hbs"
}, {
"text": "Haskell",
"value": "haskell",
"extension": "hs"
}, {
"text": "Haskell Cabal",
"value": "haskell_cabal",
"extension": "hs"
}, {
"text": "haXe",
"value": "haxe"
}, {
"text": "Hjson",
"value": "hjson"
}, {
"text": "HTML",
"value": "html"
}, {
"text": "HTML (Elixir)",
"value": "html_elixir"
}, {
"text": "HTML (Ruby)",
"value": "html_ruby"
}, {
"text": "INI",
"value": "ini"
}, {
"text": "Io",
"value": "io"
}, {
"text": "Jack",
"value": "jack"
}, {
"text": "Jade",
"value": "jade"
}, {
"text": "Java",
"value": "java"
}, {
"text": "JavaScript",
"value": "javascript",
"extension": "js"
}, {
"text": "JSON",
"value": "json",
"extension": "json"
}, {
"text": "JSON5",
"value": "json5",
"extension": "json"
}, {
"text": "JSONiq",
"value": "jsoniq"
}, {
"text": "JSP",
"value": "jsp",
"extension": "jsp"
}, {
"text": "JSSM",
"value": "jssm"
}, {
"text": "JSX",
"value": "jsx"
}, {
"text": "Julia",
"value": "julia"
}, {
"text": "Kotlin",
"value": "kotlin"
}, {
"text": "LaTeX",
"value": "latex",
"extension": "tex"
}, {
"text": "LESS",
"value": "less"
}, {
"text": "Liquid",
"value": "liquid"
}, {
"text": "Lisp",
"value": "lisp"
}, {
"text": "LiveScript",
"value": "livescript"
}, {
"text": "LogiQL",
"value": "logiql"
}, {
"text": "LSL",
"value": "lsl"
}, {
"text": "Lua",
"value": "lua"
}, {
"text": "LuaPage",
"value": "luapage"
}, {
"text": "Lucene",
"value": "lucene"
}, {
"text": "Makefile",
"value": "makefile"
}, {
"text": "Markdown",
"value": "markdown"
}, {
"text": "Mask",
"value": "mask"
}, {
"text": "MATLAB",
"value": "matlab"
}, {
"text": "Maze",
"value": "maze"
}, {
"text": "MediaWiki",
"value": "mediawiki"
}, {
"text": "MEL",
"value": "mel"
}, {
"text": "MIXAL",
"value": "mixal"
}, {
"text": "MUSHCode",
"value": "mushcode"
}, {
"text": "MySQL",
"value": "mysql",
"extension": "sql"
}, {
"text": "Nginx",
"value": "nginx"
}, {
"text": "Nim",
"value": "nim"
}, {
"text": "Nix",
"value": "nix"
}, {
"text": "NSIS",
"value": "nsis"
}, {
"text": "Nunjucks",
"value": "nunjucks"
}, {
"text": "Objective-C",
"value": "objectivec"
}, {
"text": "OCaml",
"value": "ocaml"
}, {
"text": "Pascal",
"value": "pascal",
"extension": "pas"
}, {
"text": "Perl",
"value": "perl",
"extension": "pl"
}, {
"text": "Perl 6",
"value": "perl6",
"extension": "pl"
}, {
"text": "pgSQL",
"value": "pgsql"
}, {
"text": "PHP",
"value": "php"
}, {
"text": "PHP (Blade Template)",
"value": "php_laravel_blade",
"extension": "php"
}, {
"text": "Pig",
"value": "pig"
}, {
"text": "Powershell",
"value": "powershell"
}, {
"text": "Praat",
"value": "praat"
}, {
"text": "Prisma",
"value": "prisma"
}, {
"text": "Prolog",
"value": "prolog"
}, {
"text": "Properties",
"value": "properties"
}, {
"text": "Protobuf",
"value": "protobuf"
}, {
"text": "Puppet",
"value": "puppet"
}, {
"text": "Python",
"value": "python",
"extension": "py"
}, {
"text": "QML",
"value": "qml"
}, {
"text": "R",
"value": "r"
}, {
"text": "Razor",
"value": "razor"
}, {
"text": "RDoc",
"value": "rdoc"
}, {
"text": "Red",
"value": "red"
}, {
"text": "RHTML",
"value": "rhtml"
}, {
"text": "RST",
"value": "rst"
}, {
"text": "Ruby",
"value": "ruby"
}, {
"text": "Rust",
"value": "rust"
}, {
"text": "SASS",
"value": "sass"
}, {
"text": "SCAD",
"value": "scad"
}, {
"text": "Scala",
"value": "scala"
}, {
"text": "Scheme",
"value": "scheme"
}, {
"text": "SCSS",
"value": "scss"
}, {
"text": "SH",
"value": "sh"
}, {
"text": "SJS",
"value": "sjs"
}, {
"text": "Slim",
"value": "slim"
}, {
"text": "Smarty",
"value": "smarty"
}, {
"text": "snippets",
"value": "snippets"
}, {
"text": "Soy Template",
"value": "soy_template"
}, {
"text": "Space",
"value": "space"
}, {
"text": "SQL",
"value": "sql"
}, {
"text": "SQLServer",
"value": "sqlserver"
}, {
"text": "Stylus",
"value": "stylus"
}, {
"text": "SVG",
"value": "svg"
}, {
"text": "Swift",
"value": "swift"
}, {
"text": "Tcl",
"value": "tcl"
}, {
"text": "Terraform",
"value": "terraform"
}, {
"text": "Tex",
"value": "tex"
}, {
"text": "Text",
"value": "text",
"extension": "txt"
}, {
"text": "Textile",
"value": "textile"
}, {
"text": "Toml",
"value": "toml"
}, {
"text": "TSX",
"value": "tsx"
}, {
"text": "Twig",
"value": "twig"
}, {
"text": "Typescript",
"value": "typescript",
"extension": "ts"
}, {
"text": "Vala",
"value": "vala"
}, {
"text": "VBScript",
"value": "vbscript"
}, {
"text": "Velocity",
"value": "velocity"
}, {
"text": "Verilog",
"value": "verilog"
}, {
"text": "VHDL",
"value": "vhdl"
}, {
"text": "Visualforce",
"value": "visualforce"
}, {
"text": "Wollok",
"value": "wollok"
}, {
"text": "XML",
"value": "xml"
}, {
"text": "XQuery",
"value": "xquery"
}, {
"text": "YAML",
"value": "yaml",
"extension": "yml"
}, {
"text": "Zeek",
"value": "zeek"
}, {
"text": "Django",
"value": "django"
}];
}
html,
body {
height: 100%;
width: 100%;
}
#page-content-wrapper {
height: 100%;
width: 100%;
}
.toolbar {
display: flex;
flex-direction: row;
height: 2em;
background: #111;
padding: 0 0.25em;
}
.toolbar button,
.toolbar select {
display: inline-block;
height: 1.67em;
margin-right: 0.5em;
align-self: center;
}
#editor {
width: 100%;
height: calc(100% - 3.33em);
}
.dialog-save h1 {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 0.5em;
}
.dialog-save .tingle-modal-box__content {
padding: 2rem;
}
.dialog-save .tingle-modal-box__footer {
padding: 1rem;
}
.dialog-save .tingle-btn {
padding: 0.667rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tingle/0.15.2/tingle.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tingle/0.15.2/tingle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/ace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/theme-monokai.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.11/mode-text.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver#2.0.2/dist/FileSaver.min.js"></script>
<div id="page-content-wrapper">
<div class="toolbar">
<select name="sel-mode"></select>
<button name="btn-save">Save</button>
</div>
<pre id="editor"></pre>
</div>
<input type="text" id="input-fileName" value="Result" placeholder="Enter file name">
<button id="download2" type="submit" class="btn btn-primary">Save</button>
<script type="text/javascript">
document.getElementById("download2").addEventListener("click", ()=>{
var filename = $("#input-fileName").val()
var file = new File([editor.getValue()],filename +".h4c", {type: "text/plain;charset=utf-8"});
saveAs(file);
})
Define a button as shown in the code which will trigger the function and the function gets the user input from ace editor and process it to a file with extension, by default i have set extension to .h4c change it according to your need and for the filename i have provided textbox.

Resources