From 7ebc68a9a479e639621ee235b67e3d7476139b46 Mon Sep 17 00:00:00 2001 From: raul Date: Thu, 30 May 2024 08:26:08 +0200 Subject: [PATCH] Add styling template --- cmd/clientFunc.go | 22 +-------- cmd/templates/index.html | 73 +++++++++++++++-------------- cmd/templates/style.css | 99 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+), 53 deletions(-) diff --git a/cmd/clientFunc.go b/cmd/clientFunc.go index 881978b..da9e377 100644 --- a/cmd/clientFunc.go +++ b/cmd/clientFunc.go @@ -49,31 +49,12 @@ type root struct { // Probabilidad string `json:"#content"` // Periodo string `json:"-periodo"` // } `json:"prob_precipitacion"` - } `json:"dia"` } `json:"prediccion"` } `json:"root"` } -// func client() { -// jsonData, err := getJSON() -// if err != nil { -// log.Fatal(err) -// } -// textBytes := []byte(jsonData) -// aemetRequest := root{} -// err = json.Unmarshal(textBytes, &aemetRequest) -// if err != nil { -// log.Fatalf("Error occurred unmarshalling data: %v\n", err) -// } -// -// fmt.Println(aemetRequest.Base.Nombre) -// fmt.Println(aemetRequest.Base.Prediccion.Dia[0].Fecha) -// fmt.Printf("Temperatura máxima: %v°C\n", aemetRequest.Base.Prediccion.Dia[0].Temperatura.Maxima) -// fmt.Printf("Temperatura mínima: %v°C\n", aemetRequest.Base.Prediccion.Dia[0].Temperatura.Minima) -// } - -func getJSON(codPostal string) (s string, err error) { +func getJSON(codPostal string) (string, error) { client := &http.Client{} req, err := http.NewRequest("GET", "https://www.aemet.es/xml/municipios/localidad_"+codPostal+".xml", nil) if err != nil { @@ -106,6 +87,7 @@ func getJSON(codPostal string) (s string, err error) { // I am in tremendous pain after what I had to go through to get this damn thing working, json, err := xj.Convert(xml, xj.WithNodes( xj.NodePlugin("root.prediccion.dia.estado_cielo", xj.ToArray()), + xj.NodePlugin("root.prediccion.dia.prob_precipitacion", xj.ToArray()), )) if err != nil { diff --git a/cmd/templates/index.html b/cmd/templates/index.html index 0cf30a8..f70b4a7 100644 --- a/cmd/templates/index.html +++ b/cmd/templates/index.html @@ -9,41 +9,48 @@ - - - - - {{ range .Base.Prediccion.Dia}} - - {{ end }} - - - - {{ range .Base.Prediccion.Dia}} - - {{ end }} - - - - {{ range .Base.Prediccion.Dia}} - - {{ end }} - +
+
+
{{ .Base.Nombre }}
Dia{{ .Fecha }}
Temp. Máxima{{ .Temperatura.Maxima }}
Temp. Mínima{{ .Temperatura.Minima }}
+ - - - {{ range .Base.Prediccion.Dia}} - - {{ end }} - -
{{ .Base.Nombre }}
Índice UV - {{ if eq .UV "" }} - No disponible! - {{ else }} - {{ .UV }} - {{ end }} -
+ + Dia + {{ range .Base.Prediccion.Dia}} + {{ .Fecha }} + {{ end }} + + + Temp. Máxima + {{ range .Base.Prediccion.Dia}} + {{ .Temperatura.Maxima }} + {{ end }} + + + + Temp. Mínima + {{ range .Base.Prediccion.Dia}} + {{ .Temperatura.Minima }} + {{ end }} + + + + Índice UV + {{ range .Base.Prediccion.Dia}} + + {{ if eq .UV "" }} + No disponible! + {{ else }} + {{ .UV }} + {{ end }} + + {{ end }} + + + + + diff --git a/cmd/templates/style.css b/cmd/templates/style.css index a4e0c13..63f8677 100644 --- a/cmd/templates/style.css +++ b/cmd/templates/style.css @@ -1,4 +1,103 @@ +* { + font-family: arial; +} + table { border: 1px solid black; border-collapse: collapse; } + +table * { + text-align: center; +} + +input { + margin-bottom: 10px; +} + +#but { + background-color: #eee; + border: 2px black solid; +} + +.centered { + text-align: center; +} + +img { + text-align: center; + border: 2px solid #ff6e00; + border-radius: 50%; + padding: 1%; +} + +button { + background-color: #eee; + border: 2px black solid; + margin-bottom: 10px; +} + +#but:hover { + background-color: #ff6e00; + border: 2px black solid; +} + +body { + background-color: #aaa; +} + +h1 { + text-align: center; + bottom: 0%; +} + +h3 { + text-align: center; +} + +form { + text-align: center; +} + +a { + color: #ff6e00; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +progress::-moz-progress-bar { + background-color: #ff6e00; +} + +progress::-webkit-progress-value { + background-color: #ff6e00; +} + +progress { + color: #ff6e00; +} + +footer { + top: 100%; +} + +#main { + background-color: #eee; + bottom: 100%; + height: 100%; + padding-left: 5%; + padding-right: 5%; + outline: solid 2px #ff6e00; +} + +.container { + display: flex; + /* outline: solid 1px black; */ + justify-content: center; + height: 100%; + max-width: 100%; + background-color: #aaa; +}