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