[card] make people chose light or dark mode
This commit is contained in:
Avris
parent
4de6994510
commit
cb2d328d03
|
|
@ -0,0 +1,7 @@
|
|||
-- Up
|
||||
|
||||
ALTER TABLE profiles ADD COLUMN cardDark TEXT NULL;
|
||||
|
||||
UPDATE profiles SET cardDark = replace(card, '.png', '-dark.png') WHERE card IS NOT NULL;
|
||||
|
||||
-- Down
|
||||
|
|
@ -36,27 +36,31 @@
|
|||
<Icon v="id-card"/>
|
||||
<T>profile.card.link</T>:
|
||||
</small>
|
||||
<small v-if="profile.card === null">
|
||||
<button class="btn btn-outline-success btn-sm" @click="generateCard">
|
||||
<T>profile.card.generate</T>
|
||||
<small v-if="profile.card === null && profile.cardDark === null">
|
||||
(<T>profile.card.generate</T>)
|
||||
<button class="btn btn-outline-success btn-sm" @click="generateCard(false)">
|
||||
<Icon v="sun"/>
|
||||
<T>mode.light</T>
|
||||
</button>
|
||||
<button class="btn btn-outline-success btn-sm" @click="generateCard(true)">
|
||||
<Icon v="moon"/>
|
||||
<T>mode.dark</T>
|
||||
</button>
|
||||
</small>
|
||||
<small v-else-if="profile.card === ''">
|
||||
<small v-else-if="profile.card === '' || profile.cardDark === ''">
|
||||
<Spinner/>
|
||||
<T>profile.card.generating</T>
|
||||
</small>
|
||||
<template v-if="profile.card">
|
||||
<a :href="profile.card" target="_blank" rel="noopener"
|
||||
<a v-if="profile.card" :href="profile.card" target="_blank" rel="noopener"
|
||||
class="btn btn-outline-success btn-sm mx-1">
|
||||
<Icon v="sun"/>
|
||||
<T>mode.light</T>
|
||||
</a>
|
||||
<a :href="profile.card.replace('.png', '-dark.png')" target="_blank" rel="noopener"
|
||||
<a v-if="profile.cardDark" :href="profile.cardDark" target="_blank" rel="noopener"
|
||||
class="btn btn-outline-success btn-sm mx-1">
|
||||
<Icon v="moon"/>
|
||||
<T>mode.dark</T>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</Profile>
|
||||
|
|
@ -152,13 +156,13 @@
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
async generateCard() {
|
||||
await this.$axios.$post(`/profile/request-card`);
|
||||
this.profile.card = '';
|
||||
async generateCard(dark) {
|
||||
await this.$axios.$post(`/profile/request-card?dark=${dark ? '1' : '0'}`);
|
||||
this.profile[dark ? 'cardDark' : 'card'] = '';
|
||||
this.startCheckingForCard();
|
||||
},
|
||||
startCheckingForCard() {
|
||||
if (this.cardCheckHandle || !this.profile || this.profile.card) {
|
||||
if (this.cardCheckHandle || !this.profile || this.profile.card || this.profile.cardDark) {
|
||||
return;
|
||||
}
|
||||
this.cardCheckHandle = setInterval(this.checkForCard, 3000);
|
||||
|
|
@ -166,9 +170,9 @@
|
|||
async checkForCard() {
|
||||
try {
|
||||
const card = await this.$axios.$get(`/profile/has-card`);
|
||||
console.log(card);
|
||||
if (card) {
|
||||
this.profile.card = card;
|
||||
if (card.card || card.cardDark) {
|
||||
this.profile.card = card.card;
|
||||
this.profile.cardDark = card.cardDark;
|
||||
clearInterval(this.cardCheckHandle);
|
||||
}
|
||||
} catch {
|
||||
|
|
|
|||
|
|
@ -23,32 +23,24 @@ const sleep = ms => new Promise(res => setTimeout(res, ms));
|
|||
|
||||
const modes = ['light', 'dark'];
|
||||
|
||||
(async () => {
|
||||
const db = await dbConnection();
|
||||
while (true) {
|
||||
await sleep(3000);
|
||||
|
||||
const shoot = async (db, mode) => {
|
||||
const profiles = (await db.all(`
|
||||
SELECT profiles.id, profiles.locale, users.username
|
||||
FROM profiles
|
||||
LEFT JOIN users on profiles.userId = users.id
|
||||
WHERE profiles.card = ''
|
||||
WHERE profiles.${mode === 'dark' ? 'cardDark' : 'card'} = ''
|
||||
ORDER BY RANDOM()
|
||||
LIMIT 6
|
||||
`)).filter(({locale}) => !isHighLoadTime(locale));
|
||||
|
||||
if (profiles.length === 0) {
|
||||
console.log('No profiles in the queue');
|
||||
continue;
|
||||
return;
|
||||
}
|
||||
|
||||
const results = {
|
||||
'light': {},
|
||||
'dark': {},
|
||||
}
|
||||
const results = {}
|
||||
|
||||
try {
|
||||
for (let mode of modes) {
|
||||
const pr = new Pageres({
|
||||
darkMode: mode === 'dark',
|
||||
delay: 3,
|
||||
|
|
@ -63,20 +55,23 @@ const modes = ['light', 'dark'];
|
|||
for (let buffer of await pr.run()) {
|
||||
const [, domain, username] = buffer.filename.match(/(.*)!card!@(.*)-1024x300\.png/);
|
||||
const locale = domainLocaleMap[domain];
|
||||
results[mode][locale + '/' + username] = buffer;
|
||||
}
|
||||
results[locale + '/' + username] = buffer;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
continue;
|
||||
return;
|
||||
}
|
||||
|
||||
for (let {id, locale, username} of profiles) {
|
||||
const cardId = ulid();
|
||||
const key = `card/${locale}/${username}-${cardId}.png`;
|
||||
for (let mode of modes) {
|
||||
let key = `card/${locale}/${username}-${cardId}.png`;
|
||||
if (mode === 'dark') {
|
||||
key = mode === 'dark' ? key.replace('.png', '-dark.png') : key;
|
||||
}
|
||||
|
||||
console.log(`Uploading @${username} (${locale}, ${mode}) – ${cardId}`);
|
||||
const buffer = results[mode][locale + '/' + username.replace(/\.+$/, '')];
|
||||
|
||||
const buffer = results[locale + '/' + username.replace(/\.+$/, '')];
|
||||
|
||||
if (buffer === undefined) {
|
||||
console.error('Cannot find the proper buffer!');
|
||||
|
|
@ -84,14 +79,27 @@ const modes = ['light', 'dark'];
|
|||
}
|
||||
|
||||
const s3putResponse = await s3.putObject({
|
||||
Key: mode === 'dark' ? key.replace('.png', '-dark.png') : key,
|
||||
Key: key,
|
||||
Body: buffer,
|
||||
ContentType: 'image/png',
|
||||
ACL: 'public-read',
|
||||
}).promise();
|
||||
|
||||
await db.get(`
|
||||
UPDATE profiles
|
||||
SET ${mode === 'dark' ? 'cardDark' : 'card'}='https://${awsConfig.params.Bucket}.s3.${awsConfig.region}.amazonaws.com/${key}'
|
||||
WHERE id='${id}'`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
await db.get(`UPDATE profiles SET card='https://${awsConfig.params.Bucket}.s3.${awsConfig.region}.amazonaws.com/${key}' WHERE id='${id}'`)
|
||||
(async () => {
|
||||
const db = await dbConnection();
|
||||
while (true) {
|
||||
for (let mode of modes) {
|
||||
await sleep(3000);
|
||||
console.log(`Starting mode: ${mode}`)
|
||||
await shoot(db, mode);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ const fetchProfiles = async (db, username, self, isAdmin) => {
|
|||
credentialsLevel: profile.credentialsLevel,
|
||||
credentialsName: profile.credentialsName,
|
||||
card: profile.card,
|
||||
cardDark: profile.cardDark,
|
||||
};
|
||||
}
|
||||
return p;
|
||||
|
|
@ -224,11 +225,19 @@ router.post('/profile/request-card', handleErrorAsync(async (req, res) => {
|
|||
return res.status(400).json({error: 'Missing user'});
|
||||
}
|
||||
|
||||
if (req.query.dark === '1') {
|
||||
await req.db.get(SQL`
|
||||
UPDATE profiles
|
||||
SET cardDark = ''
|
||||
WHERE userId=${req.user.id} AND locale=${global.config.locale} AND cardDark IS NULL
|
||||
`);
|
||||
} else {
|
||||
await req.db.get(SQL`
|
||||
UPDATE profiles
|
||||
SET card = ''
|
||||
WHERE userId=${req.user.id} AND locale=${global.config.locale} AND card IS NULL
|
||||
`);
|
||||
}
|
||||
|
||||
return res.json('OK');
|
||||
}));
|
||||
|
|
@ -239,12 +248,12 @@ router.get('/profile/has-card', handleErrorAsync(async (req, res) => {
|
|||
}
|
||||
|
||||
const card = await req.db.get(SQL`
|
||||
SELECT card
|
||||
SELECT card, cardDark
|
||||
FROM profiles
|
||||
WHERE userId=${req.user.id} AND locale=${global.config.locale}
|
||||
`);
|
||||
|
||||
return res.json(card ? card.card : null);
|
||||
return res.json(card);
|
||||
}));
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
Reference in New Issue