From cf75e7da68cebfdeeed34db759684fcfa9ca0f94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1ndly=20Gerg=C5=91?= Date: Tue, 5 Jan 2021 22:39:11 +0200 Subject: [PATCH] feat: Prices page --- src/prices.html | 16 ++++- src/prices/vps.json | 11 ++++ src/script/components/app-price-table.js | 60 +++++++++++++++++++ .../components/styles/app-price-table.scss | 28 +++++++++ src/script/index.js | 2 + src/style/prices.scss | 15 +++++ 6 files changed, 130 insertions(+), 2 deletions(-) create mode 100644 src/prices/vps.json create mode 100644 src/script/components/app-price-table.js create mode 100644 src/script/components/styles/app-price-table.scss create mode 100644 src/style/prices.scss diff --git a/src/prices.html b/src/prices.html index 982f31a..47c3767 100644 --- a/src/prices.html +++ b/src/prices.html @@ -1,11 +1,23 @@ - Core Computing + Prețuri - Core Computing - + +
+

Servere virtuale

+ +

Servere dedicate

+ +

Kubernetes

+ +

Software as a Service

+ +

Domenii

+ +
diff --git a/src/prices/vps.json b/src/prices/vps.json new file mode 100644 index 0000000..5e534fa --- /dev/null +++ b/src/prices/vps.json @@ -0,0 +1,11 @@ +{ + "columns": ["vCPU", "Memorie", "Transfer de date", "SSD", "preț/oră"], + "units": ["", "MB", "GB", "GB", "ron"], + "data": [ + [1, 512, 512, 20, 0.03], + [1, 1024, 512, 20, 0.04], + [2, 1024, 1024, 40, 0.08], + [4, 4096, 4096, 100, 1.5], + [8, 8192, 8192, 512, 6] + ] +} diff --git a/src/script/components/app-price-table.js b/src/script/components/app-price-table.js new file mode 100644 index 0000000..e0e1a55 --- /dev/null +++ b/src/script/components/app-price-table.js @@ -0,0 +1,60 @@ +import styles from '!raw-loader!sass-loader!./styles/app-price-table.scss'; + +class AppPriceTable extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + fetch(this.dataset.content) + .then(response => response.json()) + .then(data => { + const root = this.attachShadow({ mode: 'open' }); + + const style = document.createElement('style'); + style.textContent = styles; + root.appendChild(style); + + const table = document.createElement('table'); + table.className = 'table'; + table.cellSpacing = 0; + + const thead = document.createElement('thead'); + + const theadRow = document.createElement('tr'); + + data.columns.forEach(column => { + const col = document.createElement('th'); + col.innerText = column; + theadRow.appendChild(col); + }); + + thead.appendChild(theadRow); + table.appendChild(thead); + + const tbody = document.createElement('tbody'); + + data.data.forEach(item => { + const row = document.createElement('tr'); + + item.forEach((field, i) => { + const cell = document.createElement('td'); + cell.innerText = field + ' ' + data.units[i]; + row.appendChild(cell); + }); + + tbody.appendChild(row); + }); + + table.appendChild(tbody); + + root.appendChild(table); + }); + } + + static get observedAttributes() { + return ['data-content']; + } +} + +customElements.define('app-price-table', AppPriceTable); diff --git a/src/script/components/styles/app-price-table.scss b/src/script/components/styles/app-price-table.scss new file mode 100644 index 0000000..ac554cd --- /dev/null +++ b/src/script/components/styles/app-price-table.scss @@ -0,0 +1,28 @@ +.table { + width: 100%; + + & > thead { + & > tr { + & > th { + padding: 15px 0; + border-bottom: 2px solid #015082; + font-size: 20px; + line-height: 27px; + font-weight: bold; + color: #0072bc; + text-align: left; + } + } + } + + & > tbody { + & > tr { + & > td { + padding: 15px 0; + border-bottom: 1px solid #0072bc; + font-size: 20px; + line-height: 27px; + } + } + } +} diff --git a/src/script/index.js b/src/script/index.js index 87f5cc8..ab68adb 100644 --- a/src/script/index.js +++ b/src/script/index.js @@ -5,9 +5,11 @@ import '../style/main.scss'; import '../style/index.scss'; import '../style/about.scss'; import '../style/services.scss'; +import '../style/prices.scss'; // load components import './components/app-header'; import './components/app-button'; import './components/app-service-menu'; import './components/app-service-header'; +import './components/app-price-table'; diff --git a/src/style/prices.scss b/src/style/prices.scss new file mode 100644 index 0000000..1335704 --- /dev/null +++ b/src/style/prices.scss @@ -0,0 +1,15 @@ +.prices { + &_content { + margin-top: 70px; + padding: 20px; + } + + &_header { + font-size: 36px; + line-height: 48px; + font-weight: bold; + margin-left: 30px; + margin-top: 60px; + margin-bottom: 15px; + } +}