add import wizard

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' )

app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco

@@ -0,0 +1,90 @@
+<div class="main flex centered darkBackground">
+  <div class="import wizard hero-unit">
+    <div class="wizard-slide vertical" data-slide="home">
+      <h2>Import Tickets</h2>
+      <div class="wizard-body flex vertical justified">
+        <div class="import-source centered" data-source="otrs" data-target="otrs-prepare-plugin">
+          <img class="logo" src="<%= @C('otrs-logo.png') %>" alt="OTRS" height="37">
+        </div>
+      </div>
+    </div>
+    <div class="wizard-slide vertical hide" data-slide="otrs-prepare-plugin" data-hide="2330">
+      <h2>Create OTRS Migration Plugin</h2>
+      <div class="wizard-body flex vertical justified">
+        <p class="wizard-loadingText">
+          <span class="loading icon"></span> Personalise Migration Plugin ..
+        </p>
+      </div>
+      <div class="wizard-controls horizontal center">
+        <a class="subtle-link" data-target="home">Go Back</a>
+      </div>
+    </div>
+    <div class="wizard-slide vertical hide" data-slide="otrs-plugin">
+      <h2>Download OTRS Migration Plugin</h2>
+      <div class="wizard-body flex vertical justified">
+        <p>
+          Download and install this personalised OTRS Migration Plugin on your OTRS System:
+        </p>
+        <a class="btn btn--primary btn--download" download data-action="reveal"><span class="download icon"></span> Personal Migration Plugin</a>
+      </div>
+      <div class="wizard-controls horizontal center">
+        <a class="subtle-link" data-target="home">Go Back</a>
+        <div class="btn btn--primary align-right hide" data-target="otrs-link">Next</div>
+      </div>
+    </div>
+    <div class="wizard-slide vertical hide" data-slide="otrs-link">
+      <h2>Link OTRS</h2>
+      <div class="wizard-body flex vertical justified">
+        <p>
+          Enter the link provided by the plugin at the end of the installation to link the two systems:
+        </p>
+        <div class="form-group">
+          <label for="otrs-link">OTRS Link</label>
+          <div class="u-positionOrigin">
+            <input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.company.de/otrs">
+            <div class="input-feedback centered">
+              <div class="small loading icon"></div>
+              <div class="error icon"></div>
+              <div class="checkmark icon"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="wizard-controls horizontal center">
+        <a class="subtle-link" data-target="otrs-plugin">Go Back</a>
+        <div class="btn btn--primary align-right hide" data-target="otrs-export">Migrate OTRS Data</div>
+      </div>
+    </div>
+    <div class="wizard-slide vertical hide" data-slide="otrs-export">
+      <h2>OTRS Migration</h2>
+      <div class="wizard-body flex vertical justified">
+        <table class="progressTable">
+          <tr class="is-done">
+            <td><span class="js-count">42</span>/<span class="js-max">42</span>
+            <td>Users
+            <td class="progressTable-progressCell"><div class="horizontal">
+              <div class="progress flex"><div class="bar" style="width: 100%"></div></div><div class="checkmark icon"></div>
+            </div>
+          </tr>
+          <tr class="is-done">
+            <td><span class="js-count">29999</span>/<span class="js-max">29999</span>
+            <td>Tickets
+            <td class="progressTable-progressCell"><div class="horizontal">
+              <div class="progress flex"><div class="bar" style="width: 100%"></div></div><div class="checkmark icon"></div>
+            </div>
+          </tr>
+          <tr>
+            <td>
+            <td>Configuration
+            <td class="progressTable-progressCell"><div class="horizontal">
+              <div class="progress flex"><div class="bar" style="width: 33%"></div></div><div class="checkmark icon"></div>
+            </div>
+          </tr>
+        </table>
+      </div>
+      <div class="wizard-controls horizontal center">
+        <a href="#dashboard" class="btn btn--primary align-center hide js-finished">Done</a>
+      </div>
+    </div>
+  </div>
+</div>

app/assets/javascripts/app/views/layout_ref/index.jst.eco

@@ -14,6 +14,7 @@
     <li>Communication Reply - no content <a href="#layout_ref/communication_reply/no_content">Example</a></li>
     <li>Communication Reply - with content <a href="#layout_ref/communication_reply/content">Example</a></li>
     <li>Communication Reply - with multiline content <a href="#layout_ref/communication_reply/mulit_line_content">Example</a></li>
+    <li><a href="#layout_ref/import_wizard">Import Wizard</a></li>
   </ul>
 
 </div>

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;
+}
+
 /*
 
   ----------------