Init onepage with js and add redis cache (#9)

* introduce homepage with leaflet map and vue js functionalities + add redis caching

pyproject.toml

@@ -24,6 +24,8 @@ ipython = "^8.22.1"
 drf-yasg = "^1.21.7"
 djangorestframework-gis = "^1.0"
 pre-commit = "^3.6.2"
+django-redis = "^5.4.0"
+python-dotenv = "^1.0.1"
 
 [tool.poetry.group.dev.dependencies]  # https://python-poetry.org/docs/master/managing-dependencies/
 coverage = { extras = ["toml"], version = ">=7.4.1" }

vespadb/nests/static/nests/css/style.css

@@ -0,0 +1,175 @@
+body,
+html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: 'Arial', sans-serif;
+}
+
+#app {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+#navbar {
+    background-color: #4C7742;
+    color: white;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 20px;
+}
+
+#navbar a {
+    color: white;
+    text-decoration: none;
+    padding: 10px;
+    background-color: #36532d;
+    border-radius: 5px;
+}
+
+#navbar a:hover {
+    background-color: #2e4424;
+}
+
+#main-content {
+    display: flex;
+    flex-grow: 1;
+    background-color: #E5E5E5;
+}
+
+#mapid {
+    flex-grow: 2;
+    background-color: #FAFAFA;
+}
+
+#details {
+    flex-basis: 300px;
+    background-color: #F0F0F0;
+    padding: 20px;
+    overflow-y: auto;
+    border-left: 2px solid #DDD;
+}
+
+#filters {
+    background-color: #DDD;
+    padding: 10px;
+    display: flex;
+    justify-content: space-around;
+}
+
+input[type="text"] {
+    padding: 5px;
+    margin: 5px;
+    width: calc(50% - 20px);
+    border: 1px solid #999;
+    border-radius: 5px;
+}
+
+.custom-div-icon {
+    text-align: center;
+    line-height: 30px;
+}
+
+
+select,
+input[type="checkbox"] {
+    margin: 5px 0;
+    padding: 5px;
+    border: 1px solid #999;
+    border-radius: 5px;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0, 0, 0);
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 5% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 400px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    position: fixed;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.modal-content input[type="text"],
+.modal-content input[type="password"],
+.modal-content button {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-bottom: 8px;
+}
+
+.modal-content button {
+    cursor: pointer;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+input[type="text"],
+input[type="password"] {
+    width: calc(100% - 20px);
+    padding: 10px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+}
+
+button {
+    background-color: #4C7742;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+}
+
+button:hover {
+    opacity: 0.8;
+}
+
+input[type="text"],
+input[type="password"] {
+    box-sizing: border-box;
+    padding: 10px;
+    margin: 8px 0;
+    border: 1px solid #ccc;
+    height: 40px;
+    /* Optioneel, afhankelijk van je ontwerp */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}