koro

an event time scheduler
git clone https://tilde.team/~marisa/repo/koro.git
Log | Files | Refs | README | LICENSE

commit 74409279951df8bc73d9fa05e369cdbd903272eb
parent 1cacedd3aa2c1bcf57cfafe6f0ca185a2177fff9
Author: mokou <mokou@posteo.de>
Date:   Thu, 21 May 2020 16:26:27 +0200

chore: Lint

Diffstat:
MLICENSE.md | 6+++---
Mpackage.json | 2+-
Mpostcss.config.js | 2+-
Msrc/components/ResponseGrid.svelte | 21+++++++++------------
Msrc/main.js | 4++--
Msrc/pages/Event.svelte | 48+++++++++++++++++++++++++++++-------------------
Msrc/pages/Index.svelte | 16+++++++++-------
Msrc/stores.js | 4++--
Mtailwind.config.js | 4++--
Mwebpack.config.js | 27++++++++++++---------------
10 files changed, 70 insertions(+), 64 deletions(-)

diff --git a/LICENSE.md b/LICENSE.md @@ -10,7 +10,7 @@ This license allows you to use and share this software for noncommercial purpose ## Agreement -In order to receive this license, you have to agree to its rules. Those rules are both obligations under that agreement and conditions to your license. Don't do anything with this software that triggers a rule you can't or won't follow. +In order to receive this license, you have to agree to its rules. Those rules are both obligations under that agreement and conditions to your license. Don't do anything with this software that triggers a rule you can't or won't follow. ## Notices @@ -18,7 +18,7 @@ Make sure everyone who gets a copy of any part of this software from you, with o ## Commercial Trial -Limit your use of this software for commercial purposes to a thirty-day trial period. If you use this software for work, your company gets one trial period for all personnel, not one trial per person. +Limit your use of this software for commercial purposes to a thirty-day trial period. If you use this software for work, your company gets one trial period for all personnel, not one trial per person. ## Contributions Back @@ -54,4 +54,4 @@ You're excused for unknowingly breaking [Notices](#notices) if you take all prac ## No Liability -***As far as the law allows, this software comes as is, without any warranty or condition, and the contributor won't be liable to anyone for any damages related to this software or this license, under any kind of legal claim.*** +**_As far as the law allows, this software comes as is, without any warranty or condition, and the contributor won't be liable to anyone for any damages related to this software or this license, under any kind of legal claim._** diff --git a/package.json b/package.json @@ -5,7 +5,7 @@ "scripts": { "build": "webpack", "start": "webpack-dev-server", - "lint": "prettier --write --no-semi --single-quote ." + "lint": "prettier --write --no-semi --single-quote --trailing-comma none ." }, "dependencies": { "accessible-autocomplete": "^2.0.2", diff --git a/postcss.config.js b/postcss.config.js @@ -1,3 +1,3 @@ module.exports = { - plugins: [require('tailwindcss'), require('cssnano')], + plugins: [require('tailwindcss'), require('cssnano')] } diff --git a/src/components/ResponseGrid.svelte b/src/components/ResponseGrid.svelte @@ -7,23 +7,22 @@ let view = [0, 9] - function reduceStatus (status, time) { + function reduceStatus(status, time) { return Object.values(responses).reduce((acc, r) => { - if (r[day.utc(time).format()] === status) - return acc + 1 + if (r[day.utc(time).format()] === status) return acc + 1 return acc }, 0) } </script> <div class="max-w-3xl grid grid-cols-12"> - <div class="col-span-3"></div> + <div class="col-span-3" /> {#each times.slice(view[0], view[1]) as t} <div class="text-center">{day.utc(t).local().format('DD/MM hh:mm')}</div> {/each} {#if times.slice(view[0], view[1]).length < 9} {#each new Array(9 - times.slice(view[0], view[1]).length) as a} - <div></div> + <div /> {/each} {/if} {#each Object.keys(responses) as name} @@ -32,23 +31,21 @@ <div class:bg-green-200={responses[name][day.utc(t).format()] === 'yes'} class:bg-yellow-200={responses[name][day.utc(t).format()] === 'maybe'} - class:bg-red-200={responses[name][day.utc(t).format()] === 'no'} - ></div> + class:bg-red-200={responses[name][day.utc(t).format()] === 'no'} /> {/each} {#if times.slice(view[0], view[1]).length < 9} {#each new Array(9 - times.slice(view[0], view[1]).length) as a} - <div></div> + <div /> {/each} {/if} {/each} - <div class="col-span-3"></div> + <div class="col-span-3" /> {#each times.slice(view[0], view[1]) as t} <div class="text-center" - class:bg-yellow-300={reduceStatus('yes', t) >= (Object.values(responses).length / 2)} + class:bg-yellow-300={reduceStatus('yes', t) >= Object.values(responses).length / 2} class:bg-green-500={reduceStatus('yes', t) === Object.values(responses).length} - class:text-white={reduceStatus('yes', t) === Object.values(responses).length} - > + class:text-white={reduceStatus('yes', t) === Object.values(responses).length}> {reduceStatus('yes', t)}/{Object.values(responses).length} </div> {/each} diff --git a/src/main.js b/src/main.js @@ -4,8 +4,8 @@ import './main.css' const app = new App({ target: document.body, props: { - name: 'world', - }, + name: 'world' + } }) export default app diff --git a/src/pages/Event.svelte b/src/pages/Event.svelte @@ -19,7 +19,7 @@ let name = '' let responses = {} - async function onSubmit () { + async function onSubmit() { if (!name) { errorFlash = 'Please enter a name!' return @@ -52,7 +52,7 @@ } } - function toggleYes (date) { + function toggleYes(date) { const d = day.utc(date).format() if (responses[d] === 'yes') { responses[d] = '' @@ -61,7 +61,7 @@ responses[d] = 'yes' } - function toggleMaybe (date) { + function toggleMaybe(date) { const d = day.utc(date).format() if (responses[d] === 'maybe') { responses[d] = '' @@ -70,7 +70,7 @@ responses[d] = 'maybe' } - function toggleNo (date) { + function toggleNo(date) { const d = day.utc(date).format() if (responses[d] === 'no') { responses[d] = '' @@ -79,13 +79,14 @@ responses[d] = 'no' } - async function getEvent () { + async function getEvent() { const db = new PouchDB('koro') try { event = await db.get(params.id) loading = false } catch (e) { - error = 'Couldn\'t fetch the event you\'re looking for. Do you have the right link? Or maybe you\'re offline?' + error = + "Couldn't fetch the event you're looking for. Do you have the right link? Or maybe you're offline?" loading = false } } @@ -101,13 +102,15 @@ {error} {:else} <h1 class="text-5xl font-serif font-extrabold">{event.name}</h1> - <div class="max-w-xl">{#if errorFlash} - <div - class="w-full bg-red-100 px-3 py-2 border rounded border-red-400 - text-red-600 my-5"> - {errorFlash} - </div> - {/if}</div> + <div class="max-w-xl"> + {#if errorFlash} + <div + class="w-full bg-red-100 px-3 py-2 border rounded border-red-400 + text-red-600 my-5"> + {errorFlash} + </div> + {/if} + </div> {#if !event.responses || event.responses.length === 0} <p class="text-xl mb-5 max-w-xl"> Someone has shared this event and wants you to indicate your availability @@ -126,25 +129,32 @@ <div class="text-center">Yes</div> <div class="text-center">Maybe</div> <div class="text-center">No</div> - <div></div> + <div /> {#each event.times.sort((a, b) => day.utc(a).isAfter(day.utc(b))) as t} <div class:bg-green-400={responses[day.utc(t).format()] === 'yes'} class="border border-gray-200" - on:click={() => toggleYes(t)}></div> + on:click={() => toggleYes(t)} /> <div class:bg-yellow-400={responses[day.utc(t).format()] === 'maybe'} class="border border-gray-200" - on:click={() => toggleMaybe(t)}></div> + on:click={() => toggleMaybe(t)} /> <div class:bg-red-400={responses[day.utc(t).format()] === 'no'} class="border border-gray-200" - on:click={() => toggleNo(t)}></div> - <div class="ml-3"><span class="font-bold">{day.utc(t).local().format('DD/MM/YYYY hh:mm')}</span> ({day.utc(t).local().fromNow()})</div> + on:click={() => toggleNo(t)} /> + <div class="ml-3"> + <span class="font-bold"> + {day.utc(t).local().format('DD/MM/YYYY hh:mm')} + </span> + ({day.utc(t).local().fromNow()}) + </div> {/each} </div> - <button class="btn mt-5" on:click|preventDefault={onSubmit}>Submit</button> + <button class="btn mt-5" on:click|preventDefault={onSubmit}> + Submit + </button> </form> {:else} <p class="max-w-xl mt-5 text-xl">You already responded to this event!</p> diff --git a/src/pages/Index.svelte b/src/pages/Index.svelte @@ -21,13 +21,13 @@ '2 hours', '3 hours', '4 hours', - '5 hours', + '5 hours' ] let event = { _id: nanoid(), name: '', duration: '', - times: [], + times: [] } let eventLink = '' @@ -61,7 +61,7 @@ const db = new PouchDB('koro') try { const res = await db.put({ - times: event.times.map(e => day(e).utc().format()), + times: event.times.map((e) => day(e).utc().format()), ...event }) success = true @@ -85,7 +85,7 @@ confirmOnBlur: false, onConfirm: (opt) => { event.duration = opt - }, + } }) }) </script> @@ -94,11 +94,13 @@ {#if success} <p class="text-2xl font-medium max-w-xl leading-normal"> Your event has successfully been created! You can share the link below with - anyone you want to invite, and they can set their available times from the ones - you picked out. Don't forget to fill it out yourself! + anyone you want to invite, and they can set their available times from the + ones you picked out. Don't forget to fill it out yourself! </p> - <div class="text-2xl font-mono bg-black text-white max-w-xl w-full px-3 py-2 mt-5 text-center"> + <div + class="text-2xl font-mono bg-black text-white max-w-xl w-full px-3 py-2 mt-5 + text-center"> {eventLink} </div> {:else} diff --git a/src/stores.js b/src/stores.js @@ -4,13 +4,13 @@ const localStorage = window.localStorage export const hasResponded = localStorageStore({}) -function localStorageStore (key) { +function localStorageStore(key) { const item = localStorage.getItem(key) const { subscribe, set } = writable(JSON.parse(item) || null) return { subscribe, - set: value => { + set: (value) => { localStorage.setItem(key, JSON.stringify(value)) set(value) }, diff --git a/tailwind.config.js b/tailwind.config.js @@ -1,6 +1,6 @@ module.exports = { purge: ['./src/**/*.svelte', './src/**/*.js'], variants: { - cursor: ['hover'], - }, + cursor: ['hover'] + } } diff --git a/webpack.config.js b/webpack.config.js @@ -23,11 +23,11 @@ for (const name in env) { module.exports = { name: 'bundle', entry: { - main: './src/main.js', + main: './src/main.js' }, output: { filename: '[name].js', - path: path.resolve(process.cwd(), 'public/build'), + path: path.resolve(process.cwd(), 'public/build') }, mode: prod ? 'production' : 'development', devServer: { @@ -35,25 +35,25 @@ module.exports = { contentBase: path.join(process.cwd(), 'public'), compress: true, port: 3000, - historyApiFallback: true, + historyApiFallback: true }, devtool: !prod && 'source-map', optimization: prod && { - minimizer: [new TerserWebpackPlugin({})], + minimizer: [new TerserWebpackPlugin({})] }, resolve: { alias: { - svelte: path.resolve('node_modules', 'svelte'), + svelte: path.resolve('node_modules', 'svelte') }, extensions: ['.mjs', '.js', '.svelte'], - mainFields: ['svelte', 'browser', 'module', 'main'], + mainFields: ['svelte', 'browser', 'module', 'main'] }, module: { rules: [ { test: /\.(html|svelte)$/, exclude: /node_modules/, - use: 'svelte-loader', + use: 'svelte-loader' }, { test: /\.css$/, @@ -61,13 +61,10 @@ module.exports = { use: [ { loader: CssExtractPlugin.loader }, { loader: 'css-loader', options: { url: false, importLoaders: 1 } }, - { loader: 'postcss-loader' }, - ], - }, - ], + { loader: 'postcss-loader' } + ] + } + ] }, - plugins: [ - new webpack.DefinePlugin(replacedStrings), - new CssExtractPlugin() - ], + plugins: [new webpack.DefinePlugin(replacedStrings), new CssExtractPlugin()] }