Bradley Hilton
8 years ago
parent
e9815fd785
commit
361a645ed3
@ -0,0 +1,4 @@ |
||||
input.rocketlet-author-name { |
||||
width: auto !important; |
||||
display: inline-block !important; |
||||
} |
||||
@ -0,0 +1,230 @@ |
||||
<template name="rocketletManage"> |
||||
<div class="main-content-flex"> |
||||
{{#with rocketlet}} |
||||
<section class="page-container page-list page-settings flex-tab-main-content"> |
||||
<header class="fixed-title"> |
||||
{{> burger}} |
||||
<a href="{{pathFor "rocketlets"}}" title="{{_ "Back_to_Manage_Rocketlets"}}"> |
||||
<i class="icon-left-open"></i> |
||||
</a> |
||||
|
||||
<h2> |
||||
<span class="room-title">{{_ "Manage_the_Rocketlet"}}: "{{name}}"</span> |
||||
</h2> |
||||
</header> |
||||
<div class="content background-transparent-dark"> |
||||
{{#requiresPermission 'manage-rocketlets'}} |
||||
<div class="rocket-form"> |
||||
<div class="section"> |
||||
<div class="section-title"> |
||||
<div class="section-title-text"> |
||||
{{_ "Rocketlet_Information"}} |
||||
</div> |
||||
<div class="section-title-right"> |
||||
<button class="button primary collapse"> |
||||
<span>{{_ "Collapse"}}</span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div class="section-content"> |
||||
<div class="input-line double-col"> |
||||
<label>{{_ "Name"}}</label> |
||||
<div> |
||||
<input class="input-monitor" type="text" disabled value="{{name}}"> |
||||
</div> |
||||
</div> |
||||
<div class="input-line double-col"> |
||||
<label>{{_ "Description"}}</label> |
||||
<div> |
||||
<input class="input-monitor" type="text" disabled value="{{description}}"> |
||||
</div> |
||||
</div> |
||||
<div class="input-line double-col"> |
||||
<label>{{_ "Version"}}</label> |
||||
<div> |
||||
<input class="input-monitor" type="text" disabled value="{{version}}"> |
||||
</div> |
||||
</div> |
||||
<div class="input-line double-col"> |
||||
<label>{{_ "Author_Information"}}</label> |
||||
<div> |
||||
<input class="input-monitor rocketlet-author-name" type="text" disabled value="{{author.name}}"> |
||||
{{#if author.homepage}}<a class="button" target="_blank" href="{{author.homepage}}">{{_ "Website"}}</a>{{/if}} |
||||
{{#if author.support}}<a class="button" target="_blank" href="{{author.support}}">{{_ "Support"}}</a>{{/if}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="section section-collapsed"> |
||||
<div class="section-title"> |
||||
<div class="section-title-text"> |
||||
{{_ "Rocketlets_Settings"}} |
||||
</div> |
||||
<div class="section-title-right"> |
||||
<button class="button save">{{_ "Save"}}</button> |
||||
<button class="button primary expand"> |
||||
<span>{{_ "Expand"}}</span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div class="section-content"> |
||||
{{#each settings}} |
||||
<div class="input-line double-col"> |
||||
<label class="setting-label">{{_ i18nLabel}}</label> |
||||
<div class="setting-field"> |
||||
{{#if $eq type 'string'}} |
||||
{{#if multiline}} |
||||
<textarea class="input-monitor" name="{{id}}" rows="4" style="height: auto" {{isDisabled}}>{{value}}</textarea> |
||||
{{else}} |
||||
<input class="input-monitor" type="text" name="{{id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'relativeUrl'}} |
||||
<input class="input-monitor" type="text" name="{{id}}" value="{{relativeUrl value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'password'}} |
||||
<input class="input-monitor" type="password" name="{{id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'int'}} |
||||
<input class="input-monitor" type="number" name="{{id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'boolean'}} |
||||
<label><input class="input-monitor" type="radio" name="{{id}}" value="1" checked="{{$eq value true}}" {{isDisabled}}/> {{_ "True"}}</label> |
||||
<label><input class="input-monitor" type="radio" name="{{id}}" value="0" checked="{{$eq value false}}" {{isDisabled}}/> {{_ "False"}}</label> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'select'}} |
||||
<div class="select-arrow"> |
||||
<i class="icon-down-open secondary-font-color"></i> |
||||
</div> |
||||
<select class="input-monitor" name="{{id}}" {{isDisabled}}> |
||||
{{#each values}} |
||||
<option value="{{key}}" selected="{{selectedOption ../id key}}">{{_ i18nLabel}}</option> |
||||
{{/each}} |
||||
</select> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'language'}} |
||||
<div class="select-arrow"> |
||||
<i class="icon-down-open secondary-font-color"></i> |
||||
</div> |
||||
<select class="input-monitor" name="{{id}}" {{isDisabled}}> |
||||
{{#each languages}} |
||||
<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option> |
||||
{{/each}} |
||||
</select> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'color'}} |
||||
<div class="horizontal"> |
||||
{{#if $eq editor 'color'}} |
||||
<div class="flex-grow-1"> |
||||
<input class="input-monitor colorpicker-input" type="text" name="{{id}}" value="{{value}}" autocomplete="off" {{isDisabled}}/> |
||||
<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span> |
||||
</div> |
||||
{{/if}} |
||||
{{#if $eq editor 'expression'}} |
||||
<div class="flex-grow-1"> |
||||
<input class="input-monitor" type="text" name="{{id}}" value="{{value}}" {{isDisabled}}/> |
||||
</div> |
||||
{{/if}} |
||||
<div class="color-editor"> |
||||
<div class="select-arrow"> |
||||
<i class="icon-down-open secondary-font-color"></i> |
||||
</div> |
||||
<select name="color-editor"> |
||||
{{#each allowedTypes}} |
||||
<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option> |
||||
{{/each}} |
||||
</select> |
||||
</div> |
||||
</div> |
||||
<div class="settings-description">Variable name: {{getColorVariable id}}</div> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'font'}} |
||||
<input class="input-monitor" type="text" name="{{id}}" value="{{value}}" {{isDisabled}}/> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'code'}} |
||||
{{#if isDisabled.disabled}} |
||||
{{> CodeMirror name=id options=(getEditorOptions true) code=(i18nDefaultValue) }} |
||||
{{else}} |
||||
<div class="code-mirror-box" data-editor-id="{{id}}"> |
||||
<div class="title"> |
||||
{{label}} |
||||
</div> |
||||
{{> CodeMirror name=id options=getEditorOptions code=value }} |
||||
{{setEditorOnBlur id}} |
||||
<div class="buttons"> |
||||
<button class="button primary button-fullscreen">Full Screen</button> |
||||
<button class="button primary button-restore">Exit Full Screen</button> |
||||
</div> |
||||
</div> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'action'}} |
||||
{{#if hasChanges section}} |
||||
<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span> |
||||
{{else}} |
||||
<button type="button" class="button primary action" data-setting="{{id}}" data-action="{{value}}" {{isDisabled}}>{{_ actionText}}</button> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'asset'}} |
||||
{{#if value.url}} |
||||
<div class="settings-file-preview"> |
||||
<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div> |
||||
<div class="action"> |
||||
<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button> |
||||
</div> |
||||
</div> |
||||
{{else}} |
||||
<div class="settings-file-preview"> |
||||
<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div> |
||||
<div class="action"> |
||||
<div class="button primary">{{_ 'Select_file'}} |
||||
<input type="file" accept="{{assetAccept fileConstraints}}" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{{/if}} |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'roomPick'}} |
||||
<div> |
||||
{{> inputAutocomplete settings=autocompleteRoom id=id name=id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}} |
||||
<ul class="selected-rooms"> |
||||
{{#each selectedRooms}} |
||||
<li class="remove-room" data-setting={{../id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li> |
||||
{{/each}} |
||||
</ul> |
||||
</div> |
||||
{{/if}} |
||||
|
||||
{{#if i18nDescription}} |
||||
<div class="settings-description">{{{parseDescription i18nDescription}}}</div> |
||||
{{/if}} |
||||
{{#if i18nAlert}} |
||||
<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ i18nAlert}}}</div> |
||||
{{/if}} |
||||
</div> |
||||
</div> |
||||
{{/each}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
{{/requiresPermission}} |
||||
</div> |
||||
</section> |
||||
{{/with}} |
||||
{{#with flexData}} |
||||
{{> flexTabBar}} |
||||
{{/with}} |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,111 @@ |
||||
Template.rocketletManage.onCreated(function() { |
||||
const instance = this; |
||||
this.ready = new ReactiveVar(false); |
||||
this.rocketlet = new ReactiveVar({}); |
||||
this.settings = new ReactiveVar({}); |
||||
|
||||
const id = FlowRouter.getParam('rocketletId'); |
||||
|
||||
console.log(id); |
||||
|
||||
const got = { info: false, settings: false }; |
||||
|
||||
RocketChat.API.get(`rocketlets/${ id }`).then((result) => { |
||||
instance.rocketlet.set(result.rocketlet); |
||||
console.log(result.rocketlet); |
||||
|
||||
got.info = true; |
||||
if (got.info && got.settings) { |
||||
this.ready.set(true); |
||||
} |
||||
}); |
||||
|
||||
RocketChat.API.get(`rocketlets/${ id }/settings`).then((result) => { |
||||
Object.keys(result.settings).forEach((k) => { |
||||
result.settings[k].oldValue = result.settings[k].value; |
||||
}); |
||||
|
||||
instance.settings.set(result.settings); |
||||
console.log(instance.settings.get()); |
||||
|
||||
got.settings = true; |
||||
if (got.info && got.settings) { |
||||
this.ready.set(true); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
Template.rocketletManage.helpers({ |
||||
isReady() { |
||||
if (Template.instance().ready != null) { |
||||
return Template.instance().ready.get(); |
||||
} |
||||
|
||||
return false; |
||||
}, |
||||
rocketlet() { |
||||
return Template.instance().rocketlet.get(); |
||||
}, |
||||
settings() { |
||||
return Object.values(Template.instance().settings.get()); |
||||
}, |
||||
parseDescription(i18nDescription) { |
||||
const item = RocketChat.Markdown.parseNotEscaped({ html: t(i18nDescription) }); |
||||
|
||||
item.tokens.forEach((t) => item.html = item.html.replace(t.token, t.text)); |
||||
|
||||
return item.html; |
||||
} |
||||
}); |
||||
|
||||
Template.rocketletManage.events({ |
||||
'click .expand': (e) => { |
||||
$(e.currentTarget).closest('.section').removeClass('section-collapsed'); |
||||
$(e.currentTarget).closest('button').removeClass('expand').addClass('collapse').find('span').text(TAPi18n.__('Collapse')); |
||||
$('.CodeMirror').each((index, codeMirror) => codeMirror.CodeMirror.refresh()); |
||||
}, |
||||
|
||||
'click .collapse': (e) => { |
||||
$(e.currentTarget).closest('.section').addClass('section-collapsed'); |
||||
$(e.currentTarget).closest('button').addClass('expand').removeClass('collapse').find('span').text(TAPi18n.__('Expand')); |
||||
}, |
||||
|
||||
'click .save': (e, t) => { |
||||
const toSave = []; |
||||
|
||||
Object.keys(t.settings.get()).forEach((k) => { |
||||
const setting = t.settings.get()[k]; |
||||
if (setting.hasChanged) { |
||||
toSave.push(setting); |
||||
} |
||||
}); |
||||
|
||||
if (toSave.length === 0) { |
||||
console.log('Nothing to save..'); |
||||
return; |
||||
} |
||||
|
||||
const rocketletId = FlowRouter.getParam('rocketletId'); |
||||
RocketChat.API.post(`rocketlets/${ rocketletId }/settings`, undefined, { settings: toSave }).then((result) => { |
||||
console.log('Updating results:', result); |
||||
}); |
||||
}, |
||||
|
||||
'change .input-monitor, keyup .input-monitor': _.throttle(function(e, t) { |
||||
let value = _.trim($(e.target).val()); |
||||
switch (this.type) { |
||||
case 'int': |
||||
value = parseInt(value); |
||||
break; |
||||
case 'boolean': |
||||
value = value === '1'; |
||||
} |
||||
|
||||
const setting = t.settings.get()[this.id]; |
||||
setting.value = value; |
||||
|
||||
if (setting.oldValue !== setting.value) { |
||||
t.settings.get()[this.id].hasChanged = true; |
||||
} |
||||
}, 500) |
||||
}); |
||||
Loading…
Reference in new issue