gergof/PIU_proiect
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Prices page

Browse Source
This commit is contained in:
Fándly Gergő 2021-01-05 22:39:11 +02:00
parent d0fcc4392f
commit cf75e7da68
6 changed files with 130 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/prices.html
View File

@ -1,11 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Core Computing</title>
<title>Prețuri - Core Computing</title>
<meta charset="utf-8" />
<script src="./index.js"></script>
</head>
<body>
<app-header />
<app-header></app-header>
<div class="prices_content">
<p class="prices_header">Servere virtuale</p>
<app-price-table data-content="/prices/vps.json"></app-price-table>
<p class="prices_header">Servere dedicate</p>
<app-price-table data-content="/prices/vps.json"></app-price-table>
<p class="prices_header">Kubernetes</p>
<app-price-table data-content="/prices/vps.json"></app-price-table>
<p class="prices_header">Software as a Service</p>
<app-price-table data-content="/prices/vps.json"></app-price-table>
<p class="prices_header">Domenii</p>
<app-price-table data-content="/prices/vps.json"></app-price-table>
</div>
</body>
</html>

11
src/prices/vps.json Normal file
View File

@ -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]
]
}

60
src/script/components/app-price-table.js Normal file
View File

@ -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);

28
src/script/components/styles/app-price-table.scss Normal file
View File

@ -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;
}
}
}
}

2
src/script/index.js
View File

@ -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';

15
src/style/prices.scss Normal file
View File

@ -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;
}
}