styling, cleanup

bueti · Dec 10, 2023 · 92fba8c · 92fba8c
1 parent e6109e5
commit 92fba8c
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 35 deletions.
diff --git a/cmd/api/url.go b/cmd/api/url.go
@@ -37,34 +37,34 @@ func (app *application) createUrlFormHandler(c echo.Context) error {
 func (app *application) createUrlHandlerPost(c echo.Context) error {
 	original := c.FormValue("original")
 	shortCode := c.FormValue("short_code")
-	qrCodeStr := c.FormValue("qr_code")
 
 	user, err := app.userFromContext(c)
 	if err != nil {
 		app.sessionManager.Put(c.Request().Context(), "flash_error", "Bad Request, are you logged in?")
 		return c.Render(http.StatusBadRequest, "login.tmpl.html", app.newTemplateData(c))
 	}
 
-	var qrCodeURL string
-	if qrCodeStr == "on" {
-		qrCodeURL, err = app.createQRCode(original)
-		if err != nil {
-			app.sessionManager.Put(c.Request().Context(), "flash_error", "Failed to create QR Code.")
-		}
-	}
-
 	urlReq := &model.UrlCreateRequest{
 		Original:  original,
 		ShortCode: shortCode,
 		UserID:    user.ID,
-		QRCodeURL: qrCodeURL,
 	}
-	_, err = app.models.Urls.Create(urlReq)
+	url, err := app.models.Urls.Create(urlReq)
 	if err != nil {
 		app.sessionManager.Put(c.Request().Context(), "flash_error", "Internal Server Error. Please try again later.")
 		return c.Render(http.StatusBadRequest, "create_url.tmpl.html", app.newTemplateData(c))
 	}
 
+	qrCodeURL, err := app.createQRCode(genFullUrl(fmt.Sprintf(c.Scheme()+"://"+c.Request().Host), url.ShortUrl))
+	if err != nil {
+		app.sessionManager.Put(c.Request().Context(), "flash_error", "Failed to create QR Code.")
+	}
+
+	err = app.models.Urls.SetQRCodeURL(&url, qrCodeURL)
+	if err != nil {
+		app.sessionManager.Put(c.Request().Context(), "flash_error", "Failed to set QR Code URL.")
+	}
+
 	app.sessionManager.Put(c.Request().Context(), "flash", "Url created successfully!")
 	data := app.newTemplateData(c)
 	data.User = user

diff --git a/internal/model/url.go b/internal/model/url.go
@@ -30,7 +30,6 @@ type UrlCreateRequest struct {
 	Original  string    `json:"original" validate:"required,url"`
 	ShortCode string    `json:"short_code,omitempty" validate:"alphanum,min=3,max=11"`
 	UserID    uuid.UUID `json:"user_id"`
-	QRCodeURL string    `json:"qr_code_url,omitempty"`
 }
 
 type UrlResponse struct {
@@ -80,7 +79,6 @@ func (u *UrlModel) Create(urlReq *UrlCreateRequest) (Url, error) {
 
 	url.Original = urlReq.Original
 	url.UserID = urlReq.UserID
-	url.QRCodeURL = urlReq.QRCodeURL
 
 	result := u.DB.Create(url)
 	if result.Error != nil {
@@ -90,6 +88,16 @@ func (u *UrlModel) Create(urlReq *UrlCreateRequest) (Url, error) {
 	return *url, nil
 }
 
+// SetQRCodeURL sets the QRCodeURL for a given url
+func (u *UrlModel) SetQRCodeURL(url *Url, qrCodeURL string) error {
+	result := u.DB.Model(url).Update("qr_code_url", qrCodeURL)
+	if result.Error != nil {
+		return result.Error
+	}
+
+	return nil
+}
+
 func (u *UrlModel) GetRedirect(shortUrl string) (Url, error) {
 	url := new(Url)
 	result := u.DB.Where("short_url = ?", shortUrl).First(&url)

diff --git a/ui/html/pages/create_url.tmpl.html b/ui/html/pages/create_url.tmpl.html
@@ -16,12 +16,6 @@ <h2 class="text-2xl font-bold text-gray-900">Create URL</h2>
         <input type="text" name="short_code" id="short_code" placeholder="Optional: Short Code"
                class="px-4 py-3 rounded-lg shadow-lg focus:outline-none focus:shadow-outline"/>
     </div>
-    <!-- checkbox to generate qr code -->
-    <div class="flex flex-col mt-2">
-        <label for="qr_code">Generate QR Code</label>
-        <input type="checkbox" name="qr_code" id="qr_code" placeholder="Generate QR Code"
-               class="px-4 py-3 rounded-lg shadow-lg focus:outline-none focus:shadow-outline"/>
-    </div>
     <div class="mt-6">
         <button type="submit"
                 class="px-5 py-3 mt-8 font-medium text-indigo-600 bg-white rounded-md shadow-lg hover:bg-indigo-50">

diff --git a/ui/html/pages/dashboard.tmpl.html b/ui/html/pages/dashboard.tmpl.html
@@ -6,34 +6,34 @@ <h2 class="text-2xl font-bold text-gray-900">Dashboard</h2>
     {{ if .Urls }}
     <div>
         <h3 class="mt-8 text-xl font-bold text-gray-900">Your URLs</h3>
-        <table class="table-auto">
-            <thead>
+        <table class="border-collapse border border-slate-500">
+            <thead class="bg-gray-400 font-semibold">
             <tr>
-                <th>Original</th>
-                <th>Short</th>
-                <th>Created At</th>
-                <th>Visitors</th>
-                <th>QR Code</th>
-                <th>Delete</th>
+                <th class="border border-slate-600">Original</th>
+                <th class="border border-slate-600">Short</th>
+                <th class="border border-slate-600">Created At</th>
+                <th class="border border-slate-600">Visitors</th>
+                <th class="border border-slate-600">QR Code</th>
+                <th class="border border-slate-600">Delete</th>
             </tr>
             </thead>
             {{ range .Urls }}
             <tbody>
             <tr>
-                <td class="px-4 py-2">
+                <td class="px-4 py-2 border border-slate-700">
                     <a href="{{ printf " %.25s" .Original }}" class="text-indigo-600 hover:underline">{{ .Original }}</a>
                 </td>
-                <td class="px-4 py-2">
+                <td class="px-4 py-2 border border-slate-700">
                     <a href="{{ .ShortUrl }}" class="text-indigo-600 hover:underline">{{ .ShortUrl }}</a>
                 </td>
-                <td class="px-4 py-2">{{humanDate .CreatedAt }}</td>
-                <td class="px-4 py-2">{{ .Visits }}</td>
-                <td class="px-4 py-2">
+                <td class="px-4 py-2 border border-slate-700">{{humanDate .CreatedAt }}</td>
+                <td class="px-4 py-2 border border-slate-700">{{ .Visits }}</td>
+                <td class="px-4 py-2 border border-slate-700">
                 {{ if .QRCodeURL }}
                     <img src="{{ .QRCodeURL }}" alt="QR Code" class="w-8 h-8 cursor-pointer" onclick="openOverlay('{{ .QRCodeURL }}')">
                 {{ end }}
                 </td>
-                <td class="px-4 py-2">
+                <td class="px-4 py-2 border border-slate-700">
                     <form action="/urls/{{ .ID }}" method="POST">
                         <input type="hidden" name="_method" value="DELETE">
                         <input type="hidden" name="csrf_token" value="{{$.CSRFToken}}">

diff --git a/ui/static/css/tailwind.css b/ui/static/css/tailwind.css
@@ -717,8 +717,8 @@ video {
   flex-grow: 1;
 }
 
-.table-auto {
-  table-layout: auto;
+.border-collapse {
+  border-collapse: collapse;
 }
 
 .-translate-x-1\/2 {
@@ -781,6 +781,21 @@ video {
   border-color: rgb(248 113 113 / var(--tw-border-opacity));
 }
 
+.border-slate-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(100 116 139 / var(--tw-border-opacity));
+}
+
+.border-slate-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(71 85 105 / var(--tw-border-opacity));
+}
+
+.border-slate-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 65 85 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -791,6 +806,11 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .bg-green-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));