Skip to content

Commit

Permalink
improving views in front-end
Browse files Browse the repository at this point in the history
  • Loading branch information
@dianamariand92
dianamariand92 committed Jul 16, 2020
1 parent f3bfe7a commit 4588c28
Show file tree
Hide file tree
Showing 5 changed files with 211 additions and 32 deletions.
8 changes: 8 additions & 0 deletions ui/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:100:300,400,500,700,900|Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="vendors/jsonviewer/jquery.json-viewer.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
<title>oscar-ui</title>
</head>
<body>
Expand All @@ -20,6 +23,11 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="vendors/jsonviewer/jquery.json-viewer.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>


<div id="app"></div>
</body>
Expand Down
153 changes: 133 additions & 20 deletions ui/src/components/forms/FunctionForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
<v-flex xs12 text-xs-center>
<span v-show="filerequire" style="color: #cc3300; font-size: 12px;"><b>Select a file or enter a URL</b></span>
</v-flex>


<v-flex xs12 sm8 offset-sm2 v-show="showSelectedFiles" id="selectedList" class="text-xs-center">
<input type="file" id="files" ref="files" hidden=true v-on:change="handleFilesUpload()"/>
Expand Down Expand Up @@ -108,8 +109,58 @@
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-flex>

<v-card flat>
<v-card-actions >
<v-btn
outline color="indigo"
round
small
@click.native="editSummernote()"
>
Edit
</v-btn>
<v-btn
outline color="indigo"
round
small
@click.native="saveSummernote()"
>
Save
</v-btn>
</v-card-actions>
<v-card-actions>

</v-card-actions>
</v-card>
</v-flex>
<v-flex xs-12 text-center v-show="editionMode==true && showSelectedFiles == false">
<span>Note: To edit the script sending in the creation of the service press the Edit button.</span>
<v-card flat>
<v-card-actions style="justify-content: center;">
<v-btn
outline color="indigo"
round
small
@click.native="editSummernote()"
>
Edit
</v-btn>
<v-btn
outline color="indigo"
round
small
@click.native="saveSummernote()"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
<v-flex xs12>
<!-- <div v-show="editScript==true" style="white-space: pre-wrap;" class="click2edit text-left"></div> -->
<div class="summernote" style="white-space: pre-wrap;"></div>
<!-- <div v-show="editScript==true" style="white-space: pre-wrap;" class="click2edit text-left"></div> -->
</v-flex>

<v-flex xs12>
<v-btn
Expand Down Expand Up @@ -219,7 +270,7 @@
</v-layout>
</v-card-text>
<v-card-actions >
<v-btn @click="closeWithoutSave" flat color="grey">Cancel</v-btn>
<v-btn @click="closeWithoutSave()" flat color="grey">Cancel</v-btn>
<v-btn @click="clear" flat color="red">Clear</v-btn>
<v-spacer></v-spacer>
<v-btn @click="show('input_output')" flat color="success">NEXT</v-btn>
Expand Down Expand Up @@ -535,7 +586,7 @@
</v-card-actions>
</div>
<v-card-actions >
<v-btn @click="closeWithoutSave" flat color="grey">Cancel</v-btn>
<v-btn @click="closeWithoutSave()" flat color="grey">Cancel</v-btn>
<v-btn @click="cleanfieldInput();cleanfieldOutput()" flat color="red">Clear</v-btn>
<v-spacer></v-spacer>
<v-btn @click="show('home')" flat color="blue">BACK</v-btn>
Expand Down Expand Up @@ -744,7 +795,7 @@
</v-card>
</div>
<v-card-actions >
<v-btn @click="closeWithoutSave" flat color="grey">Cancel</v-btn>
<v-btn @click="closeWithoutSave()" flat color="grey">Cancel</v-btn>
<v-btn @click="clear" flat color="red">Clear</v-btn>
<v-spacer></v-spacer>
<v-btn @click="show('input_output')" flat color="primary">BACK</v-btn>
Expand Down Expand Up @@ -876,11 +927,60 @@ export default {
showinput: true,
memory: '',
varsEnv: '',
editScript: false
}
},
methods: {
editSummernote(){
var _this = this
$('.summernote').summernote(
{
callbacks:{
onInit: function() {
$('.summernote').summernote('codeview.activate');
},
},
codeviewFilter: true,
codeviewIframeFilter: true,
focus: true,
height: 200, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['view', ['codeview']]
],
codemirror: { // codemirror options
theme: 'monokai',
lineNumbers: true,
lineWrapping: true,
tabMode: 'indent'
},
})
.on("summernote.enter", function(we, e) {
$(this).summernote("pasteHTML", "<br><br>");
e.preventDefault();
});
$('.summernote').summernote('code',_this.base64String)
},
saveSummernote(){
this.base64String = $('.summernote').summernote('code')
$('.summernote').summernote('destroy');
setTimeout(function(){
$('.summernote').css('display','none');
},100)
this.editScript = false
},
show(id){
$("#myTabContent .tab-pane-content").removeClass("show active")
$("#myTab .nav-link").removeClass("show active")
Expand Down Expand Up @@ -1056,6 +1156,11 @@ export default {
removeFile (key) {
this.files.splice(key, 1)
this.$refs.files.value = null
// this.base64String = ''
$('.summernote').summernote('destroy');
setTimeout(function(){
$('.summernote').css('display','none');
},100)
},
handleFilesUpload () {
this.files = []
Expand Down Expand Up @@ -1112,7 +1217,7 @@ export default {
});
this.cleanfield()
},
closeWithoutSave () {
closeWithoutSave() {
this.progress.active = false
this.dialog = false
this.clear()
Expand All @@ -1124,20 +1229,25 @@ export default {
return obj;
},
submit () {
if (this.$refs.form.validate() && this.files.length != 0) {
if(this.$refs.form.validate() && this.editionMode == true && this.base64String != ''){
this.editFunction()
}else if (this.$refs.form.validate() && this.files.length != 0) {
this.progress.active = true
this.editionMode ? this.editFunction() : this.newFunction()
this.envrequirehost = false
this.envrequiretoken = false
this.envrequirespace = false
}else if (this.editionMode == false){
}else {
if (this.files.length == 0){
this.filerequire = true
}else{
this.filerequire = false
}
this.show('home')
}
if (this.files.length == 0){
this.filerequire = true
}else{
this.filerequire = false
}
}
},
clear () {
Expand Down Expand Up @@ -1184,6 +1294,13 @@ export default {
this.showselectInput = false
this.showselectOutput = false
this.select_logLevel = 'INFO'
this.editScript = false
this.base64String = ''
$('.summernote').summernote('destroy');
setTimeout(function(){
$('.summernote').css('display','none');
},100)
},
newFunction () {
if (this.minio.endpoint != "") {
Expand Down Expand Up @@ -1272,7 +1389,7 @@ export default {
},
'input': this.inputs,
'output': this.outputs,
'script': script,
'script': this.base64String,
'storage_providers':this.form.storage_provider
}
Expand Down Expand Up @@ -1356,11 +1473,7 @@ export default {
}else{
this.showselectOutput = true
}
this.script = data.script
if(this.script != ""){
this.files.length = 1
}
this.base64String = data.script
})
}
}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/services.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default {
deleteAllJobCall(params,callBackHandler) {
axios({
method: 'delete',
url: '/system/logs/'+params,
url: '/system/logs/'+params.serviceName+'?all='+params.all,
auth: {
username: this.username_auth,
password: this.password_auth
Expand Down
34 changes: 32 additions & 2 deletions ui/src/views/BucketContent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,8 +571,38 @@ export default {
if(i>0){
before = i-1
}
if(i == 0){
if(first_path == ''){
var file = {
name: '',
path: '',
icon: '',
color: '',
lastModified: '',
size: '',
}
first.push(file)
}else if(first_path == this.paths[i][this.paths[i].length-1]){
var extension = this.getFileExtension1(first_path)
var icon_file = ''
var color_file = ''
if(extension == 'jpg' || extension == 'jpeg' || extension == 'png'){
icon_file = 'insert_photo'
color_file = 'blue'
}else{
icon_file = 'insert_drive_file'
color_file = 'gray'
}
var file = {
name: this.paths[i][0],
path: this.allData[i].name,
icon: icon_file,
color: color_file,
lastModified: response.files[i].lastModified,
size: response.files[i].size,
}
first.push(file)
}else if(i == 0){
var extension = this.getFileExtension1(first_path)
if (extension == undefined){
var folder = {
Expand Down
46 changes: 37 additions & 9 deletions ui/src/views/Logs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
<v-btn flat icon color="blue" @click="handleUpdate()">
<v-icon>autorenew</v-icon>
</v-btn>
<v-btn color="green lighten-2" dark @click="deleteSuccessJobs()">DELETE SUCCESS JOBS</v-btn>
<v-btn color="error" dark @click="deleteAllJobs()">DELETE ALL JOBS</v-btn>
</v-card-title>
<v-data-table
Expand Down Expand Up @@ -105,6 +106,7 @@ export default {
pagination: {
descending: true,
sortBy: 'create_time',
rowsPerPage: 10
},
jobs: [],
index:'',
Expand Down Expand Up @@ -148,28 +150,54 @@ export default {
deleteJob(job,job_name){
this.index = this.jobs.indexOf(job)
this.params_delete = {serviceName: this.serviceName, jobName: job_name}
if (confirm('Are you sure you want to delete this function?')) {
if (confirm('Are you sure you want to delete this job?')) {
this.deleteJobCall(this.params_delete, this.deleteJobCallback);
}
},
deleteJobCallback(response){
if (response.status ==200 ) { //check response
this.jobs.splice(this.index, 1)
if (response.status==204 ) { //check response
this.jobs.splice(this.index, 1)
window.getApp.$emit('APP_SHOW_SNACKBAR', { text: `Job ${this.params_delete.jobName} was deleted`, color: 'success' })
}else{
window.getApp.$emit('APP_SHOW_SNACKBAR', { text: response, color: 'error' })
}
}
},
deleteAllJobs(){
if (confirm('Are you sure you want to delete this function?')) {
this.deleteAllJobCall(this.serviceName, this.deleteAllJobCallback);
var params = {
serviceName: this.serviceName,
all:true
}
if (confirm('Are you sure you want to delete this jobs?')) {
this.deleteAllJobCall(params, this.deleteAllJobCallback);
}
},
deleteAllJobCallback(response){
if (response.status=204) { //check response
this.listJobsCall(this.serviceName, this.listJobsCallback);
window.getApp.$emit('APP_SHOW_SNACKBAR', { text: `All Jobs had been deleted`, color: 'success' })
if (response.status==204) { //check response
window.getApp.$emit('APP_SHOW_SNACKBAR', { text: `All Jobs had been deleted`, color: 'success' })
this.jobs = []
}else{
window.getApp.$emit('APP_SHOW_SNACKBAR', { text: response, color: 'error' })
}
},
deleteSuccessJobs(){
var params = {
serviceName: this.serviceName,
all:false
}
if (confirm('Are you sure you want to delete the successful jobs?')) {
this.deleteAllJobCall(params, this.deleteSuccessJobCallback);
}
},
deleteSuccessJobCallback(response){
var _this = this
if (response.status==204) { //check response
setTimeout(function(){
_this.handleUpdate()
},3000)
window.getApp.$emit('APP_SHOW_SNACKBAR', { text: `Successful Jobs had been deleted`, color: 'success' })
}else{
window.getApp.$emit('APP_SHOW_SNACKBAR', { text: response, color: 'error' })
}
Expand Down

0 comments on commit 4588c28

Please sign in to comment.