Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add import wizard

Browse source
This commit is contained in:
Felix Niklas 2014-10-07 12:23:03 +02:00
parent 2ef7942e69
commit 88dbf2c528
5 changed files with 279 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/otrs-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.3 KiB

68
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

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

90
app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco Normal file
View file

@ -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>

1
app/assets/javascripts/app/views/layout_ref/index.jst.eco
View file

@ -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>

121
app/assets/stylesheets/zzz.css.erb
View file

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