mirror of
https://github.com/zulip/zulip-desktop.git
synced 2025-11-02 21:13:32 +00:00
Update DomainUtil and finish PreferenceView.
This commit is contained in:
Zhongyi Tong
committed by
akashnimare
akashnimare
parent
e43b651060
commit
23fd7ba2b3
@@ -55,6 +55,7 @@ html, body {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 30px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.server-info-container {
|
||||
@@ -103,6 +104,7 @@ img.server-info-icon {
|
||||
border-bottom: #ddd 1px solid;
|
||||
outline-width: 0;
|
||||
background: transparent;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.server-info-value:focus {
|
||||
@@ -115,6 +117,7 @@ img.server-info-icon {
|
||||
color: #235d3a;
|
||||
vertical-align: middle;
|
||||
margin: 10px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action {
|
||||
@@ -146,10 +149,14 @@ img.server-info-icon {
|
||||
|
||||
.server-info.active {
|
||||
background: #ecf4ef;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.server-info {
|
||||
display: flex;
|
||||
margin: 20px 0;
|
||||
padding: 10px;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -82,7 +82,7 @@ class ServerManagerView {
|
||||
const $webView = document.getElementById(`webview-${index}`);
|
||||
this.isLoading = false;
|
||||
$webView.classList.remove('loading');
|
||||
// $webView.openDevTools();
|
||||
$webView.openDevTools();
|
||||
}
|
||||
|
||||
initActions() {
|
||||
|
||||
@@ -6,22 +6,25 @@ class PreferenceView {
|
||||
constructor() {
|
||||
this.$newServerButton = document.getElementById('new-server-action');
|
||||
this.$saveServerButton = document.getElementById('save-server-action');
|
||||
this.$serverInfoContainer = document.querySelector('.server-info-container');
|
||||
this.$serverInfoContainer = document.querySelector('.server-info-container');
|
||||
}
|
||||
|
||||
init() {
|
||||
this.domainUtil = new DomainUtil();
|
||||
this.initServers();
|
||||
this.initActions();
|
||||
}
|
||||
|
||||
initServers() {
|
||||
this.$serverInfoContainer.innerHTML = '';
|
||||
this.initNewServerForm();
|
||||
const servers = this.domainUtil.getDomains();
|
||||
for (let server of servers) {
|
||||
this.initServer(server);
|
||||
for (let i in servers) {
|
||||
this.initServer(servers[i], i);
|
||||
}
|
||||
}
|
||||
|
||||
initServer(server) {
|
||||
initServer(server, index) {
|
||||
const {
|
||||
alias,
|
||||
url,
|
||||
@@ -35,21 +38,86 @@ class PreferenceView {
|
||||
<div class="server-info-right">
|
||||
<div class="server-info-row">
|
||||
<span class="server-info-key">Name</span>
|
||||
<input class="server-info-value" value="${alias}"/>
|
||||
<input class="server-info-value" disabled value="${alias}"/>
|
||||
</div>
|
||||
<div class="server-info-row">
|
||||
<span class="server-info-key">Url</span>
|
||||
<input class="server-info-value" value="${url}"/>
|
||||
<input class="server-info-value" disabled value="${url}"/>
|
||||
</div>
|
||||
<div class="server-info-row">
|
||||
<span class="server-info-key">Icon</span>
|
||||
<input class="server-info-value" value="${icon}"/>
|
||||
<input class="server-info-value" disabled value="${icon}"/>
|
||||
</div>
|
||||
<div class="server-info-row">
|
||||
<span class="server-info-key">Actions</span>
|
||||
<div class="action server-info-value" id="delete-server-action-${index}">
|
||||
<i class="material-icons">indeterminate_check_box</i>
|
||||
<span>Delete</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
this.$serverInfoContainer.appendChild(this.__insert_node(serverInfoTemplate));
|
||||
document.getElementById(`delete-server-action-${index}`).addEventListener('click', () => {
|
||||
this.domainUtil.removeDomain(index);
|
||||
this.initServers();
|
||||
});
|
||||
}
|
||||
|
||||
initNewServerForm() {
|
||||
const newServerFormTemplate = `
|
||||
<div class="server-info active hidden">
|
||||
<div class="server-info-left">
|
||||
<img class="server-info-icon" src="https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png"/>
|
||||
</div>
|
||||
<div class="server-info-right">
|
||||
<div class="server-info-row">
|
||||
<span class="server-info-key">Name</span>
|
||||
<input class="server-info-value" placeholder="(Required)"/>
|
||||
</div>
|
||||
<div class="server-info-row">
|
||||
<span class="server-info-key">Url</span>
|
||||
<input class="server-info-value" placeholder="(Required)"/>
|
||||
</div>
|
||||
<div class="server-info-row">
|
||||
<span class="server-info-key">Icon</span>
|
||||
<input class="server-info-value" placeholder="(Optional)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
this.$serverInfoContainer.appendChild(this.__insert_node(newServerFormTemplate));
|
||||
|
||||
this.$newServerForm = document.querySelector('.server-info.active');
|
||||
this.$newServerAlias = this.$newServerForm.querySelectorAll('input.server-info-value')[0];
|
||||
this.$newServerUrl = this.$newServerForm.querySelectorAll('input.server-info-value')[1];
|
||||
this.$newServerIcon = this.$newServerForm.querySelectorAll('input.server-info-value')[2];
|
||||
}
|
||||
|
||||
initActions() {
|
||||
this.$newServerButton.addEventListener('click', () => {
|
||||
this.$newServerForm.classList.remove('hidden');
|
||||
this.$saveServerButton.classList.remove('hidden');
|
||||
this.$newServerButton.classList.add('hidden');
|
||||
});
|
||||
this.$saveServerButton.addEventListener('click', () => {
|
||||
this.domainUtil.checkDomain(this.$newServerUrl.value).then((domain) => {
|
||||
const server = {
|
||||
alias: this.$newServerAlias.value,
|
||||
url: domain,
|
||||
icon: this.$newServerIcon.value
|
||||
};
|
||||
this.domainUtil.addDomain(server);
|
||||
this.$saveServerButton.classList.add('hidden');
|
||||
this.$newServerButton.classList.remove('hidden');
|
||||
this.$newServerForm.classList.add('hidden');
|
||||
|
||||
this.initServers();
|
||||
}, (errorMessage) => {
|
||||
alert(errorMessage);
|
||||
});
|
||||
});
|
||||
}
|
||||
__insert_node(html) {
|
||||
let wrapper= document.createElement('div');
|
||||
wrapper.innerHTML= html;
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
const {app} = require('electron').remote;
|
||||
const JsonDB = require('node-json-db');
|
||||
const request = require('request');
|
||||
|
||||
class DomainUtil {
|
||||
constructor() {
|
||||
@@ -12,18 +13,37 @@ class DomainUtil {
|
||||
return this.db.getData('/domains');
|
||||
}
|
||||
|
||||
addDomain() {
|
||||
const servers = {
|
||||
url: 'https://chat.zulip.org',
|
||||
alias: 'Zulip 2333',
|
||||
icon: 'https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png'
|
||||
}
|
||||
addDomain(server) {
|
||||
server.icon = server.icon || 'https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png';
|
||||
this.db.push("/domains[]", servers, true);
|
||||
}
|
||||
|
||||
removeDomains() {
|
||||
this.db.delete("/domains");
|
||||
}
|
||||
|
||||
removeDomain(index) {
|
||||
this.db.delete(`/domains[${index}]`);
|
||||
}
|
||||
|
||||
checkDomain(domain) {
|
||||
const hasPrefix = (domain.indexOf('http') == 0);
|
||||
if (!hasPrefix) {
|
||||
domain = (domain.indexOf('localhost:') >= 0)? `http://${domain}` : `https://${domain}`;
|
||||
}
|
||||
|
||||
const checkDomain = domain + '/static/audio/zulip.ogg';
|
||||
|
||||
return new Promise((res, rej) => {
|
||||
request(checkDomain, (error, response) => {
|
||||
if (!error && response.statusCode !== 404) {
|
||||
res(domain);
|
||||
} else {
|
||||
rej('Not a valid Zulip server');
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = DomainUtil;
|
||||
@@ -25,7 +25,7 @@
|
||||
<i class="material-icons">add_box</i>
|
||||
<span>New Server</span>
|
||||
</div>
|
||||
<div class="action" id="save-server-action">
|
||||
<div class="action hidden" id="save-server-action">
|
||||
<i class="material-icons">check_box</i>
|
||||
<span>Verify & Save</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user