Add product template & styling, models bug fix
This commit is contained in:
mikgor
parent
fe8b875365
commit
4e0f22d0d2
4
.gitignore
vendored
4
.gitignore
vendored
@ -9,4 +9,6 @@
|
||||
*.test
|
||||
|
||||
# Output of the go coverage tool, specifically when used with LiteIDE
|
||||
*.out
|
||||
*.out
|
||||
|
||||
static/icons/*
|
||||
|
||||
@ -9,6 +9,7 @@ func initializePages() {
|
||||
Pages = make(map[string]Page)
|
||||
Pages["index"] = Page{"/", "templates/index.html", map[string]interface{}{"categories": Categories}, nil}
|
||||
Pages["category"] = Page{"/category", "templates/category.html", map[string]interface{}{}, DynamicDataLoaderCategory}
|
||||
Pages["product"] = Page{"/product", "templates/product.html", map[string]interface{}{}, DynamicDataLoaderProduct}
|
||||
}
|
||||
|
||||
func initializeData() {
|
||||
@ -16,7 +17,7 @@ func initializeData() {
|
||||
{1, "Laptopy"},
|
||||
{2, "Komputery"},
|
||||
{3, "Smartfony"},
|
||||
{4, "Smartwache"},
|
||||
{4, "Smartwatche"},
|
||||
{5, "Monitory"},
|
||||
{6, "Drukarki"},
|
||||
{7, "Myszki"},
|
||||
@ -29,16 +30,25 @@ func initializeData() {
|
||||
1,
|
||||
GetCategoryByName("Laptopy"),
|
||||
"Apple MacBook Air 128 GB",
|
||||
"Procesor Intel Core i5</br>Pamięć 8 GB</br>Dysk SSD M.2 PCIe 128 GB</br>Grafika Intel HD Graphics 6000</br>Typ ekranu Błyszczący, LED</br>System macOS Sierra",
|
||||
"Procesor Intel Core i5 | Pamięć 8 GB | Dysk SSD M.2 PCIe 128 GB | Grafika Intel HD Graphics 6000 | Typ ekranu Błyszczący, LED | System macOS Sierra",
|
||||
"https://cdn.x-kom.pl/i/setup/images/prod/big/product-big,apple-macbook-air-i58gb128gbhd-6000mac-os-368639,pr_2016_4_28_12_39_54_140.jpg",
|
||||
11,
|
||||
3999,
|
||||
},
|
||||
{
|
||||
2,
|
||||
GetCategoryByName("Laptopy"),
|
||||
"Dell Inspiron 5370",
|
||||
"Procesor Intel Core i5-8250U | Pamięć 8 GB | Dysk SSD M.2 256 GB | Grafika AMD Radeon 530, + Intel UHD Graphics 620 | Typ ekranu Matowy, LED | System Microsoft Windows 10 Home PL",
|
||||
"https://cdn.x-kom.pl/i/setup/images/prod/big/product-big,dell-inspiron-5370-i5-8250u8gb256win10-r530-fhd-393456,2017/12/pr_2017_12_14_9_40_43_405_10.jpg",
|
||||
5,
|
||||
3249,
|
||||
},
|
||||
{
|
||||
3,
|
||||
GetCategoryByName("Komputery"),
|
||||
"Dell Inspiron 3670",
|
||||
"System Microsoft Windows 10 Home PL</br>Procesor Intel Core i7-8700</br>Grafika NVIDIA GeForce GTX 1050Ti, + Intel UHD Graphics 630</br>Pamięć RAM 8 GB</br>Dysk SSD PCIe 128 GB</br>Dysk HDD SATA 7200 obr. 1000 GB</br>Miejsce na dodatkowy wewnętrzny dysk SATA Możliwość montażu dwóch dysków SATA",
|
||||
"System Microsoft Windows 10 Home PL | Procesor Intel Core i7-8700 | Grafika NVIDIA GeForce GTX 1050Ti, + Intel UHD Graphics 630 | Pamięć RAM 8 GB | Dysk SSD PCIe 128 GB | Dysk HDD SATA 7200 obr. 1000 GB | Miejsce na dodatkowy wewnętrzny dysk SATA Możliwość montażu dwóch dysków SATA",
|
||||
"https://cdn.x-kom.pl/i/setup/images/prod/big/product-big,dell-inspiron-3670-i7-87008gb1281000win10-gtx1050ti-447395,2018/9/pr_2018_9_20_15_45_5_770_00.jpg",
|
||||
123,
|
||||
4299,
|
||||
|
||||
@ -20,6 +20,12 @@ func DynamicDataLoaderCategory(id int) map[string]interface{}{
|
||||
}
|
||||
}
|
||||
|
||||
func DynamicDataLoaderProduct(id int) map[string]interface{}{
|
||||
return map[string]interface{}{
|
||||
"product": GetProductById(id),
|
||||
}
|
||||
}
|
||||
|
||||
func (p Page) HandlePage(w http.ResponseWriter, r *http.Request) {
|
||||
if p.DynamicDataLoader != nil {
|
||||
id, err := strconv.Atoi(r.URL.Query()["id"][0])
|
||||
@ -77,8 +83,18 @@ func GetCategoryProducts(id int) []Product {
|
||||
for i:= range Products {
|
||||
if Products[i].Category.Id == id {
|
||||
products = append(products, Products[i])
|
||||
break
|
||||
}
|
||||
}
|
||||
return products
|
||||
}
|
||||
|
||||
func GetProductById(id int) Product {
|
||||
var product Product
|
||||
for i:= range Products {
|
||||
if Products[i].Id == id {
|
||||
product = Products[i]
|
||||
break
|
||||
}
|
||||
}
|
||||
return product
|
||||
}
|
||||
|
||||
@ -1,3 +1,113 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
box-shadow: 0 0 5px rgba(0,0,0,.4);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.categoryTile, .productTile {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-flex;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,.4);
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.categoryTileContent {
|
||||
margin: auto;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.categoryIcon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.productTile {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.productIcon {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.productPrice {
|
||||
font-size: 20px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.productDescription {
|
||||
margin: 0 auto;
|
||||
width: 770px;
|
||||
height: 500px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.productDescriptionColumn {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.productDescriptionContent {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.productDescriptionIcon {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
margin: auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.productDescriptionText {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,.4);
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input[type="button"] {
|
||||
background-color: #1d9d00;
|
||||
border: none;
|
||||
padding: 20px;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<a href="http://127.0.0.1:8000">[Strona główna]<a/>
|
||||
{{template "content" .}}
|
||||
<header><a href="http://127.0.0.1:8000">[Strona główna]</a></header>
|
||||
<div id="container">{{template "content" .}}</div>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
{{define "content"}}
|
||||
{{.category.Name}}
|
||||
<h1>{{.category.Name}}</h1>
|
||||
{{range $.products}}
|
||||
<a href="">{{ .Name }}</a>
|
||||
<a href="http://127.0.0.1:8000/product?id={{ .Id }}">
|
||||
<div class="productTile">
|
||||
<div class="categoryTileContent">
|
||||
<div class="productIcon" style="background-image: url({{ .ImgUrl }});"></div>
|
||||
<div class="categoryName">{{ .Name }}</div>
|
||||
<div class="productPrice">{{ .Price }} zł</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
{{define "content"}}
|
||||
<h1>Kategorie</h1>
|
||||
{{range $.categories}}
|
||||
<a href="/category?id={{ .Id }}">{{ .Name }}</a>
|
||||
<a href="/category?id={{ .Id }}">
|
||||
<div class="categoryTile">
|
||||
<div class="categoryTileContent">
|
||||
<div class="categoryIcon" style="background-image: url(http://127.0.0.1:8000/static/icons/{{ .Name }}.png);"></div>
|
||||
<div class="categoryName">{{ .Name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
19
templates/product.html
Normal file
19
templates/product.html
Normal file
@ -0,0 +1,19 @@
|
||||
{{define "content"}}
|
||||
<div class="productDescription">
|
||||
<div class="productDescriptionColumn">
|
||||
<div class="productDescriptionContent">
|
||||
<h1>{{.product.Name}}</h1>
|
||||
<div class="productDescriptionIcon" style="background-image: url({{ .product.ImgUrl }});"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productDescriptionColumn">
|
||||
<div class="productDescriptionText">
|
||||
{{.product.Description}}<br><br>
|
||||
<div class="productPrice">Ilość sztuk: <input type="number" name="quantity" min="1" max="{{.product.Quantity}}" value="1"></div>
|
||||
<small>Dostępna Ilość: {{.product.Quantity}}</small><br><br>
|
||||
<div class="productPrice">Cena: {{.product.Price}} zł</div><br>
|
||||
<input type="button" value="Dodaj do koszyka" onclick="f()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
Loading…
Reference in New Issue
Block a user