sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-13 09:30:40 +00:00
Code Issues Projects Releases Wiki Activity

Change the Subscription Logic for Socket.IO Data exchange

Browse Source
This commit is contained in:
Patrick Jentsch
2022-07-08 11:46:47 +02:00
parent 5771e156ce
commit 4e5957eea2
17 changed files with 137 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/static/js/App.js
View File

@ -1,21 +1,25 @@
class App {
constructor() {
this.data = {users: {}};
this.promises = {users: {}};
this.data = {
promises: {getUser: {}, subscribeUser: {}},
users: {},
};
this.socket = io({transports: ['websocket'], upgrade: false});
this.socket.on('PATCH', (patch) => {this.data = jsonpatch.applyPatch(this.data, patch).newDocument;});
this.socket.on('PATCH', (patch) => {
const re = new RegExp(`^/users/(${Object.keys(this.data.users).join('|')})`);
const filteredPatch = patch.filter(operation => re.test(operation.path));
jsonpatch.applyPatch(this.data, filteredPatch);
});
}
get users() {
return this.data.users;
}
subscribeUser(userId) {
if (userId in this.promises.users) {
return this.promises.users[userId];
getUser(userId) {
if (userId in this.data.promises.getUser) {
return this.data.promises.getUser[userId];
}
this.promises.users[userId] = new Promise((resolve, reject) => {
this.socket.emit('SUBSCRIBE /users/<user_id>', userId, response => {
this.data.promises.getUser[userId] = new Promise((resolve, reject) => {
this.socket.emit('GET /users/<user_id>', userId, (response) => {
if (response.code === 200) {
this.data.users[userId] = response.payload;
resolve(this.data.users[userId]);
@ -24,7 +28,26 @@ class App {
}
});
});
return this.promises.users[userId];
return this.data.promises.getUser[userId];
}
subscribeUser(userId) {
if (userId in this.data.promises.subscribeUser) {
return this.data.promises.subscribeUser[userId];
}
this.data.promises.subscribeUser[userId] = new Promise((resolve, reject) => {
this.socket.emit('SUBSCRIBE /users/<user_id>', userId, (response) => {
if (response.code === 200) {
resolve(response);
} else {
reject(response);
}
});
});
return this.data.promises.subscribeUser[userId];
}
flash(message, category) {

16
app/static/js/JobStatusNotifier.js
View File

@ -1,10 +1,18 @@
class JobStatusNotifier {
constructor(userId) {
this.userId = userId;
app.socket.on('PATCH', (patch) => {this.onPATCH(patch);});
this.isInitialized = false;
app.subscribeUser(this.userId).then((response) => {
app.socket.on('PATCH', (patch) => {this.onPATCH(patch);});
});
app.getUser(this.userId).then((user) => {
this.isInitialized = true;
});
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
let filteredPatch;
let jobId;
let match;
@ -13,11 +21,11 @@ class JobStatusNotifier {
re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)/status$`);
filteredPatch = patch
.filter(operation => operation.op === 'replace')
.filter(operation => re.test(operation.path));
.filter((operation) => {return operation.op === 'replace';})
.filter((operation) => {return re.test(operation.path);});
for (operation of filteredPatch) {
[match, jobId] = operation.path.match(re);
app.flash(`[<a href="/jobs/${jobId}">${app.users[this.userId].jobs[jobId].title}</a>] New status: <span class="job-status-text" data-job-status="${operation.value}"></span>`, 'job');
app.flash(`[<a href="/jobs/${jobId}">${app.data.users[this.userId].jobs[jobId].title}</a>] New status: <span class="job-status-text" data-job-status="${operation.value}"></span>`, 'job');
}
}
}

10
app/static/js/RessourceDisplays/CorpusDisplay.js
View File

@ -5,9 +5,8 @@ class CorpusDisplay extends RessourceDisplay {
}
init(user) {
let corpus;
const corpus = user.corpora[this.corpusId];
corpus = user.corpora[this.corpusId];
this.setCreationDate(corpus.creation_date);
this.setDescription(corpus.description);
this.setLastEditedDate(corpus.last_edited_date);
@ -17,12 +16,15 @@ class CorpusDisplay extends RessourceDisplay {
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
let filteredPatch;
let operation;
let re;
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}`);
filteredPatch = patch.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
switch(operation.op) {
case 'replace':
@ -55,7 +57,7 @@ class CorpusDisplay extends RessourceDisplay {
setNumTokens(numTokens) {
this.setElements(
this.displayElement.querySelectorAll('.corpus-token-ratio'),
`${numTokens}/${app.users[this.userId].corpora[this.corpusId].max_num_tokens}`
`${numTokens}/${app.data.users[this.userId].corpora[this.corpusId].max_num_tokens}`
);
}
@ -77,7 +79,7 @@ class CorpusDisplay extends RessourceDisplay {
}
elements = this.displayElement.querySelectorAll('.corpus-build-trigger');
for (element of elements) {
if (['UNPREPARED', 'FAILED'].includes(status) && Object.values(app.users[this.userId].corpora[this.corpusId].files).length > 0) {
if (['UNPREPARED', 'FAILED'].includes(status) && Object.values(app.data.users[this.userId].corpora[this.corpusId].files).length > 0) {
element.classList.remove('disabled');
} else {
element.classList.add('disabled');

6
app/static/js/RessourceDisplays/JobDisplay.js
View File

@ -5,9 +5,8 @@ class JobDisplay extends RessourceDisplay {
}
init(user) {
let job;
const job = user.jobs[this.jobId];
job = user.jobs[this.jobId];
this.setCreationDate(job.creation_date);
this.setEndDate(job.creation_date);
this.setDescription(job.description);
@ -19,12 +18,15 @@ class JobDisplay extends RessourceDisplay {
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
let filteredPatch;
let operation;
let re;
re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}`);
filteredPatch = patch.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
switch(operation.op) {
case 'replace':

12
app/static/js/RessourceDisplays/RessourceDisplay.js
View File

@ -2,8 +2,16 @@ class RessourceDisplay {
constructor(displayElement) {
this.displayElement = displayElement;
this.userId = this.displayElement.dataset.userId;
app.socket.on('PATCH', (patch) => {this.onPATCH(patch);});
app.subscribeUser(this.userId).then((user) => {this.init(user);});
this.isInitialized = false;
if (this.userId) {
app.subscribeUser(this.userId).then((response) => {
app.socket.on('PATCH', (patch) => {this.onPATCH(patch);});
});
app.getUser(this.userId).then((user) => {
this.init(user);
this.isInitialized = true;
});
}
}
init(user) {throw 'Not implemented';}

4
app/static/js/RessourceLists/CorpusFileList.js
View File

@ -65,7 +65,7 @@ class CorpusFileList extends RessourceList {
<div class="modal">
<div class="modal-content">
<h4>Confirm corpus deletion</h4>
<p>Do you really want to delete the corpus file <b>${app.users[this.userId].corpora[this.corpusId].files[corpusFileId].filename}</b>? It will be permanently deleted!</p>
<p>Do you really want to delete the corpus file <b>${app.data.users[this.userId].corpora[this.corpusId].files[corpusFileId].filename}</b>? It will be permanently deleted!</p>
</div>
<div class="modal-footer">
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
@ -97,6 +97,8 @@ class CorpusFileList extends RessourceList {
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
let corpusFileId;
let filteredPatch;
let match;

4
app/static/js/RessourceLists/CorpusList.js
View File

@ -60,7 +60,7 @@ class CorpusList extends RessourceList {
<div class="modal">
<div class="modal-content">
<h4>Confirm corpus deletion</h4>
<p>Do you really want to delete the corpus <b>${app.users[this.userId].corpora[corpusId].title}</b>? All files will be permanently deleted!</p>
<p>Do you really want to delete the corpus <b>${app.data.users[this.userId].corpora[corpusId].title}</b>? All files will be permanently deleted!</p>
</div>
<div class="modal-footer">
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
@ -89,6 +89,8 @@ class CorpusList extends RessourceList {
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
let corpusId;
let filteredPatch;
let match;

5
app/static/js/RessourceLists/JobList.js
View File

@ -36,7 +36,6 @@ class JobList extends RessourceList {
]
};
constructor(listElement, options = {}) {
super(listElement, {...JobList.options, ...options});
}
@ -66,7 +65,7 @@ class JobList extends RessourceList {
<div class="modal">
<div class="modal-content">
<h4>Confirm job deletion</h4>
<p>Do you really want to delete the job <b>${app.users[this.userId].jobs[jobId].title}</b>? All files will be permanently deleted!</p>
<p>Do you really want to delete the job <b>${app.data.users[this.userId].jobs[jobId].title}</b>? All files will be permanently deleted!</p>
</div>
<div class="modal-footer">
<a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
@ -95,6 +94,8 @@ class JobList extends RessourceList {
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
let filteredPatch;
let jobId;
let match;

2
app/static/js/RessourceLists/JobResultList.js
View File

@ -58,6 +58,8 @@ class JobResultList extends RessourceList {
}
onPATCH(patch) {
if (!this.isInitialized) {return;}
let filteredPatch;
let operation;
let re;

13
app/static/js/RessourceLists/RessourceList.js
View File

@ -90,12 +90,15 @@ class RessourceList {
this.listjs.list.style.cursor = 'pointer';
this.userId = this.listjs.listContainer.dataset.userId;
this.listjs.list.addEventListener('click', event => this.onclick(event));
this.isInitialized = false;
if (this.userId) {
app.socket.on('PATCH', (patch) => {this.onPATCH(patch);});
app.subscribeUser(this.userId).then(
(user) => {this.init(user);},
(error) => {throw JSON.stringify(error);}
);
app.subscribeUser(this.userId).then((response) => {
app.socket.on('PATCH', (patch) => {this.onPATCH(patch);});
});
app.getUser(this.userId).then((user) => {
this.init(user);
this.isInitialized = true;
});
}
}

2
app/static/js/RessourceLists/UserList.js
View File

@ -20,7 +20,7 @@ class UserList extends RessourceList {
'id-1': user.id,
'username': user.username,
'email': user.email,
'last-seen': new Date(user.last_seen).toLocaleString("en-US"),
'last-seen': new Date(user.last_seen).toLocaleString('en-US'),
'member-since': user.member_since,
'role': user.role.name
};