|
26 | 26 | @section('content') |
27 | 27 | <div class="col-md-12"> |
28 | 28 | <h3 class="nopad"><small>Editing File: /home/container/{{ $file }}</small></h3> |
29 | | - <form method="post" id="editing_file"> |
30 | | - <div class="form-group"> |
31 | | - <div> |
32 | | - @if (in_array($extension, ['yaml', 'yml'])) |
33 | | - <div class="alert alert-info"> |
34 | | - {!! trans('server.files.yaml_notice', [ |
35 | | - 'dropdown' => '<select id="space_yaml"> |
36 | | - <option value="2">2</option> |
37 | | - <option value="4" selected="selected">4</option> |
38 | | - <option value="8">8</option> |
39 | | - </select>' |
40 | | - ]) !!} |
41 | | - </div> |
42 | | - @endif |
43 | | - <textarea name="file_contents" id="fileContent" style="border: 1px solid #dddddd;height:500px;" class="form-control console">{{ $contents }}</textarea> |
44 | | - </div> |
| 29 | + <div class="row"> |
| 30 | + <div class="col-md-12"> |
| 31 | + <div id="editor" style="height:500px;">{{ $contents }}</div> |
45 | 32 | </div> |
46 | | - @can('save-files', $server) |
47 | | - <div class="form-group"> |
48 | | - <div> |
49 | | - <input type="hidden" name="file" value="{{ $file }}" /> |
50 | | - {!! csrf_field() !!} |
51 | | - <button class="btn btn-primary btn-sm" id="save_file" type="submit">{{ trans('strings.save') }}</button> |
52 | | - <a href="/server/{{ $server->uuidShort }}/files?dir={{ rawurlencode($directory) }}" class="text-muted pull-right"><small>{{ trans('server.files.back') }}</small></a> |
53 | | - </div> |
| 33 | + </div> |
| 34 | + @can('save-files', $server) |
| 35 | + <div class="row"> |
| 36 | + <div class="col-md-12"> |
| 37 | + <hr /> |
| 38 | + <input type="hidden" name="file" value="{{ $file }}" /> |
| 39 | + <button class="btn btn-primary btn-sm" id="save_file" type="submit">{{ trans('strings.save') }}</button> |
| 40 | + <a href="/server/{{ $server->uuidShort }}/files?dir={{ rawurlencode($directory) }}" class="text-muted pull-right"><small>{{ trans('server.files.back') }}</small></a> |
54 | 41 | </div> |
55 | | - @endcan |
56 | | - </form> |
| 42 | + </div> |
| 43 | + @endcan |
57 | 44 | </div> |
| 45 | +{!! Theme::js('js/vendor/ace/ace.js') !!} |
| 46 | +{!! Theme::js('js/vendor/ace/ext-modelist.js') !!} |
58 | 47 | <script> |
59 | 48 | $(document).ready(function () { |
60 | 49 | $('.server-files').addClass('active'); |
61 | | - $('textarea').keydown(function (e) { |
62 | | - if (e.keyCode === 9) { |
| 50 | + const Editor = ace.edit('editor'); |
| 51 | + const Modelist = ace.require('ace/ext/modelist') |
63 | 52 |
|
64 | | - var start = this.selectionStart; |
65 | | - var end = this.selectionEnd; |
66 | | - var value = $(this).val(); |
67 | | - var joinYML = '\t'; |
68 | | - var yamlSpaces = 1; |
| 53 | + Editor.setTheme('ace/theme/github'); |
| 54 | + Editor.getSession().setMode(Modelist.getModeForPath('{{ $stat->name }}').mode); |
| 55 | + Editor.getSession().setUseWrapMode(true); |
| 56 | + Editor.setShowPrintMargin(false); |
69 | 57 |
|
70 | | - @if (in_array($extension, ['yaml', 'yml'])) |
71 | | - yamlSpaces = parseInt($("#space_yaml").val()); |
72 | | - joinYML = Array(yamlSpaces + 1).join(" "); |
73 | | - @endif |
74 | | -
|
75 | | - $(this).val(value.substring(0, start) + joinYML + value.substring(end)); |
76 | | - this.selectionStart = this.selectionEnd = start + yamlSpaces; |
77 | | - e.preventDefault(); |
78 | | -
|
79 | | - } |
80 | | - }); |
81 | 58 | @can('save-files', $server) |
82 | | - $('#save_file').click(function (e) { |
| 59 | + Editor.commands.addCommand({ |
| 60 | + name: 'save', |
| 61 | + bindKey: {win: 'Ctrl-S', mac: 'Command-S'}, |
| 62 | + exec: function(editor) { |
| 63 | + save(); |
| 64 | + }, |
| 65 | + readOnly: false |
| 66 | + }); |
| 67 | +
|
| 68 | + $('#save_file').on('click', function (e) { |
83 | 69 | e.preventDefault(); |
| 70 | + save(); |
| 71 | + }); |
84 | 72 |
|
| 73 | + function save() { |
85 | 74 | var fileName = $('input[name="file"]').val(); |
86 | | - var fileContents = $('#fileContent').val(); |
87 | | -
|
88 | 75 | $('#save_file').append(' <i class="fa fa-spinner fa fa-spin"></i>').addClass('disabled'); |
89 | 76 | $.ajax({ |
90 | 77 | type: 'POST', |
91 | 78 | url: '{{ route('server.files.save', $server->uuidShort) }}', |
92 | 79 | headers: { 'X-CSRF-Token': '{{ csrf_token() }}' }, |
93 | 80 | data: { |
94 | 81 | file: fileName, |
95 | | - contents: fileContents |
| 82 | + contents: Editor.getValue() |
96 | 83 | } |
97 | 84 | }).done(function (data) { |
98 | | - $('#tpl_messages').html('<div class="alert alert-success">{{ trans('server.files.saved') }}</div>').show().delay(3000).slideUp(); |
| 85 | + $.notify({ |
| 86 | + message: '{{ trans('server.files.saved') }}' |
| 87 | + }, { |
| 88 | + type: 'success' |
| 89 | + }); |
99 | 90 | }).fail(function (jqXHR) { |
100 | | - $('#tpl_messages').html('<div class="alert alert-danger">' + jqXHR.responseText + '</div>'); |
| 91 | + $.notify({ |
| 92 | + message: jqXHR.responseText |
| 93 | + }, { |
| 94 | + type: 'danger' |
| 95 | + }); |
101 | 96 | }).always(function () { |
102 | 97 | $('#save_file').html('{{ trans('strings.save') }}').removeClass('disabled'); |
103 | 98 | }); |
104 | | -
|
105 | | - }); |
| 99 | + } |
106 | 100 | @endcan |
107 | 101 | }); |
108 | 102 | </script> |
|
0 commit comments