From b21a70c587552d18f8e4c3e2ce49cb04180fe99b Mon Sep 17 00:00:00 2001 From: tmorin Date: Tue, 19 Dec 2017 16:51:39 +0100 Subject: [PATCH] refactor request wizard --- package-lock.json | 22 ++++++ package.json | 1 + scripts/deploy.sh | 1 + src/front/index.ejs | 120 +++--------------------------- src/front/index.js | 89 ++++++++++++---------- src/front/index.less | 2 +- src/front/request.form.add.ejs | 37 +++++++++ src/front/request.form.remove.ejs | 21 ++++++ src/front/request.form.update.ejs | 37 +++++++++ src/front/requestStep1Dialog.ejs | 22 ++++++ src/front/requestStep2Dialog.ejs | 44 +++++++++++ src/front/requestStep3Dialog.ejs | 32 ++++++++ src/front/servers.js | 9 ++- webpack.config.js | 2 +- 14 files changed, 286 insertions(+), 153 deletions(-) create mode 100644 src/front/request.form.add.ejs create mode 100644 src/front/request.form.remove.ejs create mode 100644 src/front/request.form.update.ejs create mode 100644 src/front/requestStep1Dialog.ejs create mode 100644 src/front/requestStep2Dialog.ejs create mode 100644 src/front/requestStep3Dialog.ejs diff --git a/package-lock.json b/package-lock.json index e652e34..6943dad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2079,6 +2079,28 @@ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, + "ejs": { + "version": "git+https://github.com/nemanjan00/ejs.git#ba8ef7f575e190fc60017bc82911151378fe3258", + "dev": true + }, + "ejs-compiled-loader": { + "version": "1.1.0", + "resolved": "https://npm.morin.io/ejs-compiled-loader/-/ejs-compiled-loader-1.1.0.tgz", + "integrity": "sha1-ailN69GBC6fr93Jz/hsajfBXJ2E=", + "dev": true, + "requires": { + "ejs": "git+https://github.com/nemanjan00/ejs.git#ba8ef7f575e190fc60017bc82911151378fe3258", + "uglify-js": "1.3.5" + }, + "dependencies": { + "uglify-js": { + "version": "1.3.5", + "resolved": "https://npm.morin.io/uglify-js/-/uglify-js-1.3.5.tgz", + "integrity": "sha1-S1v/+Rhu/7qoiOTJ6UvZ/EyUkp0=", + "dev": true + } + } + }, "electron-to-chromium": { "version": "1.3.27", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.27.tgz", diff --git a/package.json b/package.json index 942e74b..8dc13ee 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "clean-webpack-plugin": "^0.1.17", "copy-webpack-plugin": "^4.2.0", "css-loader": "^0.28.7", + "ejs-compiled-loader": "^1.1.0", "file-loader": "^1.1.5", "font-awesome": "^4.7.0", "github-api": "^3.0.0", diff --git a/scripts/deploy.sh b/scripts/deploy.sh index c856844..1a821ac 100755 --- a/scripts/deploy.sh +++ b/scripts/deploy.sh @@ -12,6 +12,7 @@ BASE_URL="https://$LETSENCRYPT_HOST" echo "deploying $CONTAINER_NAME" echo "CURRENCY: $CURRENCY" +echo "GITHUB_CLIENT_ID: $GITHUB_CLIENT_ID" echo "VIRTUAL_HOST: $VIRTUAL_HOST" echo "VIRTUAL_PORT: $VIRTUAL_PORT" echo "LETSENCRYPT_HOST: $LETSENCRYPT_HOST" diff --git a/src/front/index.ejs b/src/front/index.ejs index 7bfebb4..233363c 100644 --- a/src/front/index.ejs +++ b/src/front/index.ejs @@ -20,6 +20,9 @@ + + + @@ -83,6 +86,7 @@
+ @@ -127,7 +131,7 @@
  • - + update list @@ -138,115 +142,6 @@ - - - -

    Ads

    @@ -258,7 +153,6 @@
    -

    Address

    @@ -377,6 +271,10 @@
    +<%- include src/front/requestStep1Dialog.ejs %> +<%- include src/front/requestStep2Dialog.ejs %> +<%- include src/front/requestStep3Dialog.ejs %> + <% if (analytic && analytic.ga) { %> diff --git a/src/front/index.js b/src/front/index.js index 6622389..6cc9d65 100644 --- a/src/front/index.js +++ b/src/front/index.js @@ -2,10 +2,10 @@ import 'bootstrap'; import 'babel-polyfill'; import 'whatwg-fetch'; import $ from 'jquery'; +import GitHub from 'github-api'; import './index.less'; import {fetchServers} from './servers'; import {restoreAddress} from "./address"; -import GitHub from 'github-api'; $('body').css({'display': 'block'}); $('[data-toggle="tooltip"]').tooltip(); @@ -20,77 +20,90 @@ function refreshAll() { $(() => { refreshAll(); - const $requestDialog = $('#requestDialog'); - const $requestForm = $requestDialog.find('form[name=submitRequest]'); + const $requestStep2Dialog = $('#requestStep2Dialog'); + const $formSelection = $requestStep2Dialog.find('.form-selection'); + const $forms = $requestStep2Dialog.find('form'); + const $requestStep3Dialog = $('#requestStep3Dialog'); - const $requestResultDialog = $('#requestResultDialog'); + $formSelection.on('change', 'input', evt => { + const formSelector = `form[name="${evt.target.value}Server"]`; + $forms.attr('hidden', 'hidden'); + $requestStep2Dialog.find(formSelector).removeAttr('hidden'); + }); - $requestDialog.on('show.bs.modal', () => { - $requestForm.find('input, textarea, button').removeAttr('disabled'); - $requestForm.find('button i').removeClass('fa-spin'); - $requestForm[0].reset(); + $requestStep2Dialog.on('show.bs.modal', () => { + $forms.attr('hidden', 'hidden'); + $forms.find('input, textarea, button').removeAttr('disabled'); + $forms.find('button i').removeClass('fa-spin'); + $forms[0].reset(); }); - $requestForm.on('submit', evt => { + $forms.on('submit', evt => { evt.preventDefault(); - const token = evt.target.accessToken.value; - const repoUser = evt.target.repoUser.value; - const repoName = evt.target.repoName.value; + const token = $('meta[property="x:app:accessToken"]').attr('content'); + const repoUser = $('meta[property="x:app:repoUser"]').attr('content'); + const repoName = $('meta[property="x:app:repoName"]').attr('content'); const host = location.hostname; const action = evt.target.action.value; const name = evt.target.name.value; - const front = evt.target.front.value; - const back = evt.target.back.value; - const locations = evt.target.locations.value; - const comments = evt.target.comments.valu; + const comments = evt.target.comments.value; + + const body = []; + + if (action !== 'remove') { + const front = evt.target.front.value; + const back = evt.target.back.value; + const locations = evt.target.locations.value; + const file = {name, front, back, location: locations}; + body.push('```'); + body.push(JSON.stringify(file, null, 2)); + body.push('```'); + } + + if (comments) { + body.push('comments:'); + body.push(comments); + } const issueData = { - title: `[${host}] - ${action} ${name}`, - body: `action: ${action} -name: ${name} -front: ${front || ''} -back: ${back || ''} -locations: ${locations || ''} -comments: -${comments || ''} - `, + title: `[${host}] - ${action} - ${name}`, + body: body.join('\n'), labels: ['servers'] }; - $requestForm.find('input, textarea, button').attr('disabled', ''); - $requestForm.find('button i').addClass('fa-spin'); + $forms.find('input, textarea, button').attr('disabled', ''); + $forms.find('button i').addClass('fa-spin'); new GitHub({token}).getIssues(repoUser, repoName).createIssue(issueData) .then(() => { - $requestResultDialog.addClass('success').removeClass('failure'); + $requestStep3Dialog.addClass('success').removeClass('failure'); }) .catch(err => { console.error(err); - $requestResultDialog.removeClass('success').addClass('failure'); + $requestStep3Dialog.removeClass('success').addClass('failure'); }) .then(() => { - $requestDialog - .one('hidden.bs.modal', () => $requestResultDialog.modal('show')) + $requestStep2Dialog + .one('hidden.bs.modal', () => $requestStep3Dialog.modal('show')) .modal('hide'); }); - }); const hash = decodeURI(window.location.hash); const loginSuccess = hash.indexOf('#login-success') > -1; if (loginSuccess) { + $(window).one('hashchange', evt => evt.preventDefault()); + location.hash = ''; const context = JSON.parse(hash.replace('#login-success=', '')); - $requestForm.find('[name=accessToken]').val(context.accessToken); - $requestDialog.modal('show'); + $('meta[property="x:app:accessToken"]').attr('content', context.accessToken); + $requestStep2Dialog.modal('show'); } const loginFailure = hash.indexOf('#login-failure') > -1; if (loginFailure) { - + $(window).one('hashchange', evt => evt.preventDefault()); + location.hash = ''; } - - $(window).one('hashchange', (evt) => evt.preventDefault()); - location.hash = ''; }); diff --git a/src/front/index.less b/src/front/index.less index 19d1bc9..c3d333a 100644 --- a/src/front/index.less +++ b/src/front/index.less @@ -46,7 +46,7 @@ } } -#requestResultDialog { +#requestStep3Dialog { .modal-title, .modal-body { display: none; } diff --git a/src/front/request.form.add.ejs b/src/front/request.form.add.ejs new file mode 100644 index 0000000..f20cc53 --- /dev/null +++ b/src/front/request.form.add.ejs @@ -0,0 +1,37 @@ + +
    + +

    Please fill the following fields according to the pool setup.

    + + + +

    + + +

    + +

    + + +

    + +

    + + +

    + +

    + + +

    + +

    + + +

    + + + \ No newline at end of file diff --git a/src/front/request.form.remove.ejs b/src/front/request.form.remove.ejs new file mode 100644 index 0000000..833a026 --- /dev/null +++ b/src/front/request.form.remove.ejs @@ -0,0 +1,21 @@ + + + +
    + +

    + + +

    + +

    + + +

    + + + + diff --git a/src/front/request.form.update.ejs b/src/front/request.form.update.ejs new file mode 100644 index 0000000..90c9095 --- /dev/null +++ b/src/front/request.form.update.ejs @@ -0,0 +1,37 @@ + + + +
    + +

    Please fill only fields which should be updated.

    + +

    + + +

    + +

    + + +

    + +

    + + +

    + +

    + + +

    + +

    + + +

    + + + diff --git a/src/front/requestStep1Dialog.ejs b/src/front/requestStep1Dialog.ejs new file mode 100644 index 0000000..1c1385f --- /dev/null +++ b/src/front/requestStep1Dialog.ejs @@ -0,0 +1,22 @@ + diff --git a/src/front/requestStep2Dialog.ejs b/src/front/requestStep2Dialog.ejs new file mode 100644 index 0000000..5e86465 --- /dev/null +++ b/src/front/requestStep2Dialog.ejs @@ -0,0 +1,44 @@ + diff --git a/src/front/requestStep3Dialog.ejs b/src/front/requestStep3Dialog.ejs new file mode 100644 index 0000000..6eae27f --- /dev/null +++ b/src/front/requestStep3Dialog.ejs @@ -0,0 +1,32 @@ + diff --git a/src/front/servers.js b/src/front/servers.js index 0266101..cae09c7 100644 --- a/src/front/servers.js +++ b/src/front/servers.js @@ -6,6 +6,7 @@ import parseUrl from 'url-parse'; export function fetchServers() { const $table = $('#serverTable').addClass('loading'); const $tbody = $table.find('tbody'); + const $serverNameSelects = $('#serverNameUpdate, #serverNameRemove').html(''); return fetch('./api/servers') .then(resp => resp.json()) @@ -35,7 +36,7 @@ export function fetchServers() { const secTl = `front: ${server.secured.front ? 'https' : 'http'}
    back: ${server.secured.back ? 'https' : 'http'}`; if (server.error) { return ` -
    • + @@ -46,7 +47,7 @@ export function fetchServers() { const locCell = shorten(loc); const locTooltip = loc !== locCell ? loc : null; return ` - + @@ -66,6 +67,10 @@ export function fetchServers() { $tbody.html( serversAsHtml || `` ).find('[data-toggle="tooltip"]').tooltip(); + + $serverNameSelects.html( + $tbody.find('tr').toArray().map(e => ``).join('\n') + ); }).catch(err => console.error(err)).then(() => $table.removeClass('loading')); } diff --git a/webpack.config.js b/webpack.config.js index a897307..0d16c36 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -48,7 +48,7 @@ module.exports = { module: { rules: [ {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, - {test: /\.html?$/, use: 'html-loader', exclude: /node_modules/}, + {test: /\.ejs?$/, use: 'ejs-compiled-loader', exclude: /node_modules/}, {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'}, {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff'}, {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'},
    ${ server.key || 'unknown' } Unable to fetch data!
    ${server.name} ${ shorten(server.location) || 'unknown' }
    Noting to display