From 4e0f22d0d2a33982b7982e6874174e1791a4ed7f Mon Sep 17 00:00:00 2001 From: mikgor Date: Fri, 26 Oct 2018 17:53:00 +0200 Subject: [PATCH] Add product template & styling, models bug fix --- .gitignore | 4 +- initializers/initializers.go | 16 ++++- models/models.go | 18 +++++- static/css/style.css | 110 +++++++++++++++++++++++++++++++++++ templates/base.html | 4 +- templates/category.html | 12 +++- templates/index.html | 10 +++- templates/product.html | 19 ++++++ 8 files changed, 183 insertions(+), 10 deletions(-) create mode 100644 templates/product.html diff --git a/.gitignore b/.gitignore index ba7ea82..39377ee 100644 --- a/.gitignore +++ b/.gitignore @@ -9,4 +9,6 @@ *.test # Output of the go coverage tool, specifically when used with LiteIDE -*.out \ No newline at end of file +*.out + +static/icons/* diff --git a/initializers/initializers.go b/initializers/initializers.go index f4c116b..a161f94 100644 --- a/initializers/initializers.go +++ b/initializers/initializers.go @@ -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
Pamięć 8 GB
Dysk SSD M.2 PCIe 128 GB
Grafika Intel HD Graphics 6000
Typ ekranu Błyszczący, LED
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
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", + "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, diff --git a/models/models.go b/models/models.go index c4b3231..2c58ec5 100644 --- a/models/models.go +++ b/models/models.go @@ -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 +} diff --git a/static/css/style.css b/static/css/style.css index 910d479..666a25a 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -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; } diff --git a/templates/base.html b/templates/base.html index cd32476..7677511 100644 --- a/templates/base.html +++ b/templates/base.html @@ -9,8 +9,8 @@ - [Strona główna] - {{template "content" .}} +
[Strona główna]
+
{{template "content" .}}
{{end}} diff --git a/templates/category.html b/templates/category.html index 618020c..a7ffe92 100644 --- a/templates/category.html +++ b/templates/category.html @@ -1,6 +1,14 @@ {{define "content"}} - {{.category.Name}} +

{{.category.Name}}

{{range $.products}} - {{ .Name }} + +
+
+
+
{{ .Name }}
+
{{ .Price }} zł
+
+
+ {{end}} {{end}} diff --git a/templates/index.html b/templates/index.html index eaa6911..6c2cb3e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,5 +1,13 @@ {{define "content"}} +

Kategorie

{{range $.categories}} - {{ .Name }} + +
+
+
+
{{ .Name }}
+
+
+ {{end}} {{end}} diff --git a/templates/product.html b/templates/product.html new file mode 100644 index 0000000..e0d14ac --- /dev/null +++ b/templates/product.html @@ -0,0 +1,19 @@ +{{define "content"}} +
+
+
+

{{.product.Name}}

+
+
+
+
+
+ {{.product.Description}}

+
Ilość sztuk:
+ Dostępna Ilość: {{.product.Quantity}}

+
Cena: {{.product.Price}} zł

+ +
+
+
+{{end}}