diff options
Diffstat (limited to 'src/client')
28 files changed, 673 insertions, 480 deletions
diff --git a/src/client/app/common/scripts/get-face.ts b/src/client/app/common/scripts/get-face.ts new file mode 100644 index 0000000000..79cf7a1be4 --- /dev/null +++ b/src/client/app/common/scripts/get-face.ts @@ -0,0 +1,10 @@ +const faces = [ + '(=^・・^=)', + 'v(\'ω\')v', + '🐡( \'-\' 🐡 )ﾌｸﾞﾊﾟﾝﾁ!!!!', + '🖕(´･_･`)🖕', + '(｡>﹏<｡)', + '(Δ・x・Δ)' +]; + +export default () => faces[Math.floor(Math.random() * faces.length)]; diff --git a/src/client/app/common/scripts/get-kao.ts b/src/client/app/common/scripts/get-kao.ts deleted file mode 100644 index ca83153b96..0000000000 --- a/src/client/app/common/scripts/get-kao.ts +++ /dev/null @@ -1,9 +0,0 @@ -const kaos = [ - '(=^・・^=)', - 'v(\'ω\')v', - '🐡( \'-\' 🐡 )ﾌｸﾞﾊﾟﾝﾁ!!!!', - '🖕(´･_･`)🖕', - '(｡>﹏<｡)' -]; - -export default () => kaos[Math.floor(Math.random() * kaos.length)]; diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue index d4d35f6a86..fa88aeaaf4 100644 --- a/src/client/app/common/views/components/games/reversi/reversi.index.vue +++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue @@ -32,6 +32,7 @@ <mk-avatar class="avatar" :user="g.user2"/> <span><b>{{ g.user1 | userName }}</b> vs <b>{{ g.user2 | userName }}</b></span> <span class="state">{{ g.isEnded ? '%i18n:@game-state.ended%' : '%i18n:@game-state.playing%' }}</span> + <mk-time :time="g.createdAt" /> </a> </section> <section v-if="games.length > 0"> @@ -41,6 +42,7 @@ <mk-avatar class="avatar" :user="g.user2"/> <span><b>{{ g.user1 | userName }}</b> vs <b>{{ g.user2 | userName }}</b></span> <span class="state">{{ g.isEnded ? '%i18n:@game-state.ended%' : '%i18n:@game-state.playing%' }}</span> + <mk-time :time="g.createdAt" /> </a> </section> </div> diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue index 45a183e144..1d33702159 100644 --- a/src/client/app/common/views/components/signup.vue +++ b/src/client/app/common/views/components/signup.vue @@ -1,5 +1,10 @@ <template> <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()"> + <ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required> + <span>%i18n:@invitation-code%</span> + <span slot="prefix">%fa:id-card-alt%</span> + <p slot="text" v-html="'%i18n:@invitation-info%'.replace('{}', meta.maintainer.url)"></p> + </ui-input> <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername"> <span>%i18n:@username%</span> <span slot="prefix">@</span> @@ -46,11 +51,13 @@ export default Vue.extend({ username: '', password: '', retypedPassword: '', + invitationCode: '', url, recaptchaSitekey, usernameState: null, passwordStrength: '', - passwordRetypeState: null + passwordRetypeState: null, + meta: null } }, computed: { @@ -61,6 +68,11 @@ export default Vue.extend({ this.usernameState != 'max-range'); } }, + created() { + (this as any).os.getMeta().then(meta => { + this.meta = meta; + }); + }, methods: { onChangeUsername() { if (this.username == '') { @@ -110,6 +122,7 @@ export default Vue.extend({ (this as any).api('signup', { username: this.username, password: this.password, + invitationCode: this.invitationCode, 'g-recaptcha-response': recaptchaSitekey != null ? (window as any).grecaptcha.getResponse() : null }).then(() => { (this as any).api('signin', { diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue index cc9c75095e..4691604e57 100644 --- a/src/client/app/common/views/components/visibility-chooser.vue +++ b/src/client/app/common/views/components/visibility-chooser.vue @@ -44,7 +44,12 @@ import Vue from 'vue'; import * as anime from 'animejs'; export default Vue.extend({ - props: ['source', 'compact', 'v'], + props: ['source', 'compact'], + data() { + return { + v: this.$store.state.device.visibility || 'public' + } + }, mounted() { this.$nextTick(() => { const popover = this.$refs.popover as any; @@ -92,6 +97,7 @@ export default Vue.extend({ }, methods: { choose(visibility) { + this.$store.commit('device/setVisibility', visibility); this.$emit('chosen', visibility); this.$destroy(); }, diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue index ea51144173..bacaea65ee 100644 --- a/src/client/app/desktop/views/components/post-form.vue +++ b/src/client/app/desktop/views/components/post-form.vue @@ -58,7 +58,7 @@ import Vue from 'vue'; import insertTextAtCursor from 'insert-text-at-cursor'; import * as XDraggable from 'vuedraggable'; -import getKao from '../../../common/scripts/get-kao'; +import getFace from '../../../common/scripts/get-face'; import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue'; import parse from '../../../../../mfm/parse'; import { host } from '../../../config'; @@ -99,7 +99,7 @@ export default Vue.extend({ useCw: false, cw: null, geo: null, - visibility: 'public', + visibility: this.$store.state.device.visibility || 'public', visibleUsers: [], autocomplete: null, draghover: false, @@ -326,8 +326,7 @@ export default Vue.extend({ setVisibility() { const w = (this as any).os.new(MkVisibilityChooser, { - source: this.$refs.visibilityButton, - v: this.visibility + source: this.$refs.visibilityButton }); w.$once('chosen', v => { this.visibility = v; @@ -422,7 +421,7 @@ export default Vue.extend({ }, kao() { - this.text += getKao(); + this.text += getFace(); } } }); diff --git a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue new file mode 100644 index 0000000000..572974e248 --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue @@ -0,0 +1,145 @@ +<template> +<div class="zyknedwtlthezamcjlolyusmipqmjgxz"> + <svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`"> + <defs> + <linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0"> + <stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop> + <stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop> + </linearGradient> + <mask :id="cpuMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY"> + <polygon + :points="cpuPolygonPoints" + fill="#fff" + fill-opacity="0.5"/> + <polyline + :points="cpuPolylinePoints" + fill="none" + stroke="#fff" + stroke-width="0.3"/> + </mask> + </defs> + <rect + x="0" y="0" + :width="viewBoxX" :height="viewBoxY" + :style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"/> + <text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text> + </svg> + <svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`"> + <defs> + <linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0"> + <stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop> + <stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop> + </linearGradient> + <mask :id="memMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY"> + <polygon + :points="memPolygonPoints" + fill="#fff" + fill-opacity="0.5"/> + <polyline + :points="memPolylinePoints" + fill="none" + stroke="#fff" + stroke-width="0.3"/> + </mask> + </defs> + <rect + x="0" y="0" + :width="viewBoxX" :height="viewBoxY" + :style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"/> + <text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text> + </svg> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import * as uuid from 'uuid'; + +export default Vue.extend({ + props: ['connection'], + data() { + return { + viewBoxX: 50, + viewBoxY: 20, + stats: [], + cpuGradientId: uuid(), + cpuMaskId: uuid(), + memGradientId: uuid(), + memMaskId: uuid(), + cpuPolylinePoints: '', + memPolylinePoints: '', + cpuPolygonPoints: '', + memPolygonPoints: '', + cpuP: '', + memP: '' + }; + }, + mounted() { + this.connection.on('stats', this.onStats); + this.connection.on('statsLog', this.onStatsLog); + this.connection.send({ + type: 'requestLog', + id: Math.random().toString() + }); + }, + beforeDestroy() { + this.connection.off('stats', this.onStats); + this.connection.off('statsLog', this.onStatsLog); + }, + methods: { + onStats(stats) { + this.stats.push(stats); + if (this.stats.length > 50) this.stats.shift(); + + const cpuPolylinePoints = this.stats.map((s, i) => [this.viewBoxX - ((this.stats.length - 1) - i), (1 - s.cpu_usage) * this.viewBoxY]); + const memPolylinePoints = this.stats.map((s, i) => [this.viewBoxX - ((this.stats.length - 1) - i), (1 - (s.mem.used / s.mem.total)) * this.viewBoxY]); + this.cpuPolylinePoints = cpuPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); + this.memPolylinePoints = memPolylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); + + this.cpuPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${this.viewBoxY} ${this.cpuPolylinePoints} ${this.viewBoxX},${this.viewBoxY}`; + this.memPolygonPoints = `${this.viewBoxX - (this.stats.length - 1)},${this.viewBoxY} ${this.memPolylinePoints} ${this.viewBoxX},${this.viewBoxY}`; + + this.cpuP = (stats.cpu_usage * 100).toFixed(0); + this.memP = (stats.mem.used / stats.mem.total * 100).toFixed(0); + }, + onStatsLog(statsLog) { + statsLog.forEach(stats => this.onStats(stats)); + } + } +}); +</script> + +<style lang="stylus" scoped> +root(isDark) + margin-bottom 16px + + > svg + display block + width 50% + float left + + &:first-child + padding-right 5px + + &:last-child + padding-left 5px + + > text + font-size 2px + fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55) + + > tspan + opacity 0.5 + + &:after + content "" + display block + clear both + +.zyknedwtlthezamcjlolyusmipqmjgxz[data-darkmode] + root(true) + +.zyknedwtlthezamcjlolyusmipqmjgxz:not([data-darkmode]) + root(false) + +</style> diff --git a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue index b10e829965..e68d3a749e 100644 --- a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue +++ b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue @@ -1,37 +1,80 @@ <template> -<div> - <h1>%i18n:@dashboard%</h1> - <div v-if="stats"> - <p><b>%i18n:@all-users%</b>: <span>{{ stats.usersCount | number }}</span></p> - <p><b>%i18n:@original-users%</b>: <span>{{ stats.originalUsersCount | number }}</span></p> - <p><b>%i18n:@all-notes%</b>: <span>{{ stats.notesCount | number }}</span></p> - <p><b>%i18n:@original-notes%</b>: <span>{{ stats.originalNotesCount | number }}</span></p> +<div class="obdskegsannmntldydackcpzezagxqfy card"> + <header>%i18n:@dashboard%</header> + <div v-if="stats" class="stats"> + <div><b>%fa:user% {{ stats.originalUsersCount | number }}</b><span>%i18n:@original-users%</span></div> + <div><span>%fa:user% {{ stats.usersCount | number }}</span><span>%i18n:@all-users%</span></div> + <div><b>%fa:pen% {{ stats.originalNotesCount | number }}</b><span>%i18n:@original-notes%</span></div> + <div><span>%fa:pen% {{ stats.notesCount | number }}</span><span>%i18n:@all-notes%</span></div> + </div> + <div class="cpu-memory"> + <x-cpu-memory :connection="connection"/> + </div> + <div> + <button class="ui" @click="invite">%i18n:@invite%</button> + <p v-if="inviteCode">Code: <code>{{ inviteCode }}</code></p> </div> </div> </template> <script lang="ts"> import Vue from "vue"; +import XCpuMemory from "./admin.cpu-memory.vue"; export default Vue.extend({ + components: { + XCpuMemory + }, data() { return { - stats: null + stats: null, + inviteCode: null, + connection: null, + connectionId: null }; }, created() { + this.connection = (this as any).os.streams.serverStatsStream.getConnection(); + this.connectionId = (this as any).os.streams.serverStatsStream.use(); + (this as any).api('stats').then(stats => { this.stats = stats; }); + }, + beforeDestroy() { + (this as any).os.streams.serverStatsStream.dispose(this.connectionId); + }, + methods: { + invite() { + (this as any).api('admin/invite').then(x => { + this.inviteCode = x.code; + }); + } } }); </script> <style lang="stylus" scoped> -h1 - margin 0 0 1em 0 - padding 0 0 8px 0 - font-size 1em - color #555 - border-bottom solid 1px #eee +@import '~const.styl' + +.obdskegsannmntldydackcpzezagxqfy + > .stats + display flex + justify-content center + margin-bottom 16px + padding 16px + border solid 1px #eee + border-radius 8px + + > div + flex 1 + text-align center + + > *:first-child + display block + color $theme-color + + > *:last-child + font-size 70% + </style> diff --git a/src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue b/src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue new file mode 100644 index 0000000000..3c537d8d6d --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue @@ -0,0 +1,51 @@ +<template> +<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`"> + <polyline + :points="points" + fill="none" + stroke-width="1" + stroke="#555"/> +</svg> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: { + chart: { + required: true + }, + type: { + type: String, + required: true + } + }, + data() { + return { + viewBoxX: 365, + viewBoxY: 70, + points: null + }; + }, + created() { + const peak = Math.max.apply(null, this.chart.map(d => this.type == 'local' ? d.drive.local.totalSize : d.drive.remote.totalSize)); + + if (peak != 0) { + const data = this.chart.slice().reverse().map(x => ({ + size: this.type == 'local' ? x.drive.local.totalSize : x.drive.remote.totalSize + })); + + this.points = data.map((d, i) => `${i},${(1 - (d.size / peak)) * this.viewBoxY}`).join(' '); + } + } +}); +</script> + +<style lang="stylus" scoped> +svg + display block + padding 10px + width 100% + +</style> diff --git a/src/client/app/desktop/views/pages/admin/admin.drive-chart.vue b/src/client/app/desktop/views/pages/admin/admin.drive-chart.vue new file mode 100644 index 0000000000..4f94fd2372 --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.drive-chart.vue @@ -0,0 +1,34 @@ +<template> +<div class="card"> + <header>%i18n:@title%</header> + <div class="card"> + <header>%i18n:@local%</header> + <x-chart v-if="chart" :chart="chart" type="local"/> + </div> + <div class="card"> + <header>%i18n:@remote%</header> + <x-chart v-if="chart" :chart="chart" type="remote"/> + </div> +</div> +</template> + +<script lang="ts"> +import Vue from "vue"; +import XChart from "./admin.drive-chart.chart.vue"; + +export default Vue.extend({ + components: { + XChart + }, + props: { + chart: { + required: true + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +</style> diff --git a/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue b/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue new file mode 100644 index 0000000000..83c61c1313 --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue @@ -0,0 +1,76 @@ +<template> +<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`"> + <polyline + :points="pointsNote" + fill="none" + stroke-width="1" + stroke="#41ddde"/> + <polyline + :points="pointsReply" + fill="none" + stroke-width="1" + stroke="#f7796c"/> + <polyline + :points="pointsRenote" + fill="none" + stroke-width="1" + stroke="#a1de41"/> + <polyline + :points="pointsTotal" + fill="none" + stroke-width="1" + stroke="#555" + stroke-dasharray="2 2"/> +</svg> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: { + chart: { + required: true + }, + type: { + type: String, + required: true + } + }, + data() { + return { + viewBoxX: 365, + viewBoxY: 70, + pointsNote: null, + pointsReply: null, + pointsRenote: null, + pointsTotal: null + }; + }, + created() { + const peak = Math.max.apply(null, this.chart.map(d => this.type == 'local' ? d.notes.local.diff : d.notes.remote.diff)); + + if (peak != 0) { + const data = this.chart.slice().reverse().map(x => ({ + normal: this.type == 'local' ? x.notes.local.diffs.normal : x.notes.remote.diffs.normal, + reply: this.type == 'local' ? x.notes.local.diffs.reply : x.notes.remote.diffs.reply, + renote: this.type == 'local' ? x.notes.local.diffs.renote : x.notes.remote.diffs.renote, + total: this.type == 'local' ? x.notes.local.diff : x.notes.remote.diff + })); + + this.pointsNote = data.map((d, i) => `${i},${(1 - (d.normal / peak)) * this.viewBoxY}`).join(' '); + this.pointsReply = data.map((d, i) => `${i},${(1 - (d.reply / peak)) * this.viewBoxY}`).join(' '); + this.pointsRenote = data.map((d, i) => `${i},${(1 - (d.renote / peak)) * this.viewBoxY}`).join(' '); + this.pointsTotal = data.map((d, i) => `${i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' '); + } + } +}); +</script> + +<style lang="stylus" scoped> +svg + display block + padding 10px + width 100% + +</style> diff --git a/src/client/app/desktop/views/pages/admin/admin.notes-chart.vue b/src/client/app/desktop/views/pages/admin/admin.notes-chart.vue new file mode 100644 index 0000000000..e4d396d9c6 --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.notes-chart.vue @@ -0,0 +1,34 @@ +<template> +<div class="card"> + <header>%i18n:@title%</header> + <div class="card"> + <header>%i18n:@local%</header> + <x-chart v-if="chart" :chart="chart" type="local"/> + </div> + <div class="card"> + <header>%i18n:@remote%</header> + <x-chart v-if="chart" :chart="chart" type="remote"/> + </div> +</div> +</template> + +<script lang="ts"> +import Vue from "vue"; +import XChart from "./admin.notes-chart.chart.vue"; + +export default Vue.extend({ + components: { + XChart + }, + props: { + chart: { + required: true + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +</style> diff --git a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue index 6eb82f0a51..59932f4be7 100644 --- a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue +++ b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue @@ -1,5 +1,5 @@ <template> -<div> +<div class="card"> <header>%i18n:@suspend-user%</header> <input v-model="username" type="text" class="ui"/> <button class="ui" @click="suspendUser" :disabled="suspending">%i18n:@suspend%</button> diff --git a/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue index 8c6f63ce88..a75c0bd64e 100644 --- a/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue +++ b/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue @@ -1,5 +1,5 @@ <template> -<div> +<div class="card"> <header>%i18n:@unsuspend-user%</header> <input v-model="username" type="text" class="ui"/> <button class="ui" @click="unsuspendUser" :disabled="unsuspending">%i18n:@unsuspend%</button> diff --git a/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue b/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue new file mode 100644 index 0000000000..72962870d9 --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue @@ -0,0 +1,51 @@ +<template> +<div class="card"> + <header>%i18n:@unverify-user%</header> + <input v-model="username" type="text" class="ui"/> + <button class="ui" @click="unverifyUser" :disabled="unverifying">%i18n:@unverify%</button> +</div> +</template> + +<script lang="ts"> +import Vue from "vue"; +import parseAcct from "../../../../../../misc/acct/parse"; + +export default Vue.extend({ + data() { + return { + username: null, + unverifying: false + }; + }, + methods: { + async unverifyUser() { + this.unverifying = true; + + const user = await (this as any).os.api( + "users/show", + parseAcct(this.username) + ); + + await (this as any).os.api("admin/unverify-user", { + userId: user.id + }); + + this.unverifying = false; + + (this as any).os.apis.dialog({ text: "%i18n:@unverified%" }); + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +header + margin 10px 0 + + +button + margin 16px 0 + +</style> diff --git a/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue b/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue new file mode 100644 index 0000000000..c2ab4a78e3 --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue @@ -0,0 +1,51 @@ +<template> +<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`"> + <polyline + :points="points" + fill="none" + stroke-width="1" + stroke="#555"/> +</svg> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + props: { + chart: { + required: true + }, + type: { + type: String, + required: true + } + }, + data() { + return { + viewBoxX: 365, + viewBoxY: 70, + points: null + }; + }, + created() { + const peak = Math.max.apply(null, this.chart.map(d => this.type == 'local' ? d.users.local.diff : d.users.remote.diff)); + + if (peak != 0) { + const data = this.chart.slice().reverse().map(x => ({ + count: this.type == 'local' ? x.users.local.diff : x.users.remote.diff + })); + + this.points = data.map((d, i) => `${i},${(1 - (d.count / peak)) * this.viewBoxY}`).join(' '); + } + } +}); +</script> + +<style lang="stylus" scoped> +svg + display block + padding 10px + width 100% + +</style> diff --git a/src/client/app/desktop/views/pages/admin/admin.users-chart.vue b/src/client/app/desktop/views/pages/admin/admin.users-chart.vue new file mode 100644 index 0000000000..e620012702 --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.users-chart.vue @@ -0,0 +1,34 @@ +<template> +<div class="card"> + <header>%i18n:@title%</header> + <div class="card"> + <header>%i18n:@local%</header> + <x-chart v-if="chart" :chart="chart" type="local"/> + </div> + <div class="card"> + <header>%i18n:@remote%</header> + <x-chart v-if="chart" :chart="chart" type="remote"/> + </div> +</div> +</template> + +<script lang="ts"> +import Vue from "vue"; +import XChart from "./admin.users-chart.chart.vue"; + +export default Vue.extend({ + components: { + XChart + }, + props: { + chart: { + required: true + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +</style> diff --git a/src/client/app/desktop/views/pages/admin/admin.verify-user.vue b/src/client/app/desktop/views/pages/admin/admin.verify-user.vue new file mode 100644 index 0000000000..3902d4bddd --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.verify-user.vue @@ -0,0 +1,51 @@ +<template> +<div class="card"> + <header>%i18n:@verify-user%</header> + <input v-model="username" type="text" class="ui"/> + <button class="ui" @click="verifyUser" :disabled="verifying">%i18n:@verify%</button> +</div> +</template> + +<script lang="ts"> +import Vue from "vue"; +import parseAcct from "../../../../../../misc/acct/parse"; + +export default Vue.extend({ + data() { + return { + username: null, + verifying: false + }; + }, + methods: { + async verifyUser() { + this.verifying = true; + + const user = await (this as any).os.api( + "users/show", + parseAcct(this.username) + ); + + await (this as any).os.api("admin/verify-user", { + userId: user.id + }); + + this.verifying = false; + + (this as any).os.apis.dialog({ text: "%i18n:@verified%" }); + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +header + margin 10px 0 + + +button + margin 16px 0 + +</style> diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue index b581bea465..cbb1890cc3 100644 --- a/src/client/app/desktop/views/pages/admin/admin.vue +++ b/src/client/app/desktop/views/pages/admin/admin.vue @@ -9,12 +9,17 @@ </ul> </nav> <main> - <div v-if="page == 'dashboard'"> + <div v-show="page == 'dashboard'"> <x-dashboard/> + <x-users-chart :chart="chart"/> + <x-notes-chart :chart="chart"/> + <x-drive-chart :chart="chart"/> </div> <div v-if="page == 'users'"> <x-suspend-user/> <x-unsuspend-user/> + <x-verify-user/> + <x-unverify-user/> </div> <div v-if="page == 'drive'"></div> <div v-if="page == 'update'"></div> @@ -27,18 +32,34 @@ import Vue from "vue"; import XDashboard from "./admin.dashboard.vue"; import XSuspendUser from "./admin.suspend-user.vue"; import XUnsuspendUser from "./admin.unsuspend-user.vue"; +import XVerifyUser from "./admin.verify-user.vue"; +import XUnverifyUser from "./admin.unverify-user.vue"; +import XUsersChart from "./admin.users-chart.vue"; +import XNotesChart from "./admin.notes-chart.vue"; +import XDriveChart from "./admin.drive-chart.vue"; export default Vue.extend({ components: { XDashboard, XSuspendUser, - XUnsuspendUser + XUnsuspendUser, + XVerifyUser, + XUnverifyUser, + XUsersChart, + XNotesChart, + XDriveChart }, data() { return { - page: 'dashboard' + page: 'dashboard', + chart: null }; }, + created() { + (this as any).api('admin/chart').then(chart => { + this.chart = chart; + }); + }, methods: { nav(page: string) { this.page = page; @@ -47,7 +68,7 @@ export default Vue.extend({ }); </script> -<style lang="stylus" scoped> +<style lang="stylus"> @import '~const.styl' .mk-admin @@ -90,13 +111,23 @@ export default Vue.extend({ width 100% padding 16px 32px -header - margin 10px 0 + > div + > div + max-width 800px + +.card + padding 32px + background #fff + box-shadow 0 2px 8px rgba(#000, 0.1) + &:not(:last-child) + margin-bottom 16px -button - margin 16px 0 - position absolute - right 0 + > header + margin 0 0 1em 0 + padding 0 0 8px 0 + font-size 1em + color #555 + border-bottom solid 1px #eee </style> diff --git a/src/client/app/dev/views/new-app.vue b/src/client/app/dev/views/new-app.vue index bf19e6da57..87b35db259 100644 --- a/src/client/app/dev/views/new-app.vue +++ b/src/client/app/dev/views/new-app.vue @@ -95,7 +95,7 @@ export default Vue.extend({ callbackUrl: this.cb, permission: this.permission }).then(() => { - location.href = '/apps'; + location.href = '/dev/apps'; }).catch(() => { alert('アプリの作成に失敗しました。再度お試しください。'); }); diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue index 702bc4c9e1..a74df67c0a 100644 --- a/src/client/app/mobile/views/components/post-form.vue +++ b/src/client/app/mobile/views/components/post-form.vue @@ -56,7 +56,7 @@ import Vue from 'vue'; import insertTextAtCursor from 'insert-text-at-cursor'; import * as XDraggable from 'vuedraggable'; import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue'; -import getKao from '../../../common/scripts/get-kao'; +import getFace from '../../../common/scripts/get-face'; import parse from '../../../../../mfm/parse'; import { host } from '../../../config'; @@ -94,7 +94,7 @@ export default Vue.extend({ files: [], poll: false, geo: null, - visibility: 'public', + visibility: this.$store.state.device.visibility || 'public', visibleUsers: [], useCw: false, cw: null, @@ -240,8 +240,7 @@ export default Vue.extend({ setVisibility() { const w = (this as any).os.new(MkVisibilityChooser, { source: this.$refs.visibilityButton, - compact: true, - v: this.visibility + compact: true }); w.$once('chosen', v => { this.visibility = v; @@ -314,7 +313,7 @@ export default Vue.extend({ }, kao() { - this.text += getKao(); + this.text += getFace(); } } }); diff --git a/src/client/app/stats/style.styl b/src/client/app/stats/style.styl deleted file mode 100644 index 5ae230ea56..0000000000 --- a/src/client/app/stats/style.styl +++ /dev/null @@ -1,10 +0,0 @@ -@import "../app" -@import "../reset" - -html - color #456267 - background #fff - -body - margin 0 - padding 0 diff --git a/src/client/app/stats/tags/index.tag b/src/client/app/stats/tags/index.tag deleted file mode 100644 index f8944c0832..0000000000 --- a/src/client/app/stats/tags/index.tag +++ /dev/null @@ -1,209 +0,0 @@ -<mk-index> - <h1>Misskey<i>Statistics</i></h1> - <main v-if="!initializing"> - <mk-users stats={ stats }/> - <mk-notes stats={ stats }/> - </main> - <footer><a href={ _URL_ }>{ _HOST_ }</a></footer> - <style lang="stylus" scoped> - :scope - display block - margin 0 auto - padding 0 16px - max-width 700px - - > h1 - margin 0 - padding 24px 0 0 0 - font-size 24px - font-weight normal - - > i - font-style normal - color #f43b16 - - > main - > * - margin 24px 0 - padding-top 24px - border-top solid 1px #eee - - > h2 - margin 0 0 12px 0 - font-size 18px - font-weight normal - - > footer - margin 24px 0 - text-align center - - > a - color #546567 - </style> - <script lang="typescript"> - this.mixin('api'); - - this.initializing = true; - - this.on('mount', () => { - this.$root.$data.os.api('stats').then(stats => { - this.update({ - initializing: false, - stats - }); - }); - }); - </script> -</mk-index> - -<mk-notes> - <h2>%i18n:stats.notes-count% <b>{ stats.notesCount }</b></h2> - <mk-notes-chart v-if="!initializing" data={ data }/> - <style lang="stylus" scoped> - :scope - display block - </style> - <script lang="typescript"> - this.mixin('api'); - - this.initializing = true; - this.stats = this.opts.stats; - - this.on('mount', () => { - this.$root.$data.os.api('aggregation/notes', { - limit: 365 - }).then(data => { - this.update({ - initializing: false, - data - }); - }); - }); - </script> -</mk-notes> - -<mk-users> - <h2>%i18n:stats.users-count% <b>{ stats.usersCount }</b></h2> - <mk-users-chart v-if="!initializing" data={ data }/> - <style lang="stylus" scoped> - :scope - display block - </style> - <script lang="typescript"> - this.mixin('api'); - - this.initializing = true; - this.stats = this.opts.stats; - - this.on('mount', () => { - this.$root.$data.os.api('aggregation/users', { - limit: 365 - }).then(data => { - this.update({ - initializing: false, - data - }); - }); - }); - </script> -</mk-users> - -<mk-notes-chart> - <svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none"> - <title>Black ... Total<br/>Blue ... Notes<br/>Red ... Replies<br/>Green ... Renotes</title> - <polyline - riot-points={ pointsNote } - fill="none" - stroke-width="1" - stroke="#41ddde"/> - <polyline - riot-points={ pointsReply } - fill="none" - stroke-width="1" - stroke="#f7796c"/> - <polyline - riot-points={ pointsRenote } - fill="none" - stroke-width="1" - stroke="#a1de41"/> - <polyline - riot-points={ pointsTotal } - fill="none" - stroke-width="1" - stroke="#555" - stroke-dasharray="2 2"/> - </svg> - <style lang="stylus" scoped> - :scope - display block - - > svg - display block - padding 1px - width 100% - </style> - <script lang="typescript"> - this.viewBoxX = 365; - this.viewBoxY = 80; - - this.data = this.opts.data.reverse(); - this.data.forEach(d => d.total = d.notes + d.replies + d.renotes); - const peak = Math.max.apply(null, this.data.map(d => d.total)); - - this.on('mount', () => { - this.render(); - }); - - this.render = () => { - this.update({ - pointsNote: this.data.map((d, i) => `${i},${(1 - (d.notes / peak)) * this.viewBoxY}`).join(' '), - pointsReply: this.data.map((d, i) => `${i},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' '), - pointsRenote: this.data.map((d, i) => `${i},${(1 - (d.renotes / peak)) * this.viewBoxY}`).join(' '), - pointsTotal: this.data.map((d, i) => `${i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ') - }); - }; - </script> -</mk-notes-chart> - -<mk-users-chart> - <svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none"> - <polyline - riot-points={ createdPoints } - fill="none" - stroke-width="1" - stroke="#1cde84"/> - <polyline - riot-points={ totalPoints } - fill="none" - stroke-width="1" - stroke="#555"/> - </svg> - <style lang="stylus" scoped> - :scope - display block - - > svg - display block - padding 1px - width 100% - </style> - <script lang="typescript"> - this.viewBoxX = 365; - this.viewBoxY = 80; - - this.data = this.opts.data.reverse(); - const totalPeak = Math.max.apply(null, this.data.map(d => d.total)); - const createdPeak = Math.max.apply(null, this.data.map(d => d.created)); - - this.on('mount', () => { - this.render(); - }); - - this.render = () => { - this.update({ - totalPoints: this.data.map((d, i) => `${i},${(1 - (d.total / totalPeak)) * this.viewBoxY}`).join(' '), - createdPoints: this.data.map((d, i) => `${i},${(1 - (d.created / createdPeak)) * this.viewBoxY}`).join(' ') - }); - }; - </script> -</mk-users-chart> diff --git a/src/client/app/stats/tags/index.ts b/src/client/app/stats/tags/index.ts deleted file mode 100644 index f41151949f..0000000000 --- a/src/client/app/stats/tags/index.ts +++ /dev/null @@ -1 +0,0 @@ -require('./index.tag'); diff --git a/src/client/app/status/style.styl b/src/client/app/status/style.styl deleted file mode 100644 index 5ae230ea56..0000000000 --- a/src/client/app/status/style.styl +++ /dev/null @@ -1,10 +0,0 @@ -@import "../app" -@import "../reset" - -html - color #456267 - background #fff - -body - margin 0 - padding 0 diff --git a/src/client/app/status/tags/index.tag b/src/client/app/status/tags/index.tag deleted file mode 100644 index 899467097a..0000000000 --- a/src/client/app/status/tags/index.tag +++ /dev/null @@ -1,201 +0,0 @@ -<mk-index> - <h1>Misskey<i>Status</i></h1> - <p>%fa:info-circle%%i18n:status.all-systems-maybe-operational%</p> - <main> - <mk-cpu-usage connection={ connection }/> - <mk-mem-usage connection={ connection }/> - </main> - <footer><a href={ _URL_ }>{ _HOST_ }</a></footer> - <style lang="stylus" scoped> - :scope - display block - margin 0 auto - padding 0 16px - max-width 700px - - > h1 - margin 0 - padding 24px 0 16px 0 - font-size 24px - font-weight normal - - > [data-fa] - font-style normal - color #f43b16 - - > p - display block - margin 0 - padding 12px 16px - background #eaf4ef - //border solid 1px #99ccb2 - border-radius 4px - - > [data-fa] - margin-right 5px - - > main - > * - margin 24px 0 - - > h2 - margin 0 0 12px 0 - font-size 18px - font-weight normal - - > footer - margin 24px 0 - text-align center - - > a - color #546567 - </style> - <script lang="typescript"> - import Connection from '../../common/scripts/streaming/server-stream'; - - this.mixin('api'); - - this.initializing = true; - this.connection = new Connection(); - - this.on('mount', () => { - this.$root.$data.os.api('meta').then(meta => { - this.update({ - initializing: false, - meta - }); - }); - }); - - this.on('unmount', () => { - this.connection.close(); - }); - - </script> -</mk-index> - -<mk-cpu-usage> - <h2>CPU <b>{ percentage }%</b></h2> - <mk-line-chart ref="chart"/> - <style lang="stylus" scoped> - :scope - display block - </style> - <script lang="typescript"> - this.connection = this.opts.connection; - - this.on('mount', () => { - this.connection.on('stats', this.onStats); - }); - - this.on('unmount', () => { - this.connection.off('stats', this.onStats); - }); - - this.onStats = stats => { - this.$refs.chart.addData(1 - stats.cpu_usage); - - const percentage = (stats.cpu_usage * 100).toFixed(0); - - this.update({ - percentage - }); - }; - </script> -</mk-cpu-usage> - -<mk-mem-usage> - <h2>MEM <b>{ percentage }%</b></h2> - <mk-line-chart ref="chart"/> - <style lang="stylus" scoped> - :scope - display block - </style> - <script lang="typescript"> - this.connection = this.opts.connection; - - this.on('mount', () => { - this.connection.on('stats', this.onStats); - }); - - this.on('unmount', () => { - this.connection.off('stats', this.onStats); - }); - - this.onStats = stats => { - stats.mem.used = stats.mem.total - stats.mem.free; - this.$refs.chart.addData(1 - (stats.mem.used / stats.mem.total)); - - const percentage = (stats.mem.used / stats.mem.total * 100).toFixed(0); - - this.update({ - percentage - }); - }; - </script> -</mk-mem-usage> - -<mk-line-chart> - <svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none"> - <defs> - <linearGradient id={ gradientId } x1="0" x2="0" y1="1" y2="0"> - <stop offset="0%" stop-color="rgba(244, 59, 22, 0)"></stop> - <stop offset="100%" stop-color="#f43b16"></stop> - </linearGradient> - <mask id={ maskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }> - <polygon - riot-points={ polygonPoints } - fill="#fff" - fill-opacity="0.5"/> - </mask> - </defs> - <line x1="0" y1="0" riot-x2={ viewBoxX } y2="0" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/> - <line x1="0" y1="25%" riot-x2={ viewBoxX } y2="25%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/> - <line x1="0" y1="50%" riot-x2={ viewBoxX } y2="50%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/> - <line x1="0" y1="75%" riot-x2={ viewBoxX } y2="75%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/> - <line x1="0" y1="100%" riot-x2={ viewBoxX } y2="100%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/> - <rect - x="-1" y="-1" - riot-width={ viewBoxX + 2 } riot-height={ viewBoxY + 2 } - style="stroke: none; fill: url(#{ gradientId }); mask: url(#{ maskId })"/> - <polyline - riot-points={ polylinePoints } - fill="none" - stroke="#f43b16" - stroke-width="0.5"/> - </svg> - <style lang="stylus" scoped> - :scope - display block - padding 16px - border-radius 8px - background #1c2531 - - > svg - display block - padding 1px - width 100% - </style> - <script lang="typescript"> - import uuid from 'uuid'; - - this.viewBoxX = 100; - this.viewBoxY = 30; - this.data = []; - this.gradientId = uuid(); - this.maskId = uuid(); - - this.addData = data => { - this.data.push(data); - if (this.data.length > 100) this.data.shift(); - - const polylinePoints = this.data.map((d, i) => `${this.viewBoxX - ((this.data.length - 1) - i)},${d * this.viewBoxY}`).join(' '); - const polygonPoints = `${this.viewBoxX - (this.data.length - 1)},${ this.viewBoxY } ${ polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`; - - this.update({ - polylinePoints, - polygonPoints - }); - }; - </script> -</mk-line-chart> diff --git a/src/client/app/status/tags/index.ts b/src/client/app/status/tags/index.ts deleted file mode 100644 index f41151949f..0000000000 --- a/src/client/app/status/tags/index.ts +++ /dev/null @@ -1 +0,0 @@ -require('./index.tag'); diff --git a/src/client/app/store.ts b/src/client/app/store.ts index f85253a281..7e2cc3976b 100644 --- a/src/client/app/store.ts +++ b/src/client/app/store.ts @@ -110,6 +110,10 @@ export default (os: MiOS) => new Vuex.Store({ src: x.src, arg: x.arg }; + }, + + setVisibility(state, visibility) { + state.visibility = visibility; } } }, |