OVMS3/OVMS.V3/components/ovms_webserver/dev/filedialog.htm

120 lines
3.7 KiB
HTML
Raw Normal View History

<!--
Test/Development/Documentation page
- enable web server file access
- upload to web file path, e.g. /sd/dev/filedialog.htm
- open in framework by e.g. http://test1.local/#/dev/filedialog.htm
-->
<div class="filedialog" id="fileselect"/>
<div class="panel panel-primary">
<div class="panel-heading">FileDialog Test</div>
<div class="panel-body">
<h2>Dynamic API</h2>
<p>
<button class="btn btn-default" id="action-load">Load</button>
<button class="btn btn-default" id="action-save">Save</button>
</p>
<pre id="log"/>
<h2>Data API</h2>
<div class="input-group">
<input type="text" class="form-control font-monospace" placeholder="Enter file name"
name="filename" id="input-filename" value="" autocapitalize="none" autocorrect="off"
autocomplete="section-demo" spellcheck="false">
<div class="input-group-btn">
<!-- use data-toggle="filedialog", data-target & data-input on the button: -->
<button type="button" class="btn btn-default" data-toggle="filedialog" data-target="#fd-api" data-input="#input-filename">Select</button>
</div>
</div>
<!-- This is the file dialog triggered by the button: -->
<div class="filedialog" id="fd-api" data-options='{
"title": "This is a data API dialog",
"path": "/sd/foo/",
"quicknav": ["/sd/", "/sd/foo/", "/sd/bar"]
}' />
<!-- …that's it, no JS code necessary.
Note: JSON syntax needs to be strict here, see JS console for errors.
-->
</div>
</div>
<script>
// =======================================================================================
// FileDialog is a Dialog with an embedded FileBrowser.
//
// The input object combines the dialog button and the file browser data.
//
// Options:
// title: 'Select file', -- dialog title
// submit: 'Select', -- label of submit button
// select: 'f', -- 'f' = only files selectable (default), 'd' = only directories
// onSubmit: null, -- callback function(input)
// onCancel: null, -- callback function(input)
//
// …inherited from FileBrowser:
// path: '',
// quicknav: ['/sd/', '/store/'],
// filter: null,
// sortBy: null,
// sortDir: 1,
//
// …inherited from Dialog:
// backdrop: true,
// keyboard: true,
// transition: 'fade',
// size: 'lg',
// onUpdate: null,
//
// Init dialog:
$("#fileselect").filedialog({
path: '/store/scripts/',
quicknav: ['/store/scripts/', '/store/events/', '/store/obd2ecu/'],
});
$('#action-load').on('click', function(){
$('#log').empty();
$("#fileselect").filedialog('show', {
title: "Load Script",
submit: "Load",
onSubmit: function(input) {
// This is called when the user doubleclicks an entry or presses Enter in a directory.
// Note: you need to check if input.file is valid (empty = directory selected).
if (input.file)
$('#log').text('Loading: "' + input.path + '"\n');
else
$('#log').text('Directory selection: "' + input.path + '"\n');
},
onCancel: function(input) {
// This is called when the user cancels or closes the dialog.
$('#log').text('Load cancelled\n');
},
});
});
$('#action-save').on('click', function(){
$('#log').empty();
$("#fileselect").filedialog('show', {
title: "Save Script",
submit: "Save",
onSubmit: function(input) {
if (input.file)
$('#log').text('Saving: "' + input.path + '"\n');
else
$('#log').text('Directory selection: "' + input.path + '"\n');
},
onCancel: function(input) {
$('#log').text('Save cancelled\n');
},
});
});
</script>