Skip to content

Tailwind #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
owner6 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Tailwind #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
08d9efa
imstall tailwind
owner6 Jul 28, 2023
fc05bd2
settings tailwind; building app
owner6 Jul 28, 2023
fc7f99e
event tickerAlreadyExists
owner6 Dec 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
379 changes: 296 additions & 83 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.4",
"autoprefixer": "^10",
"core-js": "^3.8.3",
"postcss": "^8",
"tailwindcss": "^3",
"vue": "^3.2.13"
},
"devDependencies": {
Expand All @@ -21,6 +25,7 @@
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1"
"prettier": "^2.4.1",
"vue-cli-plugin-tailwind": "~3.0.0"
}
}
6 changes: 6 additions & 0 deletions postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
279 changes: 147 additions & 132 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div class="container mx-auto flex flex-col items-center bg-gray-100 p-4">
<!--<div
<!--
<div
class="fixed w-100 h-100 opacity-80 bg-purple-800 inset-0 z-50 flex items-center justify-center"
>
<svg
Expand All @@ -23,27 +24,28 @@
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>-->
</div>
-->
<div class="container">
<section>
<div class="flex">
<div class="max-w-xs">
<label for="wallet" class="block text-sm font-medium text-gray-700"
>Тикер</label
>Тикер {{ ticker }}</label
>
<div class="mt-1 relative rounded-md shadow-md">
<input
v-model="ticker"
v-on:keydown.enter="add"
v-on:input="resetTickerExistsState"
type="text"
name="wallet"
id="wallet"
class="block w-full pr-10 border-gray-300 text-gray-900 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm rounded-md"
placeholder="Например DOGE"
:placeholder="`Например ${ticker ? ticker : 'WAXP'}`"
/>
</div>
<div
class="flex bg-white shadow-md p-1 rounded-md shadow-md flex-wrap"
>
<div class="flex bg-white shadow-md p-1 rounded-md flex-wrap">
<span
class="inline-flex items-center px-2 m-1 rounded-md text-xs font-medium bg-gray-300 text-gray-800 cursor-pointer"
>
Expand All @@ -65,14 +67,16 @@
CHD
</span>
</div>
<div class="text-sm text-red-600">Такой тикер уже добавлен</div>
<div v-if="tickerAlreadyExists" class="text-sm text-red-600">
Такой тикер уже добавлен
</div>
</div>
</div>
<button
@click="add"
type="button"
class="my-4 inline-flex items-center py-2 px-4 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-full text-white bg-gray-600 hover:bg-gray-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
>
<!-- Heroicon name: solid/mail -->
<svg
class="-ml-0.5 mr-2 h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -89,133 +93,69 @@
</button>
</section>

<hr class="w-full border-t border-gray-600 my-4" />
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<div
class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid cursor-pointer"
>
<div class="px-4 py-5 sm:p-6 text-center">
<dt class="text-sm font-medium text-gray-500 truncate">
WTF - USD
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">1.11</dd>
</div>
<div class="w-full border-t border-gray-200"></div>
<button
class="flex items-center justify-center font-medium w-full bg-gray-100 px-4 py-4 sm:px-6 text-md text-gray-500 hover:text-gray-600 hover:bg-gray-200 hover:opacity-20 transition-all focus:outline-none"
>
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#718096"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path></svg
>Удалить
</button>
</div>
<div
class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid border-4 cursor-pointer"
>
<div class="px-4 py-5 sm:p-6 text-center">
<dt class="text-sm font-medium text-gray-500 truncate">
VUE - RUB
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">80000.00</dd>
</div>
<div class="w-full border-t border-gray-200"></div>
<button
class="flex items-center justify-center font-medium w-full bg-gray-100 px-4 py-4 sm:px-6 text-md text-gray-500 hover:text-gray-600 hover:bg-gray-200 hover:opacity-20 transition-all focus:outline-none"
<template v-if="tickers.length">
<hr class="w-full border-t border-gray-600 my-4" />
{{ sel }}
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<div
v-for="t in tickers"
:key="t.name"
@click="select(t)"
:class="sel === t ? 'border-4' : ''"
class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid cursor-pointer"
>
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#718096"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path></svg
>Удалить
</button>
</div>
<div
class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid cursor-pointer"
>
<div class="px-4 py-5 sm:p-6 text-center">
<dt class="text-sm font-medium text-gray-500 truncate">
BTC - USD
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">99999.99</dd>
</div>
<div class="w-full border-t border-gray-200"></div>
<button
class="flex items-center justify-center font-medium w-full bg-gray-100 px-4 py-4 sm:px-6 text-md text-gray-500 hover:text-gray-600 hover:bg-gray-200 hover:opacity-20 transition-all focus:outline-none"
>
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#718096"
aria-hidden="true"
<div class="px-4 py-5 sm:p-6 text-center">
<dt class="text-sm font-medium text-gray-500 truncate">
{{ t.name }} - USD
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">
{{ t.price }}
</dd>
</div>
<div class="w-full border-t border-gray-200"></div>
<button
@click.stop="handleDelete(t)"
class="flex items-center justify-center font-medium w-full bg-gray-100 px-4 py-4 sm:px-6 text-md text-gray-500 hover:text-gray-600 hover:bg-gray-200 hover:opacity-20 transition-all focus:outline-none"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path></svg
>Удалить
</button>
</div>
<div
class="bg-white overflow-hidden shadow rounded-lg border-purple-800 border-solid cursor-pointer"
>
<div class="px-4 py-5 sm:p-6 text-center">
<dt class="text-sm font-medium text-gray-500 truncate">
DOGE - USD
</dt>
<dd class="mt-1 text-3xl font-semibold text-gray-900">0.0014</dd>
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#718096"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path></svg
>Удалить
</button>
</div>
<div class="w-full border-t border-gray-200"></div>
<button
class="flex items-center justify-center font-medium w-full bg-gray-100 px-4 py-4 sm:px-6 text-md text-gray-500 hover:text-gray-600 hover:bg-gray-200 hover:opacity-20 transition-all focus:outline-none"
>
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="#718096"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
></path></svg
>Удалить
</button>
</div>
</dl>
<hr class="w-full border-t border-gray-600 my-4" />
<section class="relative">
</dl>
<hr
v-if="tickers.length > 0"
class="w-full border-t border-gray-600 my-4"
/>
</template>

<section v-if="sel" class="relative">
<h3 class="text-lg leading-6 font-medium text-gray-900 my-8">
VUE - USD
{{ sel.name }} - USD
</h3>
<div class="flex items-end border-gray-600 border-b border-l h-64">
<div class="bg-purple-800 border w-10 h-24"></div>
<div class="bg-purple-800 border w-10 h-32"></div>
<div class="bg-purple-800 border w-10 h-48"></div>
<div class="bg-purple-800 border w-10 h-16"></div>
<div
v-for="(bar, idx) in normalizeGraph()"
:key="idx"
:style="{ height: `${bar}%` }"
class="bg-purple-800 border w-10"
></div>
</div>
<button type="button" class="absolute top-0 right-0">
<button
@click="sel = null"
type="button"
class="absolute top-0 right-0"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
Expand Down Expand Up @@ -249,10 +189,85 @@ export default {

data() {
return {
ticker: "default",
ticker: "",
tickers: [],
sel: null,
graph: [],
tickerAlreadyExists: false,
};
},
methods: {
add() {
if (
this.tickers.some(
(t) => t.name.toUpperCase() === this.ticker.toUpperCase()
)
) {
this.tickerAlreadyExists = true;
return;
}

this.tickerAlreadyExists = false;

const currentTicker = {
name: this.ticker,
price: "-",
};

this.tickers.push(currentTicker);
setInterval(async () => {
const f = await fetch(
`https://min-api.cryptocompare.com/data/price?fsym=${currentTicker.name}&tsyms=USD&api_key=ef8136c38bf142129b04748c1e9f97142f5c175607b577515e874a0c8293259c`
);
const data = await f.json();
const tickerToUpdate = this.tickers.find(
(t) => t.name === currentTicker.name
);
if (tickerToUpdate) {
tickerToUpdate.price = data.USD
? data.USD > 1
? data.USD.toFixed(2)
: data.USD.toPrecision(2)
: "N/A";
}

if (this.sel?.name === currentTicker.name) {
this.graph.push(data.USD);
}
}, 5000);
this.ticker = "";
},

resetTickerExistsState() {
this.tickerAlreadyExists = false;
},

select(ticker) {
this.sel = ticker;
this.graph = [];
},

handleDelete(tickerToRemove) {
const indexToRemove = this.tickers.findIndex((t) => t === tickerToRemove);

if (indexToRemove !== -1) {
this.tickers.splice(indexToRemove, 1);

// Проверяем, если удаляемый тикер совпадает с выбранным, сбрасываем выбор
if (this.sel && this.sel.name === tickerToRemove.name) {
this.sel = null;
this.graph = [];
}
}
},

normalizeGraph() {
const maxValue = Math.max(...this.graph);
const minValue = Math.min(...this.graph);
return this.graph.map(
(price) => 5 + ((price - minValue) * 95) / (maxValue - minValue)
);
},
},
};
</script>

<style src="./app.css"></style>
Loading