Presentation

README.md

@@ -1,5 +1,7 @@
 # Tabula
 
+![Demo image](docs/demo.png)
+
 This repository contains two subprojects, one is the backend of the app which is a Java-SpringBoot-PostgreSQL-Gradle
 application, while the other is the frontend of the app which is a TypeScript-Angular-NPM app.
 

database/schema.sql

@@ -35,7 +35,8 @@ CREATE TABLE data_type
 INSERT INTO data_type (name)
 VALUES ('Textual'),
        ('Numeric'),
-       ('Monetary');
+       ('Monetary'),
+       ('Maps');
 
 CREATE TABLE tbl_table
 (

docs/.gitignore

@@ -0,0 +1,10 @@
+*.aux
+*.fdb_latexmk
+*.fls
+*.log
+*.nav
+*.out
+*.snm
+*.toc
+*.dvi
+*.pdf

docs/.latexmkrc

@@ -0,0 +1 @@
+$pdf_previewer = 'start papers';

docs/entity-relation.drawio

@@ -0,0 +1,79 @@
+<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (X11; Linux x86_64; rv:139.0) Gecko/20100101 Firefox/139.0" version="27.1.1">
+  <diagram id="_CLQAD8VqaFHC_ly-vCy" name="Page-1">
+    <mxGraphModel dx="1816" dy="678" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="850" pageHeight="1100" background="none" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="node1" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;cell&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; tbl_row: uuid&lt;br/&gt; tbl_column: uuid&lt;br/&gt; value: varchar(1000)&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; id: uuid&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=14;fontFamily=Helvetica;html=1;rounded=0;shadow=0;comic=0;labelBackgroundColor=none;strokeWidth=1;" parent="1" vertex="1">
+          <mxGeometry x="-40" y="940" width="157" height="147" as="geometry" />
+        </mxCell>
+        <mxCell id="node0" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;data_type&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; name: varchar(500)&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; id: smallint&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=14;fontFamily=Helvetica;html=1;rounded=0;shadow=0;comic=0;labelBackgroundColor=none;strokeWidth=1;" parent="1" vertex="1">
+          <mxGeometry x="370" y="592.5" width="152" height="107.5" as="geometry" />
+        </mxCell>
+        <mxCell id="node3" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;invalid_jwts&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; expiration_date: timestamp&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; token: varchar(500)&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=14;fontFamily=Helvetica;html=1;rounded=0;shadow=0;comic=0;labelBackgroundColor=none;strokeWidth=1;" parent="1" vertex="1">
+          <mxGeometry x="270" y="880" width="200" height="95" as="geometry" />
+        </mxCell>
+        <mxCell id="node5" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;tbl_column&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; tbl_table: uuid&lt;br/&gt; data_type: smallint&lt;br/&gt; column_index: integer&lt;br/&gt; column_name: varchar(300)&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; id: uuid&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=14;fontFamily=Helvetica;html=1;rounded=0;shadow=0;comic=0;labelBackgroundColor=none;strokeWidth=1;" parent="1" vertex="1">
+          <mxGeometry x="77" y="560" width="206" height="170" as="geometry" />
+        </mxCell>
+        <mxCell id="node6" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;tbl_row&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; tbl_table: uuid&lt;br/&gt; row_index: integer&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; id: uuid&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=14;fontFamily=Helvetica;html=1;rounded=0;shadow=0;comic=0;labelBackgroundColor=none;strokeWidth=1;" parent="1" vertex="1">
+          <mxGeometry x="-113" y="744" width="146" height="121" as="geometry" />
+        </mxCell>
+        <mxCell id="node2" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;tbl_table&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; title: varchar(50)&lt;br/&gt; description: varchar(500)&lt;br/&gt; creation_date: timestamp&lt;br/&gt; last_edit_date: timestamp&lt;br/&gt; user_id: uuid&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; id: uuid&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=14;fontFamily=Helvetica;html=1;rounded=0;shadow=0;comic=0;labelBackgroundColor=none;strokeWidth=1;" parent="1" vertex="1">
+          <mxGeometry x="-370" y="554" width="189" height="190" as="geometry" />
+        </mxCell>
+        <mxCell id="node4" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;users&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; email: varchar(512)&lt;br/&gt; encoded_password: varchar(60)&lt;br/&gt; roles: varchar(256)&lt;br/&gt; name: varchar(100)&lt;br/&gt; surname: varchar(100)&lt;br/&gt; country_name: varchar(200)&lt;br/&gt; country_flag: varchar(4)&lt;br/&gt; country_code: char(2)&lt;br/&gt; country_dial_code: integer&lt;br/&gt; enabled: boolean&lt;br/&gt; otp: varchar(6)&lt;br/&gt; otp_expiration: timestamp&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0 0 0 4px;line-height:1.6;&quot;&gt; id: uuid&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=14;fontFamily=Helvetica;html=1;rounded=0;shadow=0;comic=0;labelBackgroundColor=none;strokeWidth=1;" parent="1" vertex="1">
+          <mxGeometry x="-391.5" y="810" width="232" height="352" as="geometry" />
+        </mxCell>
+        <mxCell id="edge3" value="" style="html=1;rounded=1;edgeStyle=orthogonalEdgeStyle;dashed=0;startArrow=none;endArrow=block;endSize=12;strokeColor=#595959;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.500;entryY=1.000;entryDx=0;entryDy=0;" parent="1" source="node1" target="node5" edge="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="label20" value="tbl_column:id" style="edgeLabel;resizable=0;html=1;align=left;verticalAlign=top;strokeColor=default;" parent="edge3" vertex="1" connectable="0">
+          <mxGeometry x="99" y="891" as="geometry" />
+        </mxCell>
+        <mxCell id="edge0" value="" style="html=1;rounded=1;edgeStyle=orthogonalEdgeStyle;dashed=0;startArrow=none;endArrow=block;endSize=12;strokeColor=#595959;exitX=0.250;exitY=0.000;exitDx=0;exitDy=0;entryX=0.500;entryY=1.000;entryDx=0;entryDy=0;" parent="1" source="node1" target="node6" edge="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="label2" value="tbl_row:id" style="edgeLabel;resizable=0;html=1;align=left;verticalAlign=top;strokeColor=default;" parent="edge0" vertex="1" connectable="0">
+          <mxGeometry x="-100" y="911" as="geometry" />
+        </mxCell>
+        <mxCell id="edge5" value="" style="html=1;rounded=1;edgeStyle=orthogonalEdgeStyle;dashed=0;startArrow=none;endArrow=block;endSize=12;strokeColor=#595959;" parent="1" source="node5" edge="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="370" y="645" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="label32" value="data_type:id" style="edgeLabel;resizable=0;html=1;align=left;verticalAlign=top;strokeColor=default;" parent="edge5" vertex="1" connectable="0">
+          <mxGeometry x="290" y="610" as="geometry" />
+        </mxCell>
+        <mxCell id="edge4" value="" style="html=1;rounded=1;edgeStyle=orthogonalEdgeStyle;dashed=0;startArrow=none;endArrow=block;endSize=12;strokeColor=#595959;exitX=0.250;exitY=0.000;exitDx=0;exitDy=0;entryX=0.75;entryY=0;entryDx=0;entryDy=0;" parent="1" source="node5" target="node2" edge="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="129" y="520" />
+              <mxPoint x="-228" y="520" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="label26" value="tbl_table:id" style="edgeLabel;resizable=0;html=1;align=left;verticalAlign=top;strokeColor=default;" parent="edge4" vertex="1" connectable="0">
+          <mxGeometry x="61" y="531" as="geometry" />
+        </mxCell>
+        <mxCell id="edge2" value="" style="html=1;rounded=1;edgeStyle=orthogonalEdgeStyle;dashed=0;startArrow=none;endArrow=block;endSize=12;strokeColor=#595959;exitX=0.500;exitY=0.000;exitDx=0;exitDy=0;entryX=1;entryY=0.457;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" source="node6" target="node2" edge="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="-190" y="500" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="label14" value="tbl_table:id" style="edgeLabel;resizable=0;html=1;align=left;verticalAlign=top;strokeColor=default;" parent="edge2" vertex="1" connectable="0">
+          <mxGeometry x="-100" y="610" as="geometry" />
+        </mxCell>
+        <mxCell id="edge1" value="" style="html=1;rounded=1;edgeStyle=orthogonalEdgeStyle;dashed=0;startArrow=none;endArrow=block;endSize=12;strokeColor=#595959;" parent="1" source="node2" target="node4" edge="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <Array as="points" />
+            <mxPoint x="-410" y="660" as="sourcePoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="label8" value="user_id:id" style="edgeLabel;resizable=0;html=1;align=left;verticalAlign=top;strokeColor=default;" parent="edge1" vertex="1" connectable="0">
+          <mxGeometry x="-340" y="760" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

docs/presentation.tex

@@ -0,0 +1,143 @@
+\documentclass{beamer}
+
+\usepackage{inter}
+\usepackage{url}
+\usepackage[italian]{babel}
+\usepackage{graphicx}
+\usepackage{hyperref}
+\usepackage{tikz}
+\usepackage{fontawesome}
+
+\hypersetup{
+  pdfpagemode=FullScreen,
+  colorlinks=true
+}
+
+\setbeamertemplate{navigation symbols}{} % remove navigation symbols
+
+\title{Tabula}
+\author{
+  Alfredo Carlino \texttt{246025} \newline
+  \and Giorgio Carlino \texttt{246038} \newline
+  \and Mario G. D'Andrea \texttt{245940}}
+\institute{Corso di Web Applications \\ C.d.S. Informatica $\cdot$ DeMaCs \\ Università della Calabria}
+\titlegraphic{\includegraphics[width=2cm]{unical}}
+\date{Giugno 2025}
+
+\begin{document}
+\maketitle
+
+\begin{frame}
+  \includegraphics[width=\textwidth]{demo}
+  \centering  \href{https://github.com/bytestrick/tabula}{\faGithub\ github.com/bytestrick/tabula}
+\end{frame}
+
+\begin{frame}
+  \frametitle{Descrizione generale}
+
+  Tabula consente di organizzare dati in formato tabellare facilitando l'accesso e la modifica. Piuttosto che un foglio di calcolo, si può considerare l'app come una base di dati con cui si può interagire direttamente.
+
+  \vspace{10pt}
+
+  Ogni tabella in Tabula è composta da diverse colonne, ognuna con un \textbf{tipo} assegnato: numero, testo, data, posizione geografica, somma monetaria, ecc.
+
+  \vspace{10pt}
+
+  La facilità di utilizzo delle tabelle le rende uno strumento perfetto per tenere traccia delle letture, sia concluse che pianificate; oppure raggruppare in un unico punto i task pianificati (to-do) e aggregarli in classi usando il tipo \textit{tag}, corredandoli di una data e una posizione geografica opzionalmente; o ancora tracciare la performance di una squadra di calcio, derivando informazioni statistiche dagli esiti delle singole partite.
+
+\end{frame}
+
+\begin{frame}
+  \frametitle{Layout e schermate}
+
+  L’applicazione si compone di tre schermate principali:
+
+  \begin{itemize}
+    \item[\faUser] \textbf{\textit{Sign Up} \& \textit{Sign In}} \hspace{3pt} Viene mostrata esclusivamente agli utenti non ancora registrati, permette la creazione di un account, necessario per accedere alla piattaforma.
+
+Una volta completata la registrazione, l’utente viene automaticamente reindirizzato alla schermata di \textit{sign-in}, dove può autenticarsi utilizzando le credenziali appena fornite.
+
+    \item[\faHome] \label{ui_home} \textbf{Home} \hspace{3pt} È punto di accesso principale dell’utente dopo l'accesso. Qui è possibile visualizzare un riepilogo di tutte le tabelle create, con la possibilità di aggiungerne di nuove. Ogni tabella elencata consente operazioni di modifica o eliminazione.
+
+    \item[\faTable] \label{ui_table} \textbf{Table} \hspace{3pt} Dedicata alla modifica e gestione dei contenuti all'interno di una singola tabella.
+
+  \end{itemize}
+\end{frame}
+
+\begin{frame}
+  \frametitle{Navigazione tra schermate}
+
+  La navigazione segue un \textbf{modello ad hub}, con il seguente flusso:
+
+  \begin{enumerate}
+    \item L’utente accede alla schermata principale (\hyperref[ui_home]{Home})
+    \item Da qui può essere reindirizzato a pagine secondarie (es. \hyperref[ui_table]{Table}) per svolgere azioni
+specifiche
+    \item Una volta completata l’attività, viene riportato alla schermata principale
+  \end{enumerate}
+
+\end{frame}
+
+\begin{frame}
+  \frametitle{Account e Navbar}
+
+  \begin{columns}
+    \begin{column}{0.53\textwidth}
+      Per rendere disponibili in qualsiasi momento le informazioni dell’account e delle impostazioni (come il tema dell’interfaccia), è presente una sidebar integrata nella navbar, accessibile da qualsiasi schermata.
+    \end{column}
+    \begin{column}{0.48\textwidth}
+      \includegraphics[width=5cm]{sidebar.png}
+    \end{column}
+  \end{columns}
+\end{frame}
+
+\begin{frame}
+  \frametitle{Gerarchia visiva}
+
+  L’interfaccia dell’applicazione è organizzata secondo una struttura a griglia.
+
+  \begin{figure}
+    \includegraphics[width=0.9\textwidth]{gerarchia_visiva.png}
+  \end{figure}
+\end{frame}
+
+\begin{frame}
+  \frametitle{Tecnologie usate}
+
+  \begin{itemize}
+    \item[\faLeaf] Spring Boot
+    \item[\faEnvelope] Spring Email
+    \item[\faDatabase] PostgreSQL
+  \end{itemize}
+
+  \vspace{15pt}
+
+  \begin{itemize}
+    \item[\faHtml5] Angular
+    \item[\faCss3] Bootstrap
+  \end{itemize}
+
+  \vspace{18pt}
+
+  API esterne:
+  \begin{itemize}
+    \item[\faMapMarker] \href{https://www.openstreetmap.org/}{OpenStreetMap}
+    \item[\faMapSigns] \href{https://nominatim.openstreetmap.org/}{Nominatim}
+  \end{itemize}
+\end{frame}
+
+\begin{frame}
+  \frametitle{Modello entità-relazione}
+  \begin{figure}
+    \includegraphics[width=\textwidth]{entity_relation}
+  \end{figure}
+\end{frame}
+
+\begin{frame}
+  \frametitle{Diagramma di classi (back-end)}
+  \begin{figure}
+    \includegraphics[height=8cm]{classes}
+  \end{figure}
+\end{frame}
+
+\end{document}

frontend/angular.json

@@ -31,15 +31,22 @@
               {
                 "glob": "**/*",
                 "input": "public"
+              },
+              {
+                "glob": "*.*",
+                "input": "node_modules/leaflet/dist/images",
+                "output": "media"
               }
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "node_modules/bootstrap-icons/font/bootstrap-icons.min.css",
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/leaflet/dist/leaflet.css"
             ],
             "scripts": [
-              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+              "node_modules/bootstrap/dist/js/bootstrap.min.js",
+              "node_modules/leaflet/dist/leaflet.js"
             ]
           },
           "configurations": {

frontend/package.json

@@ -22,6 +22,7 @@
     "@angular/router": "^19.2.7",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
+    "leaflet": "^1.9.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
@@ -32,6 +33,7 @@
     "@angular/compiler-cli": "^19.2.7",
     "@types/bootstrap": "^5.2.10",
     "@types/jasmine": "~5.1.0",
+    "@types/leaflet": "^1.9.17",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

frontend/src/app/app.component.html

@@ -1,4 +1,3 @@
-<router-outlet></router-outlet>
 <tbl-toasts/>
 <tbl-confirm-dialog/>
 <router-outlet/>