From 01dc6363d1bfa4222d8529c4894c0c1aa2d3728f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A1zaro=20Marques?= Date: Sat, 2 Sep 2023 22:15:26 -0300 Subject: [PATCH] feat: add localstorage --- .editorconfig | 21 ++++ .gitignore | 1 + .prettierrc | 19 ++++ adiciona.html | 28 +++--- code/app.ts | 91 ------------------ index.html | 21 +--- package-lock.json | 29 ++++++ package.json | 11 ++- prod/app.js | 67 ------------- src/app.ts | 239 ++++++++++++++++++++++++++++++++++++++++++++++ tsconfig.json | 22 ++--- 11 files changed, 346 insertions(+), 203 deletions(-) create mode 100644 .editorconfig create mode 100644 .prettierrc delete mode 100644 code/app.ts create mode 100644 package-lock.json delete mode 100644 prod/app.js create mode 100644 src/app.ts diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..f8db876 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,21 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = tab +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true +max_line_length = 140 +end_of_line = lf + +[*.{js,ts,html}] +indent_size = 4 + +[*.{js,ts}] +quote_type = single + +[*.md] +max_line_length = off +trim_trailing_whitespace = false \ No newline at end of file diff --git a/.gitignore b/.gitignore index 6704566..1652434 100644 --- a/.gitignore +++ b/.gitignore @@ -102,3 +102,4 @@ dist # TernJS port file .tern-port +dist \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..9fcd92f --- /dev/null +++ b/.prettierrc @@ -0,0 +1,19 @@ +{ + "arrowParens": "always", + "bracketSameLine": false, + "bracketSpacing": false, + "embeddedLanguageFormatting": "auto", + "htmlWhitespaceSensitivity": "css", + "insertPragma": false, + "jsxSingleQuote": false, + "printWidth": 140, + "proseWrap": "preserve", + "quoteProps": "as-needed", + "requirePragma": false, + "semi": true, + "singleAttributePerLine": false, + "singleQuote": false, + "tabWidth": 4, + "trailingComma": "es5", + "useTabs": true + } \ No newline at end of file diff --git a/adiciona.html b/adiciona.html index 017e001..412c689 100644 --- a/adiciona.html +++ b/adiciona.html @@ -1,23 +1,23 @@ - - - - Adicionar Jogador - + + + +Adicionar Jogador + -

Adicionar Jogador

-
- - - - - - +

Adicionar Jogador

+ + + + + + +
- + \ No newline at end of file diff --git a/code/app.ts b/code/app.ts deleted file mode 100644 index 9d2903b..0000000 --- a/code/app.ts +++ /dev/null @@ -1,91 +0,0 @@ -interface IPlayer { - name: string; - heigth: number; - weigth: number; - age: number; -} -// const player1: Player = { -// name: 'John', -// height: 180, -// weight: 75, -// age: 19 -// } - -// function obtemPlayerForm(form: any) { -// let player: IPlayer = { -// name: form.nome.value, -// heigth: form.altura.value, -// weigth: form.peso.value, -// age: form.idade.value, -// }; - -// return player; -// } - -function obtemPlayer(params:any){ - const player: IPlayer = { - name: params['nome'].replaceAll('+', ' '), - heigth: params['altura'], - weigth: params['peso'], - age: params['idade'], - } - - return player; -} - -function addTd(dado: string, classe: string) { - const td = document.createElement("td"); - - td.textContent = dado; - td.classList.add(classe); - - return td; -} - -function addTr(jogador: IPlayer) { - console.log(jogador) - const nomeTd = addTd(jogador.name, "info-nome"); - const alturaTd = addTd(jogador.heigth.toString(), "info-altura"); - const pesoTd = addTd(jogador.weigth.toString(), "info-peso"); - const idadeTd = addTd(jogador.age.toString(), "info-idade"); - - let linha = document.createElement("tr"); - linha.classList.add("jogador"); - linha.append(nomeTd, alturaTd, pesoTd, idadeTd); - - return linha; -} - -function addPLayerTabela(jogador: IPlayer) { - let jogadorTr = addTr(jogador); - let tabela = document.querySelector(".tabela-jogador"); - tabela?.appendChild(jogadorTr); - - return jogadorTr; -} - -// const button = document.querySelector("#button-add"); -// button?.addEventListener("submit", event => { -// event.preventDefault(); - -// let form:any = document.querySelector("#form-adiciona"); - -// let player = obtemPlayer(form); - -// addPLayerTabela(player); - -// form.reset(); - -// }); - -function getURLParameters() { - var params:Record ={}; - var parts = window.location.search.substring(1).split('&'); - for (var i = 0; i < parts.length; i++) { - var pair = parts[i].split('='); - var key = decodeURIComponent(pair[0]); - var value = decodeURIComponent(pair[1]); - params[key]=value; - } - return params; -} diff --git a/index.html b/index.html index 2a12b4e..48edae3 100644 --- a/index.html +++ b/index.html @@ -28,24 +28,13 @@

Tabela Jogadores

- + - + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..f7f7dbc --- /dev/null +++ b/package-lock.json @@ -0,0 +1,29 @@ +{ + "name": "player_ts", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "player_ts", + "version": "1.0.0", + "license": "ISC", + "devDependencies": { + "typescript": "^5.2.2" + } + }, + "node_modules/typescript": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + } + } +} diff --git a/package.json b/package.json index 8c311ba..09b8593 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,14 @@ { "name": "player_ts", - "version": "1.0.0", + "version": "1.1.0", "description": "", - "main": "index.js", + "type": "module", "scripts": { - "start":"tsc -w" + "start": "tsc -w" }, "author": "", - "license": "ISC" + "license": "ISC", + "devDependencies": { + "typescript": "^5.2.2" + } } diff --git a/prod/app.js b/prod/app.js deleted file mode 100644 index a74aa4d..0000000 --- a/prod/app.js +++ /dev/null @@ -1,67 +0,0 @@ -"use strict"; -// const player1: Player = { -// name: 'John', -// height: 180, -// weight: 75, -// age: 19 -// } -// function obtemPlayerForm(form: any) { -// let player: IPlayer = { -// name: form.nome.value, -// heigth: form.altura.value, -// weigth: form.peso.value, -// age: form.idade.value, -// }; -// return player; -// } -function obtemPlayer(params) { - const player = { - name: params['nome'].replaceAll('+', ' '), - heigth: params['altura'], - weigth: params['peso'], - age: params['idade'], - }; - return player; -} -function addTd(dado, classe) { - const td = document.createElement("td"); - td.textContent = dado; - td.classList.add(classe); - return td; -} -function addTr(jogador) { - console.log(jogador); - const nomeTd = addTd(jogador.name, "info-nome"); - const alturaTd = addTd(jogador.heigth.toString(), "info-altura"); - const pesoTd = addTd(jogador.weigth.toString(), "info-peso"); - const idadeTd = addTd(jogador.age.toString(), "info-idade"); - let linha = document.createElement("tr"); - linha.classList.add("jogador"); - linha.append(nomeTd, alturaTd, pesoTd, idadeTd); - return linha; -} -function addPLayerTabela(jogador) { - let jogadorTr = addTr(jogador); - let tabela = document.querySelector(".tabela-jogador"); - tabela === null || tabela === void 0 ? void 0 : tabela.appendChild(jogadorTr); - return jogadorTr; -} -// const button = document.querySelector("#button-add"); -// button?.addEventListener("submit", event => { -// event.preventDefault(); -// let form:any = document.querySelector("#form-adiciona"); -// let player = obtemPlayer(form); -// addPLayerTabela(player); -// form.reset(); -// }); -function getURLParameters() { - var params = {}; - var parts = window.location.search.substring(1).split('&'); - for (var i = 0; i < parts.length; i++) { - var pair = parts[i].split('='); - var key = decodeURIComponent(pair[0]); - var value = decodeURIComponent(pair[1]); - params[key] = value; - } - return params; -} diff --git a/src/app.ts b/src/app.ts new file mode 100644 index 0000000..337dec9 --- /dev/null +++ b/src/app.ts @@ -0,0 +1,239 @@ +interface IPlayer { + name: string; + heigth: number; + weigth: number; + age: number; +} + +// class Utils { +// public static getURLParameters() { +function getURLParameters() { + let params: Record = {}; + let parts = window.location.search.substring(1).split("&"); + + for (var i = 0; i < parts.length; i++) { + var pair = parts[i].split("="); + var key = decodeURIComponent(pair[0]); + var value = decodeURIComponent(pair[1]); + params[key] = value; + } + return params; +} + +function isRecordEmpty(obj: Record): boolean { + const keys = Object.keys(obj); + return keys.length === 0 || keys[0] === ""; +} + +// public static obtemPlayer(params: any): IPlayer { +function obtemPlayer(params: any): IPlayer { + const player: IPlayer = { + name: params["nome"].replaceAll("+", " "), + heigth: params["altura"], + weigth: params["peso"], + age: params["idade"], + }; + + return player; +} + +// class DBManager { +let players: IPlayer[]; + +// constructor() { +const dbplayers = localStorage.getItem("players"); +players = dbplayers ? JSON.parse(dbplayers) : []; +// } + +function save() { + localStorage.setItem("players", JSON.stringify(players)); +} + +function insert(player: IPlayer): IPlayer { + const p = get(player.name); + if (!p) { + players.push(player); + save(); + return player; + } + return p; +} + +function get(name: string): IPlayer | undefined { + return players.find((p) => p.name === name); +} + +function getAll(): IPlayer[] { + return players; +} + +function update(name: string, update: IPlayer): IPlayer | null { + const player = get(name); + + if (player) { + player.name = update.name; + player.age = update.age; + player.heigth = update.heigth; + player.weigth = update.weigth; + + save(); + return player; + } + return null; +} + +function remove(name: string): boolean { + const playerIndex = players.findIndex((p) => p.name === name); + if (playerIndex !== -1) { + players.splice(playerIndex, 1); + save(); + return true; + } + return false; +} +// } + +// export default DBManager; + +// class App { + +// private static addTd(dado: string, classe: string): HTMLTableCellElement { +function addTd(dado: string, classe: string): HTMLTableCellElement { + const td = document.createElement("td"); + + td.textContent = dado; + td.classList.add(classe); + + return td; +} + +// private static addTr(jogador: IPlayer): HTMLTableRowElement { +function addTr(jogador: IPlayer): HTMLTableRowElement { + console.log(jogador); + const nomeTd = addTd(jogador.name, "info-nome"); + const alturaTd = addTd(jogador.heigth.toString(), "info-altura"); + const pesoTd = addTd(jogador.weigth.toString(), "info-peso"); + const idadeTd = addTd(jogador.age.toString(), "info-idade"); + + let linha = document.createElement("tr"); + linha.classList.add("jogador"); + linha.append(nomeTd, alturaTd, pesoTd, idadeTd); + + return linha; +} + +// public static addPLayerTabela(jogador: IPlayer): HTMLTableRowElement { +function addPLayerTabela(jogador: IPlayer): HTMLTableRowElement { + let jogadorTr = addTr(jogador); + let tabela: HTMLTableElement = document.querySelector(".tabela-jogador")!; + + //players = JSON.parse(localStorage.getItem('jogador')!) || []; + + tabela.appendChild(jogadorTr); + + return jogadorTr; +} + +function CarregarDados() { + var params = getURLParameters(); //se tem parametros está adicionando + console.log(params); + const addPlayer = !isRecordEmpty(params); + + if (addPlayer) { + console.log("obtemplayer"); + const player = obtemPlayer(params); + console.log("insert", player); + + insert(player); + } + + const players = getAll(); + console.log("getAll", players); + players.forEach((player) => { + console.log("add tr"); + addPLayerTabela(player); + }); +} +CarregarDados(); + +// } +// export default App; + +// let players: Array = []; + +// // function obtemPlayerForm(form: any) { +// // let player: IPlayer = { +// // name: form.nome.value, +// // heigth: form.altura.value, +// // weigth: form.peso.value, +// // age: form.idade.value, +// // }; + +// // return player; +// // } + +// function obtemPlayer(params: any): IPlayer { +// const player: IPlayer = { +// name: params["nome"].replaceAll("+", " "), +// heigth: params["altura"], +// weigth: params["peso"], +// age: params["idade"], +// }; + +// return player; +// } + +// function addTd(dado: string, classe: string): HTMLTableCellElement { +// const td = document.createElement("td"); + +// td.textContent = dado; +// td.classList.add(classe); + +// return td; +// } + +// function addTr(jogador: IPlayer): HTMLTableRowElement { +// console.log(jogador); +// const nomeTd = addTd(jogador.name, "info-nome"); +// const alturaTd = addTd(jogador.heigth.toString(), "info-altura"); +// const pesoTd = addTd(jogador.weigth.toString(), "info-peso"); +// const idadeTd = addTd(jogador.age.toString(), "info-idade"); + +// let linha = document.createElement("tr"); +// linha.classList.add("jogador"); +// linha.append(nomeTd, alturaTd, pesoTd, idadeTd); + +// return linha; +// } + +// function addLocalStorage(jogador: IPlayer): void { +// players.push(jogador); +// localStorage.setItem("jogador", JSON.stringify(players)); + +// addPLayerTabela(jogador); +// } + +// function addPLayerTabela(jogador: IPlayer): HTMLTableRowElement { +// let jogadorTr = addTr(jogador); +// let tabela: HTMLTableElement = document.querySelector(".tabela-jogador")!; + +// //players = JSON.parse(localStorage.getItem('jogador')!) || []; + +// tabela.appendChild(jogadorTr); + +// return jogadorTr; +// } + +// // const button = document.querySelector("#button-add"); +// // button?.addEventListener("submit", event => { +// // event.preventDefault(); + +// // let form:any = document.querySelector("#form-adiciona"); + +// // let player = obtemPlayer(form); + +// // addPLayerTabela(player); + +// // form.reset(); + +// // }); diff --git a/tsconfig.json b/tsconfig.json index 666ab91..ba493f4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,7 @@ // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ /* Language and Environment */ - "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + "target": "es2020", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ // "jsx": "preserve", /* Specify what JSX code is generated. */ // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ @@ -25,9 +25,9 @@ // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ /* Modules */ - "module": "commonjs", /* Specify what module code is generated. */ - "rootDir": "./code", /* Specify the root folder within your source files. */ - // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + "module": "es6", /* Specify what module code is generated. */ + "rootDir": "./src", /* Specify the root folder within your source files. */ + "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ @@ -49,8 +49,8 @@ // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ - "outDir": "./prod", /* Specify an output folder for all emitted files. */ - // "removeComments": true, /* Disable emitting comments. */ + "outDir": "./dist", /* Specify an output folder for all emitted files. */ + "removeComments": true, /* Disable emitting comments. */ // "noEmit": true, /* Disable emitting files from a compilation. */ // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ @@ -63,7 +63,7 @@ // "newLine": "crlf", /* Set the newline character for emitting files. */ // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ - "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ @@ -77,7 +77,7 @@ /* Type Checking */ "strict": true, /* Enable all strict type-checking options. */ - "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ @@ -85,10 +85,10 @@ // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ - "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ - "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ - "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */