Add product template & styling, models bug fix

.gitignore

@@ -10,3 +10,5 @@
 
 # Output of the go coverage tool, specifically when used with LiteIDE
 *.out
+
+static/icons/*

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</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,

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
+}

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

templates/base.html

@@ -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/>
+   <header><a href="http://127.0.0.1:8000">[Strona główna]</a></header>
-   {{template "content" .}}
+   <div id="container">{{template "content" .}}</div>
 </body>
 </html>
 {{end}}

templates/category.html

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

templates/index.html

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

templates/product.html

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