diff --git a/app/assets/images/otrs-logo.png b/app/assets/images/otrs-logo.png new file mode 100644 index 000000000..437fb4d14 Binary files /dev/null and b/app/assets/images/otrs-logo.png differ diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee index c262c410e..2554ac2d2 100644 --- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee +++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee @@ -497,4 +497,72 @@ class ContentSidebarLeft extends App.ControllerContent App.Config.set( 'layout_ref/content_sidebar_left', ContentSidebarLeft, 'Routes' ) + +class ImportWizard extends App.ControllerContent + elements: + '[data-target]': 'links' + '[data-slide]': 'slides' + '[data-action]': 'actions' + '#otrs-link': 'otrsLink' + '.input-feedback':'inputFeedback' + + constructor: -> + super + @render() + + @links.on 'click', @navigate + @actions.on 'click', @action + + # wait 500 ms after the last user input before we check the link + @otrsLink.on 'input', _.debounce(@checkOtrsLink, 600) + + checkOtrsLink: (e) => + if @otrsLink.val() is "" + @inputFeedback.attr('data-state', '') + return + + @inputFeedback.attr('data-state', 'loading') + + # send fake callback + if @otrsLink.val() is '1337' + state = 'success' + else + state = 'error' + + setTimeout @otrsLinkCallback, 1500, state + + otrsLinkCallback: (state) => + @inputFeedback.attr('data-state', state) + + @showNextButton @inputFeedback if state is 'success' + + action: (e) => + button = $(e.delegateTarget) + + switch button.attr('data-action') + when "reveal" then @showNextButton button + + showNextButton: (sibling) -> + sibling.parents('.wizard-slide').find('.btn.hide').removeClass('hide') + + navigate: (e) => + target = $(e.delegateTarget).attr('data-target') + targetSlide = @$("[data-slide=#{ target }]") + + if targetSlide + @goToSlide targetSlide + + goToSlide: (targetSlide) => + @slides.addClass('hide') + targetSlide.removeClass('hide') + + if targetSlide.attr('data-hide') + setTimeout @goToSlide, targetSlide.attr('data-hide'), targetSlide.next() + + + render: -> + @html App.view('layout_ref/import_wizard')() + +App.Config.set( 'layout_ref/import_wizard', ImportWizard, 'Routes' ) + App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' ) diff --git a/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco b/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco new file mode 100644 index 000000000..e28ced7a2 --- /dev/null +++ b/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco @@ -0,0 +1,90 @@ +
+
+
+

Import Tickets

+
+
+ +
+
+
+
+

Create OTRS Migration Plugin

+
+

+ Personalise Migration Plugin .. +

+
+
+ Go Back +
+
+
+

Download OTRS Migration Plugin

+
+

+ Download and install this personalised OTRS Migration Plugin on your OTRS System: +

+ Personal Migration Plugin +
+
+ Go Back +
Next
+
+
+
+

Link OTRS

+
+

+ Enter the link provided by the plugin at the end of the installation to link the two systems: +

+
+ +
+ +
+
+
+
+
+
+
+
+
+ Go Back +
Migrate OTRS Data
+
+
+
+

OTRS Migration

+
+ + + + + + + +
42/42 + Users +
+
+
+
29999/29999 + Tickets +
+
+
+
+ Configuration +
+
+
+
+
+
+ Done +
+
+
+
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/layout_ref/index.jst.eco b/app/assets/javascripts/app/views/layout_ref/index.jst.eco index 9d87a5a1f..7c81632af 100644 --- a/app/assets/javascripts/app/views/layout_ref/index.jst.eco +++ b/app/assets/javascripts/app/views/layout_ref/index.jst.eco @@ -14,6 +14,7 @@
  • Communication Reply - no content Example
  • Communication Reply - with content Example
  • Communication Reply - with multiline content Example
    • +
  • Import Wizard
    • \ No newline at end of file diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb index fee14cb7d..2da9dafdd 100644 --- a/app/assets/stylesheets/zzz.css.erb +++ b/app/assets/stylesheets/zzz.css.erb @@ -609,7 +609,11 @@ textarea, margin-top: 0; } -.login, .getstarted, .reset_password, .signup { +.login, +.getstarted, +.reset_password, +.signup, +.darkBackground { padding: 10px; height: auto; background: hsl(234,10%,19%); @@ -1550,6 +1554,13 @@ footer { background: hsl(0,65%,55%); } +.btn--download .download.icon { + margin-right: 6px; + margin-top: 3px; + margin-left: -10px; + vertical-align: top; +} + .navigation { width: 260px; background: #26272e; @@ -3768,6 +3779,114 @@ footer { white-space: nowrap; } +.wizard { + width: 360px; +} + +.wizard h2 { + text-align: center; + border-bottom: 1px solid rgba(0,0,0,.13); + padding-bottom: 8px; + margin-bottom: 16px; +} + +.wizard .form-group { + margin: 0; +} + +.wizard-slide { + min-height: 260px; +} + +.wizard-body { + padding-bottom: 15px; +} + +.wizard-controls { + padding-top: 15px; + height: 39px; +} + +.wizard-loadingText { + text-align: center; + margin: 0; +} + +.wizard-loadingText .loading { + vertical-align: middle; + margin-right: 10px; +} + +.import-source { + cursor: pointer; + border-radius: 5px; + border: 1px solid rgba(0,0,0,.13); + height: 50px; + margin: 5px 0; +} + +.input-feedback { + position: absolute; + padding-left: 10px; + right: 1px; + top: 1px; + bottom: 1px; + width: 52px; + border-radius: 0 5px 5px 0; + background: linear-gradient(to right, transparent, white 33%); + pointer-events: none; +} + +.input-feedback .icon { + display: none; +} + +.input-feedback[data-state=loading] .loading.icon, +.input-feedback[data-state=error] .error.icon, +.input-feedback[data-state=success] .checkmark.icon { + display: block; +} + +.progressTable { + max-width: 100%; + margin: 0 auto; +} + +.progressTable td { + padding: 8px 5px; +} + +.progressTable tr:not(:last-child) { + border-bottom: 1px solid #eee; +} + +.progressTable td:first-child { + text-align: right; +} + +.progressTable-progressCell { + width: 120px; +} + +.progress { + height: 10px; + margin: 3px 0 0; +} + + .progress .bar { + background: #389ed9; + height: 100%; + } + +.progressTable .progress + .checkmark { + margin-left: 10px; + opacity: 0; +} + +.progressTable tr.is-done .checkmark { + opacity: 1; +} + /* ----------------