jlengrand/simple-food-diary
1
0
Fork 0
mirror of https://github.com/jlengrand/simple-food-diary.git synced 2026-03-10 08:41:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes eslint

Browse Source
This commit is contained in:
Julien Lengrand-Lambert
2021-07-14 17:32:32 +02:00
parent 95c52704ce
commit ec24bc5ca3
7 changed files with 3147 additions and 791 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.tool-versions Normal file
View File

@@ -0,0 +1 @@
nodejs 16.4.2

3361
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -38,6 +38,7 @@
"author": "simple-food-diary",
"license": "MIT",
"dependencies": {
"@azure/static-web-apps-cli": "^0.6.1",
"@fortawesome/fontawesome-free": "^5.15.3",
"fa-icons": "^0.2.0",
"lit": "*"
@@ -52,6 +53,7 @@
"@typescript-eslint"
],
"rules": {
"wc/guard-super-call": "off",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"error"

137
src/food-log-form.ts
View File

@@ -1,74 +1,90 @@
import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import 'fa-icons';
@customElement('food-log-form')
class FoodLogForm extends LitElement{
// eslint-disable-next-line @typescript-eslint/no-unused-vars
class FoodLogForm extends LitElement {
static styles = css`
:host{
}
.portion-size{
display : flex;
.portion-size {
display: flex;
flex-direction: row;
}
.meal-type{
display : flex;
.meal-type {
display: flex;
flex-direction: row;
}
label{
padding:20px;
label {
padding: 20px;
margin: 20px;
border-radius: 5000px;
border-color: #8D99AE;
border-color: #8d99ae;
border-width: 10px;
border: solid;
}
.hidden{
display:none
.hidden {
display: none;
}
:checked + span {
background-color: #8D99AE;
background-color: #8d99ae;
}
`;
constructor(){
super();
}
submitMeal(){
const portionSize = this.shadowRoot!.querySelector<HTMLInputElement>('input[type=radio]:checked')?.value;
const mealtypes = Array.from<HTMLInputElement>(this.shadowRoot!.querySelectorAll('input[type=checkbox]:checked')).map(e => e.value);
submitMeal() {
const portionSize = this.shadowRoot!.querySelector<HTMLInputElement>(
'input[type=radio]:checked'
)?.value;
const mealtypes = Array.from<HTMLInputElement>(
this.shadowRoot!.querySelectorAll('input[type=checkbox]:checked')
).map(e => e.value);
const meal = {
portionSize : portionSize,
mealtypes : mealtypes
}
portionSize,
mealtypes,
};
// eslint-disable-next-line no-console
console.log(meal);
}
render(){
render() {
return html`
<h2>Portion size</h2>
<div class="portion-sizes">
<label for="snack">
<input value="S" id="snack" type="radio" class="hidden" name="portion">
<input
value="S"
id="snack"
type="radio"
class="hidden"
name="portion"
/>
<span><fa-icon class="fas fa-utensils"></fa-icon></span>
</label>
<label for="meal">
<input checked value="M" id="meal" type="radio" class="hidden" name="portion">
<input
checked
value="M"
id="meal"
type="radio"
class="hidden"
name="portion"
/>
<span><fa-icon class="fas fa-utensils"></fa-icon></span>
</label>
<label for="lavish">
<input value="L" id="lavish" type="radio" class="hidden" name="portion">
<input
value="L"
id="lavish"
type="radio"
class="hidden"
name="portion"
/>
<span><fa-icon class="fas fa-utensils"></fa-icon></span>
</label>
</div>
@@ -77,37 +93,78 @@ class FoodLogForm extends LitElement{
<div class="meal-type">
<label for="alcohol">
<input value="alcohol" id="alcohol" type="checkbox" class="hidden" name="mealtype">
<input
value="alcohol"
id="alcohol"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-beer"></fa-icon></span>
</label>
<label for="meat">
<input value="meat" id="meat" type="checkbox" class="hidden" name="mealtype">
<input
value="meat"
id="meat"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-drumstick-bite"></fa-icon></span>
</label>
<label for="caffeine">
<input value="caffeine" id="caffeine" type="checkbox" class="hidden" name="mealtype">
<input
value="caffeine"
id="caffeine"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-coffee"></fa-icon></span>
</label>
<label for="keto">
<input value="keto" id="keto" type="checkbox" class="hidden" name="mealtype">
<input
value="keto"
id="keto"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-bacon"></fa-icon></span>
</label>
<label for="water">
<input value="water" id="water" type="checkbox" class="hidden" name="mealtype">
<input
value="water"
id="water"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-tint"></fa-icon></span>
</label>
<label for="processed">
<input value="processed" id="processed" type="checkbox" class="hidden" name="mealtype">
<input
value="processed"
id="processed"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-blender-phone"></fa-icon></span>
</label>
<label for="delivered">
<input value="delivered" id="delivered" type="checkbox" class="hidden" name="mealtype">
<input
value="delivered"
id="delivered"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-truck"></fa-icon></span>
</label>
</div>
<button @click="${this.submitMeal}">Submit</button>
`;
}
}

97
src/meal-types.ts
View File

@@ -1,73 +1,112 @@
import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import 'fa-icons';
@customElement('meal-types')
class MealTypes extends LitElement{
// eslint-disable-next-line @typescript-eslint/no-unused-vars
class MealTypes extends LitElement {
@property({ type: Boolean }) selected = false;
@property({type: Boolean}) selected = false;
@property({type: String}) name = "";
@property({type:String}) icon = "";
@property({type:String}) groupname = "";
@property({ type: String }) name = '';
@property({ type: String }) icon = '';
@property({ type: String }) groupname = '';
static styles = css`
:host{
display:flex;
:host {
display: flex;
flex-direction: row;
}
label{
padding:20px;
label {
padding: 20px;
margin: 20px;
border-radius: 5000px;
border-color: #8D99AE;
border-color: #8d99ae;
border-width: 10px;
border: solid;
}
.hidden{
display:none
.hidden {
display: none;
}
:checked + span {
background-color: #8D99AE;
background-color: #8d99ae;
}
`;
constructor(){
super();
}
render(){
render() {
return html`
<label for="alcohol">
<input value="alcohol" id="alcohol" type="checkbox" class="hidden" name="mealtype">
<input
value="alcohol"
id="alcohol"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-beer"></fa-icon></span>
</label>
<label for="meat">
<input value="meat" id="meat" type="checkbox" class="hidden" name="mealtype">
<input
value="meat"
id="meat"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-drumstick-bite"></fa-icon></span>
</label>
<label for="caffeine">
<input value="caffeine" id="caffeine" type="checkbox" class="hidden" name="mealtype">
<input
value="caffeine"
id="caffeine"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-coffee"></fa-icon></span>
</label>
<label for="keto">
<input value="keto" id="keto" type="checkbox" class="hidden" name="mealtype">
<input
value="keto"
id="keto"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-bacon"></fa-icon></span>
</label>
<label for="water">
<input value="water" id="water" type="checkbox" class="hidden" name="mealtype">
<input
value="water"
id="water"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-tint"></fa-icon></span>
</label>
<label for="processed">
<input value="processed" id="processed" type="checkbox" class="hidden" name="mealtype">
<input
value="processed"
id="processed"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-blender-phone"></fa-icon></span>
</label>
<label for="delivered">
<input value="delivered" id="delivered" type="checkbox" class="hidden" name="mealtype">
<input
value="delivered"
id="delivered"
type="checkbox"
class="hidden"
name="mealtype"
/>
<span><fa-icon class="fas fa-truck"></fa-icon></span>
</label>
`;

69
src/portion-sizes.ts
View File

@@ -1,59 +1,76 @@
import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import 'fa-icons';
@customElement('portion-sizes')
class DiaryItem extends LitElement{
// eslint-disable-next-line @typescript-eslint/no-unused-vars
class DiaryItem extends LitElement {
@property({ type: Boolean }) selected = false;
@property({type: Boolean}) selected = false;
@property({type: String}) name = "";
@property({type:String}) icon = "";
@property({type:String}) groupname = "";
@property({ type: String }) name = '';
@property({ type: String }) icon = '';
@property({ type: String }) groupname = '';
static styles = css`
:host{
:host {
}
label{
padding:20px;
label {
padding: 20px;
margin: 20px;
border-radius: 5000px;
border-color: #8D99AE;
border-color: #8d99ae;
border-width: 10px;
border: solid;
}
:checked + span {
background-color: #8D99AE;
background-color: #8d99ae;
}
.hidden{
display:none
.hidden {
display: none;
}
span{
width:100%;
height:100%;
span {
width: 100%;
height: 100%;
}
`;
constructor(){
super();
}
render(){
render() {
return html`
<label for="snack">
<input value="S" id="snack" type="radio" class="hidden" name="portion">
<input
value="S"
id="snack"
type="radio"
class="hidden"
name="portion"
/>
<span><fa-icon class="fas fa-utensils"></fa-icon></span>
</label>
<label for="meal">
<input checked value="M" id="meal" type="radio" class="hidden" name="portion">
<input
checked
value="M"
id="meal"
type="radio"
class="hidden"
name="portion"
/>
<span><fa-icon class="fas fa-utensils"></fa-icon></span>
</label>
<label for="lavish">
<input value="L" id="lavish" type="radio" class="hidden" name="portion">
<input
value="L"
id="lavish"
type="radio"
class="hidden"
name="portion"
/>
<span><fa-icon class="fas fa-utensils"></fa-icon></span>
</label>
`;

29
src/simple-food-diary.ts
View File

@@ -1,9 +1,10 @@
/* eslint-disable wc/guard-super-call */
import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import {until} from 'lit/directives/until.js';
import "./food-log-form";
import "./login-screen";
import './food-log-form.js';
import './login-screen.js';
@customElement('simple-food-diary')
export class SimpleFoodDiary extends LitElement {
@@ -12,16 +13,16 @@ export class SimpleFoodDiary extends LitElement {
@state()
me?: Object;
connectedCallback(){
connectedCallback() {
super.connectedCallback();
if(!this.me){
if (!this.me) {
this.fetchMe();
}
}
async fetchMe(){
const response = await fetch("/.auth/me");
async fetchMe() {
const response = await fetch('/.auth/me');
const jsonResponse = await response.json();
this.me = jsonResponse.clientPrincipal;
}
@@ -31,12 +32,12 @@ export class SimpleFoodDiary extends LitElement {
<header>
<pre>${JSON.stringify(this.me, null, 2)}</pre>
${this.me ? html`<a href="/.auth/logout">Logout</a>` : html`<a href="/.auth/login/twitter">Login</a>`}
${this.me
? html`<a href="/.auth/logout">Logout</a>`
: html`<a href="/.auth/login/twitter">Login</a>`}
</header>
<main>
<food-log-form></food-log-form>
</main>
<footer></footer>
@@ -62,18 +63,18 @@ export class SimpleFoodDiary extends LitElement {
flex-grow: 1;
}
header{
header {
background-color: red;
width: 100%
width: 100%;
}
.portion-sizes{
.portion-sizes {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.meal-types{
.meal-types {
display: flex;
flex-direction: row;
justify-content: space-around;