1 files changed, 169 insertions, 0 deletions
diff --git a/frontend/ts/src/pages/map/footer.ts b/frontend/ts/src/pages/map/footer.ts
new file mode 100644
index 0000000..945bfd4
--- /dev/null
+++ b/frontend/ts/src/pages/map/footer.ts
@@ -0,0 +1,169 @@
+import { h, Html } from 'lib/rx'
+import * as rx from 'lib/rx'
+import * as request from 'request'
+import * as modal from 'ui/modal'
+import * as route from 'route'
+import { Map } from 'models/map'
+import * as form from 'lib/form'
+import * as L from 'lib/loadable'
+
+export function view(mapInit: Map): Html {
+    return h('footer',
+        { className: 'g-Map__Footer' },
+        rx.withState<Map>(mapInit, mapVar =>
+            mapVar.map(map => [
+                map.name,
+                h('div',
+                    { className: 'g-Map__FooterButtons' },
+                    viewRenameButton(map, (map: Map) => mapVar.update(_ => map)),
+                    viewDeleteButton(map)
+                )
+            ])
+        )
+    )
+}
+
+// Rename modal
+
+function viewRenameButton(map: Map, onUpdate: (m: Map) => void): Html {
+    return rx.withState<boolean>(false, showVar => [
+        h('button',
+            { className: 'g-Button',
+              onclick: (event: Event) => showVar.update(_ => true)
+            },
+            'Renommer'
+        ),
+        showVar.map(show => {
+            if (show) {
+                return renameModal({
+                    map,
+                    onUpdate,
+                    onClose: () => showVar.update(_ => false)
+                })
+            }
+        })
+    ])
+}
+
+interface RenameParams {
+    map: Map,
+    onUpdate: (m: Map) => void,
+    onClose: () => void,
+}
+
+function renameModal({ map, onUpdate, onClose }: RenameParams): Html {
+    const initName = map.name
+
+    return modal.view({
+        header: `Renommer la carte ${map.name}`,
+        body: rx.withState2<string, L.Loadable<void>>([initName, L.init], (nameVar, requestVar) =>
+            h('form',
+                {
+                    onsubmit: nameVar.map(name => (event: Event) => {
+                        event.preventDefault()
+                        requestVar.update(_ => L.loading)
+
+                        request
+                            .put<Map>(`/api/maps/${map.id}`, JSON.stringify({ name }))
+                            .then(map => {
+                                requestVar.update(_ => L.loaded(undefined))
+                                onUpdate(map)
+                            })
+                            .catch(({ message }) => requestVar.update(_ => L.failure(message)))
+                    })
+                },
+                form.input({
+                    label: 'Nom',
+                    initValue: initName,
+                    select: true,
+                    required: true,
+                    onUpdate: value => {
+                        nameVar.update(_ => value)
+                        requestVar.update(_ => L.init)
+                    }
+                }),
+                form.error(requestVar),
+                form.submit({
+                    label: 'Renommer',
+                    className: 'g-Button--FullWidth',
+                    requestVar
+                })
+            )
+        ),
+        onClose: onClose
+    })
+}
+
+// Delete modal
+
+function viewDeleteButton(map: Map): Html {
+    return rx.withState<boolean>(false, showVar => [
+        h('button',
+            { className: 'g-Button g-Button--Danger',
+              onclick: (event: Event) => showVar.update(_ => true)
+            },
+            'Supprimer'
+        ),
+        showVar.map(show => {
+            if (show) {
+                return deleteModal({
+                    map,
+                    onClose: () => showVar.update(_ => false)
+                })
+            }
+        })
+    ])
+}
+
+interface DeleteParams {
+    map: Map,
+    onClose: () => void,
+}
+
+function deleteModal({ map, onClose }: DeleteParams): Html {
+    const initName = ''
+
+    return modal.view({
+        className: 'g-Modal--Danger',
+        header: `Supprimer la carte ${map.name} ?`,
+        body: rx.withState2<string, L.Loadable<void>>([initName, L.init], (nameVar, requestVar) =>
+            h('form',
+                {
+                    onsubmit: (event: Event) => {
+                        event.preventDefault()
+                        requestVar.update(_ => L.loading)
+
+                        request
+                            .del_(`/api/maps/${map.id}`)
+                            .then(_ => {
+                                requestVar.update(_ => L.loaded(undefined))
+                                route.push(route.maps)
+                            })
+                            .catch(({ message }) => requestVar.update(_ => L.failure(message)))
+                    }
+                },
+                h('p',
+                    'Veuillez recopier le nom de la carte pour la supprimer : ',
+                    h('b', map.name)
+                ),
+                form.input({
+                    label: 'Nom',
+                    initValue: initName,
+                    select: true,
+                    onUpdate: value => {
+                        nameVar.update(_ => value)
+                        requestVar.update(_ => L.init)
+                    }
+                }),
+                form.error(requestVar),
+                form.submit({
+                    label: 'Supprimer',
+                    className: 'g-Button--Danger g-Button--FullWidth',
+                    disabled: nameVar.map(name => name != map.name),
+                    requestVar
+                })
+            )
+        ),
+        onClose: onClose
+    })
+}