This commit is contained in:
syuilo 2017-11-12 04:39:07 +09:00
parent f1988c544b
commit be99dc0902
6 changed files with 75 additions and 88 deletions

View File

@ -1 +1,2 @@
require('./user-preview'); require('./user-preview');
require('./widget');

View File

@ -0,0 +1,27 @@
import * as riot from 'riot';
// ミックスインにオプションを渡せないのアレ
// SEE: https://github.com/riot/riot/issues/2434
riot.mixin('widget', {
init: function() {
this.mixin('i');
this.mixin('api');
this.id = this.opts.id;
Object.keys(this.data).forEach(prop => {
this.data[prop] = this.opts.data.hasOwnProperty(prop) ? this.opts.data[prop] : this.data[prop];
});
},
save: function() {
this.api('i/update_home', {
id: this.id,
data: this.data
}).then(() => {
this.I.client_settings.home.find(w => w.id == this.id).data = this.data;
this.I.update();
});
}
});

View File

@ -2,8 +2,8 @@
<p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-home-widget.title%</p> <p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-home-widget.title%</p>
<button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-home-widget.toggle%"><i class="fa fa-sort"></i></button> <button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-home-widget.toggle%"><i class="fa fa-sort"></i></button>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
<mk-activity-home-widget-calender if={ !initializing && view == 0 } data={ [].concat(data) }/> <mk-activity-home-widget-calender if={ !initializing && data.view == 0 } data={ [].concat(data) }/>
<mk-activity-home-widget-chart if={ !initializing && view == 1 } data={ [].concat(data) }/> <mk-activity-home-widget-chart if={ !initializing && data.view == 1 } data={ [].concat(data) }/>
<style> <style>
:scope :scope
display block display block
@ -50,11 +50,13 @@
</style> </style>
<script> <script>
this.mixin('i'); this.data = {
this.mixin('api'); view: 0
};
this.mixin('widget');
this.initializing = true; this.initializing = true;
this.view = this.opts.data.hasOwnProperty('view') ? this.opts.data.view : 0;
this.on('mount', () => { this.on('mount', () => {
this.api('aggregation/users/activity', { this.api('aggregation/users/activity', {
@ -69,19 +71,11 @@
}); });
this.toggle = () => { this.toggle = () => {
this.view++; this.data.view++;
if (this.view == 2) this.view = 0; if (this.data.view == 2) this.data.view = 0;
// Save view state // Save view state
this.api('i/update_home', { this.save();
id: this.opts.id,
data: {
view: this.view
}
}).then(() => {
this.I.client_settings.home.find(w => w.id == this.opts.id).data.view = this.view;
this.I.update();
});
}; };
</script> </script>
</mk-activity-home-widget> </mk-activity-home-widget>

View File

@ -44,28 +44,25 @@
</style> </style>
<script> <script>
this.mixin('i'); this.data = {
this.mixin('api'); channel: null
};
this.channelId = this.opts.data.hasOwnProperty('channel') ? this.opts.data.channel : null; this.mixin('widget');
this.on('mount', () => { this.on('mount', () => {
if (this.channelId) { if (this.data.channel) {
this.zap(); this.zap();
} }
}); });
this.on('unmount', () => {
});
this.zap = () => { this.zap = () => {
this.update({ this.update({
fetching: true fetching: true
}); });
this.api('channels/show', { this.api('channels/show', {
channel_id: this.channelId channel_id: this.data.channel
}).then(channel => { }).then(channel => {
this.update({ this.update({
fetching: false, fetching: false,
@ -79,19 +76,11 @@
this.settings = () => { this.settings = () => {
const id = window.prompt('チャンネルID'); const id = window.prompt('チャンネルID');
if (!id) return; if (!id) return;
this.channelId = id; this.data.channel = id;
this.zap(); this.zap();
// Save state // Save state
this.api('i/update_home', { this.save();
id: this.opts.id,
data: {
channel: this.channelId
}
}).then(() => {
this.I.client_settings.home.find(w => w.id == this.opts.id).data.channel = this.channelId;
this.I.update();
});
}; };
</script> </script>
</mk-channel-home-widget> </mk-channel-home-widget>
@ -139,10 +128,6 @@
this.channel = null; this.channel = null;
this.posts = []; this.posts = [];
this.on('mount', () => {
});
this.on('unmount', () => { this.on('unmount', () => {
if (this.connection) { if (this.connection) {
this.connection.off('post', this.onPost); this.connection.off('post', this.onPost);

View File

@ -2,12 +2,12 @@
<p class="title"><i class="fa fa-server"></i>%i18n:desktop.tags.mk-server-home-widget.title%</p> <p class="title"><i class="fa fa-server"></i>%i18n:desktop.tags.mk-server-home-widget.title%</p>
<button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%"><i class="fa fa-sort"></i></button> <button onclick={ toggle } title="%i18n:desktop.tags.mk-server-home-widget.toggle%"><i class="fa fa-sort"></i></button>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p> <p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
<mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ view == 0 } connection={ connection }/> <mk-server-home-widget-cpu-and-memory-usage if={ !initializing } show={ data.view == 0 } connection={ connection }/>
<mk-server-home-widget-cpu if={ !initializing } show={ view == 1 } connection={ connection } meta={ meta }/> <mk-server-home-widget-cpu if={ !initializing } show={ data.view == 1 } connection={ connection } meta={ meta }/>
<mk-server-home-widget-memory if={ !initializing } show={ view == 2 } connection={ connection }/> <mk-server-home-widget-memory if={ !initializing } show={ data.view == 2 } connection={ connection }/>
<mk-server-home-widget-disk if={ !initializing } show={ view == 3 } connection={ connection }/> <mk-server-home-widget-disk if={ !initializing } show={ data.view == 3 } connection={ connection }/>
<mk-server-home-widget-uptimes if={ !initializing } show={ view == 4 } connection={ connection }/> <mk-server-home-widget-uptimes if={ !initializing } show={ data.view == 4 } connection={ connection }/>
<mk-server-home-widget-info if={ !initializing } show={ view == 5 } connection={ connection } meta={ meta }/> <mk-server-home-widget-info if={ !initializing } show={ data.view == 5 } connection={ connection } meta={ meta }/>
<style> <style>
:scope :scope
display block display block
@ -56,11 +56,13 @@
<script> <script>
import Connection from '../../../common/scripts/server-stream'; import Connection from '../../../common/scripts/server-stream';
this.mixin('i'); this.data = {
this.mixin('api'); view: 0
};
this.mixin('widget');
this.initializing = true; this.initializing = true;
this.view = this.opts.data.hasOwnProperty('view') ? this.opts.data.view : 0;
this.connection = new Connection(); this.connection = new Connection();
this.on('mount', () => { this.on('mount', () => {
@ -77,19 +79,11 @@
}); });
this.toggle = () => { this.toggle = () => {
this.view++; this.data.view++;
if (this.view == 6) this.view = 0; if (this.data.view == 6) this.data.view = 0;
// Save view state // Save widget state
this.api('i/update_home', { this.save();
id: this.opts.id,
data: {
view: this.view
}
}).then(() => {
this.I.client_settings.home.find(w => w.id == this.opts.id).data.view = this.view;
this.I.update();
});
}; };
</script> </script>
</mk-server-home-widget> </mk-server-home-widget>

View File

@ -1,7 +1,7 @@
<mk-slideshow-home-widget> <mk-slideshow-home-widget>
<div onclick={ choose }> <div onclick={ choose }>
<p if={ folder === undefined }>クリックしてフォルダを指定してください</p> <p if={ data.folder === undefined }>クリックしてフォルダを指定してください</p>
<p if={ folder !== undefined && images.length == 0 && !fetching }>このフォルダには画像がありません</p> <p if={ data.folder !== undefined && images.length == 0 && !fetching }>このフォルダには画像がありません</p>
<div ref="slideA" class="slide a"></div> <div ref="slideA" class="slide a"></div>
<div ref="slideB" class="slide b"></div> <div ref="slideB" class="slide b"></div>
</div> </div>
@ -49,18 +49,20 @@
<script> <script>
import anime from 'animejs'; import anime from 'animejs';
this.mixin('i'); this.data = {
this.mixin('api'); folder: undefined,
size: 0
};
this.mixin('widget');
this.size = this.opts.data.hasOwnProperty('size') ? this.opts.data.size : 0;
this.folder = this.opts.data.hasOwnProperty('folder') ? this.opts.data.folder : undefined;
this.images = []; this.images = [];
this.fetching = true; this.fetching = true;
this.on('mount', () => { this.on('mount', () => {
this.applySize(); this.applySize();
if (this.folder !== undefined) { if (this.data.folder !== undefined) {
this.fetch(); this.fetch();
} }
@ -74,7 +76,7 @@
this.applySize = () => { this.applySize = () => {
let h; let h;
if (this.size == 1) { if (this.data.size == 1) {
h = 250; h = 250;
} else { } else {
h = 170; h = 170;
@ -84,8 +86,8 @@
}; };
this.resize = () => { this.resize = () => {
this.size++; this.data.size++;
if (this.size == 2) this.size = 0; if (this.data.size == 2) this.data.size = 0;
this.applySize(); this.applySize();
this.save(); this.save();
@ -121,7 +123,7 @@
}); });
this.api('drive/files', { this.api('drive/files', {
folder_id: this.folder, folder_id: this.data.folder,
type: 'image/*', type: 'image/*',
limit: 100 limit: 100
}).then(images => { }).then(images => {
@ -138,26 +140,10 @@
this.choose = () => { this.choose = () => {
const i = riot.mount(document.body.appendChild(document.createElement('mk-select-folder-from-drive-window')))[0]; const i = riot.mount(document.body.appendChild(document.createElement('mk-select-folder-from-drive-window')))[0];
i.one('selected', folder => { i.one('selected', folder => {
this.folder = folder ? folder.id : null; this.data.folder = folder ? folder.id : null;
this.fetch(); this.fetch();
this.save(); this.save();
}); });
}; };
this.save = () => {
// Save state
this.api('i/update_home', {
id: this.opts.id,
data: {
folder: this.folder,
size: this.size
}
}).then(() => {
const w = this.I.client_settings.home.find(w => w.id == this.opts.id);
w.data.folder = this.folder;
w.data.size = this.size;
this.I.update();
});
};
</script> </script>
</mk-slideshow-home-widget> </mk-slideshow-home-widget>