[card] make people chose light or dark mode

This commit is contained in:
Avris 2021-10-13 21:56:39 +02:00
parent 4de6994510
commit cb2d328d03
4 changed files with 116 additions and 88 deletions

View File

@ -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

View File

@ -36,27 +36,31 @@
<Icon v="id-card"/> <Icon v="id-card"/>
<T>profile.card.link</T>: <T>profile.card.link</T>:
</small> </small>
<small v-if="profile.card === null"> <small v-if="profile.card === null && profile.cardDark === null">
<button class="btn btn-outline-success btn-sm" @click="generateCard"> (<T>profile.card.generate</T>)
<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> </button>
</small> </small>
<small v-else-if="profile.card === ''"> <small v-else-if="profile.card === '' || profile.cardDark === ''">
<Spinner/> <Spinner/>
<T>profile.card.generating</T> <T>profile.card.generating</T>
</small> </small>
<template v-if="profile.card"> <a v-if="profile.card" :href="profile.card" target="_blank" rel="noopener"
<a :href="profile.card" target="_blank" rel="noopener"
class="btn btn-outline-success btn-sm mx-1"> class="btn btn-outline-success btn-sm mx-1">
<Icon v="sun"/> <Icon v="sun"/>
<T>mode.light</T> <T>mode.light</T>
</a> </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"> class="btn btn-outline-success btn-sm mx-1">
<Icon v="moon"/> <Icon v="moon"/>
<T>mode.dark</T> <T>mode.dark</T>
</a> </a>
</template>
</div> </div>
</div> </div>
</Profile> </Profile>
@ -152,13 +156,13 @@
}, },
}, },
methods: { methods: {
async generateCard() { async generateCard(dark) {
await this.$axios.$post(`/profile/request-card`); await this.$axios.$post(`/profile/request-card?dark=${dark ? '1' : '0'}`);
this.profile.card = ''; this.profile[dark ? 'cardDark' : 'card'] = '';
this.startCheckingForCard(); this.startCheckingForCard();
}, },
startCheckingForCard() { startCheckingForCard() {
if (this.cardCheckHandle || !this.profile || this.profile.card) { if (this.cardCheckHandle || !this.profile || this.profile.card || this.profile.cardDark) {
return; return;
} }
this.cardCheckHandle = setInterval(this.checkForCard, 3000); this.cardCheckHandle = setInterval(this.checkForCard, 3000);
@ -166,9 +170,9 @@
async checkForCard() { async checkForCard() {
try { try {
const card = await this.$axios.$get(`/profile/has-card`); const card = await this.$axios.$get(`/profile/has-card`);
console.log(card); if (card.card || card.cardDark) {
if (card) { this.profile.card = card.card;
this.profile.card = card; this.profile.cardDark = card.cardDark;
clearInterval(this.cardCheckHandle); clearInterval(this.cardCheckHandle);
} }
} catch { } catch {

View File

@ -23,32 +23,24 @@ const sleep = ms => new Promise(res => setTimeout(res, ms));
const modes = ['light', 'dark']; const modes = ['light', 'dark'];
(async () => { const shoot = async (db, mode) => {
const db = await dbConnection();
while (true) {
await sleep(3000);
const profiles = (await db.all(` const profiles = (await db.all(`
SELECT profiles.id, profiles.locale, users.username SELECT profiles.id, profiles.locale, users.username
FROM profiles FROM profiles
LEFT JOIN users on profiles.userId = users.id LEFT JOIN users on profiles.userId = users.id
WHERE profiles.card = '' WHERE profiles.${mode === 'dark' ? 'cardDark' : 'card'} = ''
ORDER BY RANDOM() ORDER BY RANDOM()
LIMIT 6 LIMIT 6
`)).filter(({locale}) => !isHighLoadTime(locale)); `)).filter(({locale}) => !isHighLoadTime(locale));
if (profiles.length === 0) { if (profiles.length === 0) {
console.log('No profiles in the queue'); console.log('No profiles in the queue');
continue; return;
} }
const results = { const results = {}
'light': {},
'dark': {},
}
try { try {
for (let mode of modes) {
const pr = new Pageres({ const pr = new Pageres({
darkMode: mode === 'dark', darkMode: mode === 'dark',
delay: 3, delay: 3,
@ -63,20 +55,23 @@ const modes = ['light', 'dark'];
for (let buffer of await pr.run()) { for (let buffer of await pr.run()) {
const [, domain, username] = buffer.filename.match(/(.*)!card!@(.*)-1024x300\.png/); const [, domain, username] = buffer.filename.match(/(.*)!card!@(.*)-1024x300\.png/);
const locale = domainLocaleMap[domain]; const locale = domainLocaleMap[domain];
results[mode][locale + '/' + username] = buffer; results[locale + '/' + username] = buffer;
}
} }
} catch (e) { } catch (e) {
console.error(e); console.error(e);
continue; return;
} }
for (let {id, locale, username} of profiles) { for (let {id, locale, username} of profiles) {
const cardId = ulid(); const cardId = ulid();
const key = `card/${locale}/${username}-${cardId}.png`; let key = `card/${locale}/${username}-${cardId}.png`;
for (let mode of modes) { if (mode === 'dark') {
key = mode === 'dark' ? key.replace('.png', '-dark.png') : key;
}
console.log(`Uploading @${username} (${locale}, ${mode}) ${cardId}`); console.log(`Uploading @${username} (${locale}, ${mode}) ${cardId}`);
const buffer = results[mode][locale + '/' + username.replace(/\.+$/, '')];
const buffer = results[locale + '/' + username.replace(/\.+$/, '')];
if (buffer === undefined) { if (buffer === undefined) {
console.error('Cannot find the proper buffer!'); console.error('Cannot find the proper buffer!');
@ -84,14 +79,27 @@ const modes = ['light', 'dark'];
} }
const s3putResponse = await s3.putObject({ const s3putResponse = await s3.putObject({
Key: mode === 'dark' ? key.replace('.png', '-dark.png') : key, Key: key,
Body: buffer, Body: buffer,
ContentType: 'image/png', ContentType: 'image/png',
ACL: 'public-read', ACL: 'public-read',
}).promise(); }).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);
} }
} }
})(); })();

View File

@ -51,6 +51,7 @@ const fetchProfiles = async (db, username, self, isAdmin) => {
credentialsLevel: profile.credentialsLevel, credentialsLevel: profile.credentialsLevel,
credentialsName: profile.credentialsName, credentialsName: profile.credentialsName,
card: profile.card, card: profile.card,
cardDark: profile.cardDark,
}; };
} }
return p; return p;
@ -224,11 +225,19 @@ router.post('/profile/request-card', handleErrorAsync(async (req, res) => {
return res.status(400).json({error: 'Missing user'}); 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` await req.db.get(SQL`
UPDATE profiles UPDATE profiles
SET card = '' SET card = ''
WHERE userId=${req.user.id} AND locale=${global.config.locale} AND card IS NULL WHERE userId=${req.user.id} AND locale=${global.config.locale} AND card IS NULL
`); `);
}
return res.json('OK'); return res.json('OK');
})); }));
@ -239,12 +248,12 @@ router.get('/profile/has-card', handleErrorAsync(async (req, res) => {
} }
const card = await req.db.get(SQL` const card = await req.db.get(SQL`
SELECT card SELECT card, cardDark
FROM profiles FROM profiles
WHERE userId=${req.user.id} AND locale=${global.config.locale} WHERE userId=${req.user.id} AND locale=${global.config.locale}
`); `);
return res.json(card ? card.card : null); return res.json(card);
})); }));
export default router; export default router;