Skip to content

Commit

Permalink
Modernize JS
Browse files Browse the repository at this point in the history
- Get rid of var
- Use class syntax rather than prototype syntax for classes
- Remove unused param
- Split classes to their own files
  • Loading branch information
yuvipanda committed Jun 21, 2022
1 parent 8f017c3 commit 145b44a
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 131 deletions.
56 changes: 56 additions & 0 deletions nbgitpuller/static/js/gitsync.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
export class GitSync {
constructor(baseUrl, repo, branch, depth, targetpath, path) {
// Class that talks to the API backend & emits events as appropriate
this.baseUrl = baseUrl;
this.repo = repo;
this.branch = branch;
this.depth = depth;
this.targetpath = targetpath;
this.redirectUrl = baseUrl + path;

this.callbacks = {};
}

addHandler(event, cb) {
if (this.callbacks[event] == undefined) {
this.callbacks[event] = [cb];
} else {
this.callbacks[event].push(cb);
}
}

_emit(event, data) {
if (this.callbacks[event] == undefined) { return; }
for(let ev of this.callbacks[event]) {
ev(data);
}

}

start() {
// Start git pulling handled by SyncHandler, declared in handlers.py
let syncUrlParams = new URLSearchParams({
repo: this.repo,
targetpath: this.targetpath
});
if (typeof this.depth !== 'undefined' && this.depth != undefined) {
syncUrlParams.append('depth', this.depth);
}
if (typeof this.branch !== 'undefined' && this.branch != undefined) {
syncUrlParams.append('branch', this.branch);
}
const syncUrl = this.baseUrl + 'git-pull/api?' + syncUrlParams.toString();

this.eventSource = new EventSource(syncUrl);
this.eventSource.addEventListener('message', (ev) => {
const data = JSON.parse(ev.data);
if (data.phase == 'finished' || data.phase == 'error') {
this.eventSource.close();
}
this._emit(data.phase, data);
});
this.eventSource.addEventListener('error',(error) => {
this._emit('error', error);
});
}
}
63 changes: 63 additions & 0 deletions nbgitpuller/static/js/gitsyncview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@

import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';

export class GitSyncView{
constructor(termSelector, progressSelector, termToggleSelector) {
// Class that encapsulates view rendering as much as possible
this.term = new Terminal({
convertEol: true
});
this.fit = new FitAddon();
this.term.loadAddon(this.fit);

this.visible = false;
this.progress = document.querySelector(progressSelector);

this.termToggle = document.querySelector(termToggleSelector);
this.termElement = document.querySelector(termSelector);

this.termToggle.onclick = () => this.setTerminalVisibility(!this.visible)
}

setTerminalVisibility(visible) {
if (visible) {
this.termElement.parentElement.classList.remove('hidden');
} else {
this.termElement.parentElement.classList.add('hidden');
}
this.visible = visible;
if (visible) {
// See https://github.com/jupyterhub/nbgitpuller/pull/46 on why this is here.
if (!this.term.element) {
this.term.open(this.termElement);
}
this.fit.fit();
}
}

setProgressValue(val) {
this.progress.setAttribute('aria-valuenow', val);
this.progress.style.width = val + '%';
}

getProgressValue() {
return parseFloat(this.progress.getAttribute('aria-valuenow'));
}

setProgressText(text) {
this.progress.querySelector('span').innerText = text;
}

getProgressText() {
return this.progress.querySelector('span').innerText;
}

setProgressError(isError) {
if (isError) {
this.progress.classList.add('progress-bar-danger');
} else {
this.progress.classList.remove('progress-bar-danger');
}
}
}
146 changes: 15 additions & 131 deletions nbgitpuller/static/js/index.js
Original file line number Diff line number Diff line change
@@ -1,124 +1,8 @@
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { GitSync } from './gitsync';
import { GitSyncView } from './gitsyncview';
import css from '../../../node_modules/xterm/css/xterm.css';

function GitSync(baseUrl, repo, branch, depth, targetpath, path) {
// Class that talks to the API backend & emits events as appropriate
this.baseUrl = baseUrl;
this.repo = repo;
this.branch = branch;
this.depth = depth;
this.targetpath = targetpath;
this.redirectUrl = baseUrl + path;

this.callbacks = {};
}

GitSync.prototype.addHandler = function(event, cb) {
if (this.callbacks[event] == undefined) {
this.callbacks[event] = [cb];
} else {
this.callbacks[event].push(cb);
}
};

GitSync.prototype._emit = function(event, data) {
if (this.callbacks[event] == undefined) { return; }
for(let ev of this.callbacks[event]) {
ev(data);
}
};


GitSync.prototype.start = function() {
// Start git pulling handled by SyncHandler, declared in handlers.py
let syncUrlParams = new URLSearchParams({
repo: this.repo,
targetpath: this.targetpath
});
if (typeof this.depth !== 'undefined' && this.depth != undefined) {
syncUrlParams.append('depth', this.depth);
}
if (typeof this.branch !== 'undefined' && this.branch != undefined) {
syncUrlParams.append('branch', this.branch);
}
var syncUrl = this.baseUrl + 'git-pull/api?' + syncUrlParams.toString();

this.eventSource = new EventSource(syncUrl);
var that = this;
this.eventSource.addEventListener('message', function(ev) {
var data = JSON.parse(ev.data);
if (data.phase == 'finished' || data.phase == 'error') {
that.eventSource.close();
}
that._emit(data.phase, data);
});
this.eventSource.addEventListener('error', function(error) {
console.log(arguments);
that._emit('error', error);
});
};

function GitSyncView(termSelector, progressSelector, termToggleSelector) {
// Class that encapsulates view rendering as much as possible
this.term = new Terminal({
convertEol: true
});
this.fit = new FitAddon();
this.term.loadAddon(this.fit);

this.visible = false;
this.progress = document.querySelector(progressSelector);

this.termToggle = document.querySelector(termToggleSelector);
this.termElement = document.querySelector(termSelector);

this.termToggle.onclick = () => this.setTerminalVisibility(!this.visible)
}

GitSyncView.prototype.setTerminalVisibility = function(visible) {
if (visible) {
this.termElement.parentElement.classList.remove('hidden');
} else {
this.termElement.parentElement.classList.add('hidden');
}
this.visible = visible;
if (visible) {
// See https://github.com/jupyterhub/nbgitpuller/pull/46 on why this is here.
if (!this.term.element) {
this.term.open(this.termElement);
}
this.fit.fit();
}

}

GitSyncView.prototype.setProgressValue = function(val) {
this.progress.setAttribute('aria-valuenow', val);
this.progress.style.width = val + '%';
};

GitSyncView.prototype.getProgressValue = function() {
return parseFloat(this.progress.getAttribute('aria-valuenow'));
};

GitSyncView.prototype.setProgressText = function(text) {
this.progress.querySelector('span').innerText = text;
};

GitSyncView.prototype.getProgressText = function() {
return this.progress.querySelector('span').innerText;
};

GitSyncView.prototype.setProgressError = function(isError) {
if (isError) {
this.progress.classList.add('progress-bar-danger');
} else {
this.progress.classList.remove('progress-bar-danger');
}
};

var get_body_data = function(key) {
const getBodyData = (key) => {
/**
* get a url-encoded item from body.data and decode it
* we should never have any encoded URLs anywhere else in code
Expand All @@ -131,16 +15,16 @@ var get_body_data = function(key) {
return decodeURIComponent(val);
};

var gs = new GitSync(
get_body_data('base-url'),
get_body_data('repo'),
get_body_data('branch'),
get_body_data('depth'),
get_body_data('targetpath'),
get_body_data('path')
const gs = new GitSync(
getBodyData('base-url'),
getBodyData('repo'),
getBodyData('branch'),
getBodyData('depth'),
getBodyData('targetpath'),
getBodyData('path')
);

var gsv = new GitSyncView(
const gsv = new GitSyncView(
'#status-details',
'#status-panel-title',
'#status-panel-toggle'
Expand All @@ -149,11 +33,11 @@ var gsv = new GitSyncView(
gs.addHandler('syncing', function(data) {
gsv.term.write(data.output);
});
gs.addHandler('finished', function(data) {
gs.addHandler('finished', function() {
progressTimers.forEach(function(timer) { clearInterval(timer); });
gsv.setProgressValue(100);
gsv.setProgressText('Sync finished, redirecting...');
window.location.href = gs.redirectUrl;
// window.location.href = gs.redirectUrl;
});
gs.addHandler('error', function(data) {
progressTimers.forEach(function(timer) { clearInterval(timer); });
Expand All @@ -168,7 +52,7 @@ gs.addHandler('error', function(data) {
gs.start();

// Make sure we provide plenty of appearances of progress!
var progressTimers = [];
let progressTimers = [];
progressTimers.push(setInterval(function() {
gsv.setProgressText(substatus_messages[Math.floor(Math.random() * substatus_messages.length)]);
}, 3000));
Expand All @@ -182,7 +66,7 @@ progressTimers.push(setInterval(function() {
}, 900));


var substatus_messages = [
const substatus_messages = [
"Adding Hidden Agendas",
"Adjusting Bell Curves",
"Aesthesizing Industrial Areas",
Expand Down

0 comments on commit 145b44a

Please sign in to comment.