From 1619d171291c8b391553898cd38527a0bc58d0d6 Mon Sep 17 00:00:00 2001 From: Evarin Date: Tue, 16 May 2017 00:22:59 +0200 Subject: [PATCH] Widget de choix des lieux plus clair + modification possible --- avisstage/forms.py | 3 +- avisstage/sass/screen.scss | 94 +++-- avisstage/static/css/screen.css | 345 ++++++++-------- avisstage/static/js/select_lieu.js | 370 ++++++++++++------ .../avisstage/formulaires/stage.html | 8 + .../avisstage/templatetags/widget_lieu.html | 20 +- avisstage/urls.py | 2 +- avisstage/views.py | 48 +++ avisstage/widgets.py | 1 - requirements.txt | 1 + 10 files changed, 578 insertions(+), 314 deletions(-) diff --git a/avisstage/forms.py b/avisstage/forms.py index 16d748e..1fb670e 100644 --- a/avisstage/forms.py +++ b/avisstage/forms.py @@ -93,10 +93,11 @@ class AvisLieuForm(HTMLTrimmerForm): # Création d'un nouveau lieu class LieuForm(forms.ModelForm): coord = LatLonField() + id = forms.IntegerField(widget=forms.widgets.HiddenInput(), required=False) class Meta: model = Lieu - fields = ['nom', 'type_lieu', 'ville', 'pays', 'coord'] + fields = ['id', 'nom', 'type_lieu', 'ville', 'pays', 'coord'] # Widget de feedback class FeedbackForm(forms.Form): diff --git a/avisstage/sass/screen.scss b/avisstage/sass/screen.scss index cfbf2ec..f8c3782 100644 --- a/avisstage/sass/screen.scss +++ b/avisstage/sass/screen.scss @@ -57,6 +57,22 @@ a { transform: translate(-1em, 1em) rotate(-15deg); } +// Feedback + +#feedback-button { + position:fixed; + left:0; + top:30%; + color:#fff; + z-index:4; + background: #000; + padding: 14px; + transform: rotateZ(90deg); + transform-origin: bottom left; +} + +// Cartes + .leaflet-container { z-index: 1; } @@ -680,25 +696,61 @@ div.as-results { // // Widget choix et ajout de lieux -#map_addlieu { - height: 500px; -} - -.lieu-ui { - .map { - height: 400px; - width: 100%; +#lieu_widget { + .lieu-ui { + position: relative; + .map { + height: 400px; + width: 100%; + } + &.hidden { + display: none; + } + .masked { + visibility: hidden; + } } - .hidden { + + .lieu-choixmodif { display: none; } - .masked { - visibility: hidden; - } -} -#avis_lieu_vide { - display:none; + &.modif { + .lieu-choixmodif { + display: unset; + } + } + &.modif, &.attente { + .lieu-ui { + display: none; + } + } + + &.edit { + .lieu-ui { + .lieu-acinput { + display:none; + } + .map { + height: 200px; + } + } + } + + #avis_lieu_vide { + display:none; + } + + .message { + background: lighten($compl, 30); + padding: 5px; + font-style: italic; + font-size: 0.9em; + + &.hidden { + display: none; + } + } } a.lieu-change { @@ -725,18 +777,6 @@ a.lieu-change { max-height: 90vh; } -#feedback-button { - position:fixed; - left:0; - top:30%; - color:#fff; - z-index:4; - background: #000; - padding: 14px; - transform: rotateZ(90deg); - transform-origin: bottom left; -} - #id_stage-thematiques { display: none; diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css index 904cbf2..28683e9 100644 --- a/avisstage/static/css/screen.css +++ b/avisstage/static/css/screen.css @@ -127,35 +127,48 @@ a { transform: translate(-1em, 1em) rotate(-15deg); } -/* line 60, ../../sass/screen.scss */ +/* line 62, ../../sass/screen.scss */ +#feedback-button { + position: fixed; + left: 0; + top: 30%; + color: #fff; + z-index: 4; + background: #000; + padding: 14px; + transform: rotateZ(90deg); + transform-origin: bottom left; +} + +/* line 76, ../../sass/screen.scss */ .leaflet-container { z-index: 1; } -/* line 65, ../../sass/screen.scss */ +/* line 81, ../../sass/screen.scss */ header { background: #72a329; display: flex; justify-content: space-between; align-items: center; } -/* line 71, ../../sass/screen.scss */ +/* line 87, ../../sass/screen.scss */ header #showmenu { display: none; } -/* line 75, ../../sass/screen.scss */ +/* line 91, ../../sass/screen.scss */ header nav { display: inline; } -/* line 77, ../../sass/screen.scss */ +/* line 93, ../../sass/screen.scss */ header nav ul { display: inline-flex; } -/* line 80, ../../sass/screen.scss */ +/* line 96, ../../sass/screen.scss */ header nav ul li { display: inline-table; } -/* line 83, ../../sass/screen.scss */ +/* line 99, ../../sass/screen.scss */ header nav ul li a { text-align: center; display: table-cell; @@ -164,23 +177,23 @@ header nav ul li a { vertical-align: middle; color: #e9f5d6; } -/* line 91, ../../sass/screen.scss */ +/* line 107, ../../sass/screen.scss */ header nav ul li a:hover { background: #446219; } -/* line 99, ../../sass/screen.scss */ +/* line 115, ../../sass/screen.scss */ header a { color: #fff; text-decoration: none; } -/* line 104, ../../sass/screen.scss */ +/* line 120, ../../sass/screen.scss */ header h1 { padding: 15px; word-wrap: none; display: inline-block; } -/* line 113, ../../sass/screen.scss */ +/* line 129, ../../sass/screen.scss */ .content { background: #efefef; width: 900px; @@ -188,38 +201,38 @@ header h1 { padding: 30px; margin: 15px auto; } -/* line 120, ../../sass/screen.scss */ +/* line 136, ../../sass/screen.scss */ .content p { margin: 0.5em 0; } -/* line 124, ../../sass/screen.scss */ +/* line 140, ../../sass/screen.scss */ .content h1 { margin-bottom: 0.6em; } -/* line 132, ../../sass/screen.scss */ +/* line 148, ../../sass/screen.scss */ .condensed-stages li { display: table; width: 100%; background: #fff; margin: 12px; } -/* line 139, ../../sass/screen.scss */ +/* line 155, ../../sass/screen.scss */ .condensed-stages li > *, .condensed-stages li:before { display: table-cell; vertical-align: middle; padding: 15px; } -/* line 144, ../../sass/screen.scss */ +/* line 160, ../../sass/screen.scss */ .condensed-stages li a { width: auto; } -/* line 146, ../../sass/screen.scss */ +/* line 162, ../../sass/screen.scss */ .condensed-stages li a:hover { background: #e08206; color: #fff; } -/* line 151, ../../sass/screen.scss */ +/* line 167, ../../sass/screen.scss */ .condensed-stages li:before { content: ""; text-align: right; @@ -227,58 +240,58 @@ header h1 { opacity: 0.8; color: #000; } -/* line 158, ../../sass/screen.scss */ +/* line 174, ../../sass/screen.scss */ .condensed-stages li.stage-brouillon:before { content: "Brouillon"; background: #f93a93; } -/* line 162, ../../sass/screen.scss */ +/* line 178, ../../sass/screen.scss */ .condensed-stages li.stage-publie:before { content: "Publié"; background: #419be9; } -/* line 166, ../../sass/screen.scss */ +/* line 182, ../../sass/screen.scss */ .condensed-stages li.stage-ajout:before { content: "+"; color: #000; } -/* line 174, ../../sass/screen.scss */ +/* line 190, ../../sass/screen.scss */ .stage-liste li { display: block; } -/* line 176, ../../sass/screen.scss */ +/* line 192, ../../sass/screen.scss */ .stage-liste li.date-maj { font-weight: bold; font-size: 0.9em; padding: 3px 0; } -/* line 181, ../../sass/screen.scss */ +/* line 197, ../../sass/screen.scss */ .stage-liste li.stage { padding: 10px; background: #fff; margin: 10px; } -/* line 186, ../../sass/screen.scss */ +/* line 202, ../../sass/screen.scss */ .stage-liste li.stage h3 { font-size: 1.4em; } -/* line 189, ../../sass/screen.scss */ +/* line 205, ../../sass/screen.scss */ .stage-liste li.stage h3 .auteur { font-family: "Dosis", sans-serif; font-weight: bold; font-size: 0.8em; } -/* line 195, ../../sass/screen.scss */ +/* line 211, ../../sass/screen.scss */ .stage-liste li.stage ul.infos { display: inline; } -/* line 202, ../../sass/screen.scss */ +/* line 218, ../../sass/screen.scss */ ul.infos { margin: 0 -3px; } -/* line 205, ../../sass/screen.scss */ +/* line 221, ../../sass/screen.scss */ ul.infos li { display: inline-block; padding: 5px; @@ -287,27 +300,27 @@ ul.infos li { font-size: 0.9em; border-radius: 4px; } -/* line 213, ../../sass/screen.scss */ +/* line 229, ../../sass/screen.scss */ ul.infos li.thematique { background-color: #1a82dd; color: #fff; } -/* line 217, ../../sass/screen.scss */ +/* line 233, ../../sass/screen.scss */ ul.infos li.matiere { color: #fff; background-color: #8fcc33; } -/* line 221, ../../sass/screen.scss */ +/* line 237, ../../sass/screen.scss */ ul.infos li.lieu { color: #fff; background-color: #f99b20; } -/* line 232, ../../sass/screen.scss */ +/* line 248, ../../sass/screen.scss */ article.stage { font-weight: normal; } -/* line 235, ../../sass/screen.scss */ +/* line 251, ../../sass/screen.scss */ article.stage h2 { background: #ddda78; color: #000; @@ -316,7 +329,7 @@ article.stage h2 { margin-bottom: 25px; text-shadow: -3px 3px 0 rgba(255, 255, 255, 0.3); } -/* line 243, ../../sass/screen.scss */ +/* line 259, ../../sass/screen.scss */ article.stage h3 { border-bottom: 2px solid #cb954e; margin-left: -25px; @@ -326,58 +339,58 @@ article.stage h3 { color: #000; text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.1); } -/* line 254, ../../sass/screen.scss */ +/* line 270, ../../sass/screen.scss */ article.stage #stage-map { height: 300px; width: 100%; } -/* line 259, ../../sass/screen.scss */ +/* line 275, ../../sass/screen.scss */ article.stage section { background: #eee; padding: 14px; max-width: 600px; margin: 30px auto; } -/* line 265, ../../sass/screen.scss */ +/* line 281, ../../sass/screen.scss */ article.stage section:first-child { margin-top: 0; } -/* line 267, ../../sass/screen.scss */ +/* line 283, ../../sass/screen.scss */ article.stage section:first-child h3 { margin-top: 0; } -/* line 272, ../../sass/screen.scss */ +/* line 288, ../../sass/screen.scss */ article.stage section.misc { padding-top: 0; } -/* line 276, ../../sass/screen.scss */ +/* line 292, ../../sass/screen.scss */ article.stage section .chapo, article.stage section .avis-texte { margin-bottom: 15px; background: #fff; padding: 20px; } -/* line 281, ../../sass/screen.scss */ +/* line 297, ../../sass/screen.scss */ article.stage section .chapo { font-size: 1.1em; font-weight: 500; font-variant: small-caps; } -/* line 286, ../../sass/screen.scss */ +/* line 302, ../../sass/screen.scss */ article.stage section .avis-texte { border-left: 1px solid #ccc; padding-left: 15px; } -/* line 291, ../../sass/screen.scss */ +/* line 307, ../../sass/screen.scss */ article.stage section .plusmoins { max-width: 600px; margin: 15px auto; } -/* line 295, ../../sass/screen.scss */ +/* line 311, ../../sass/screen.scss */ article.stage section .plusmoins > div { display: table; width: 100%; } -/* line 299, ../../sass/screen.scss */ +/* line 315, ../../sass/screen.scss */ article.stage section .plusmoins > div:before { content: " "; width: 100px; @@ -386,72 +399,72 @@ article.stage section .plusmoins > div:before { text-align: right; padding-right: 12px; } -/* line 308, ../../sass/screen.scss */ +/* line 324, ../../sass/screen.scss */ article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before { display: table-cell; } -/* line 312, ../../sass/screen.scss */ +/* line 328, ../../sass/screen.scss */ article.stage section .plusmoins > div > div { padding: 15px; color: #fff; } -/* line 315, ../../sass/screen.scss */ +/* line 331, ../../sass/screen.scss */ article.stage section .plusmoins > div > div h4 { font-weight: normal; margin-left: -5px; font-size: 0.9em; opacity: 0.9; } -/* line 321, ../../sass/screen.scss */ +/* line 337, ../../sass/screen.scss */ article.stage section .plusmoins > div > div p { font-weight: bold; margin: 2px; } -/* line 329, ../../sass/screen.scss */ +/* line 345, ../../sass/screen.scss */ article.stage section .plusmoins .plus > div { background: #1775c6; } -/* line 332, ../../sass/screen.scss */ +/* line 348, ../../sass/screen.scss */ article.stage section .plusmoins .plus:before { content: "Les +"; vertical-align: bottom; color: #1567af; } -/* line 339, ../../sass/screen.scss */ +/* line 355, ../../sass/screen.scss */ article.stage section .plusmoins .moins > div { background: #df076c; } -/* line 342, ../../sass/screen.scss */ +/* line 358, ../../sass/screen.scss */ article.stage section .plusmoins .moins:before { content: "Les -"; vertical-align: top; color: #c70660; } -/* line 354, ../../sass/screen.scss */ +/* line 370, ../../sass/screen.scss */ .article-wrapper { display: table; margin-left: -15px; } -/* line 358, ../../sass/screen.scss */ +/* line 374, ../../sass/screen.scss */ .article-wrapper .toc-wrapper, .article-wrapper article { display: table-cell; vertical-align: top; } -/* line 362, ../../sass/screen.scss */ +/* line 378, ../../sass/screen.scss */ .article-wrapper .toc-wrapper { max-width: 250px; width: 25%; background: #f6f6f6; padding: 5px; } -/* line 368, ../../sass/screen.scss */ +/* line 384, ../../sass/screen.scss */ .article-wrapper .toc { position: -webkit-sticky; position: sticky; top: 12px; } -/* line 373, ../../sass/screen.scss */ +/* line 389, ../../sass/screen.scss */ .article-wrapper .toc a { display: block; color: inherit; @@ -460,46 +473,46 @@ article.stage section .plusmoins .moins:before { padding: 7px; line-height: 1; } -/* line 381, ../../sass/screen.scss */ +/* line 397, ../../sass/screen.scss */ .article-wrapper .toc a:hover { background-color: #8fcc33; } -/* line 385, ../../sass/screen.scss */ +/* line 401, ../../sass/screen.scss */ .article-wrapper .toc .toc-h1 a { font-weight: 900; } -/* line 388, ../../sass/screen.scss */ +/* line 404, ../../sass/screen.scss */ .article-wrapper .toc .toc-h2 { margin-top: 15px; } -/* line 391, ../../sass/screen.scss */ +/* line 407, ../../sass/screen.scss */ .article-wrapper .toc .toc-h3 a { font-weight: 300; } -/* line 394, ../../sass/screen.scss */ +/* line 410, ../../sass/screen.scss */ .article-wrapper .toc .toc-active a { background-color: #d2ebad; } -/* line 402, ../../sass/screen.scss */ +/* line 418, ../../sass/screen.scss */ .edit-box { background: #eee; margin: 10px; padding: 10px 20px; text-align: center; } -/* line 408, ../../sass/screen.scss */ +/* line 424, ../../sass/screen.scss */ .edit-box.public { background: #cae3f9; border: 1px solid #125b9b; } -/* line 413, ../../sass/screen.scss */ +/* line 429, ../../sass/screen.scss */ .edit-box.prive { background: #fdcfe4; border: 1px solid #ad0654; } -/* line 426, ../../sass/screen.scss */ +/* line 442, ../../sass/screen.scss */ input, textarea, select, div.tinymce, option, optgroup:before { background: #fff; font-size: 1em; @@ -509,13 +522,13 @@ input, textarea, select, div.tinymce, option, optgroup:before { padding: 5px; text-align: left; } -/* line 435, ../../sass/screen.scss */ +/* line 451, ../../sass/screen.scss */ input:focus, input.mce-edit-focus, textarea:focus, textarea.mce-edit-focus, select:focus, select.mce-edit-focus, div.tinymce:focus, div.tinymce.mce-edit-focus, option:focus, option.mce-edit-focus, optgroup:before:focus, optgroup:before.mce-edit-focus { background-color: #e9f5d6; outline: none; } -/* line 442, ../../sass/screen.scss */ +/* line 458, ../../sass/screen.scss */ input[type='text'], input[type='password'], input[type='email'], textarea, select { border: none; @@ -525,7 +538,7 @@ input[type='email'], textarea, select { transition: border 1s ease-out, background 1s ease-out; } -/* line 451, ../../sass/screen.scss */ +/* line 467, ../../sass/screen.scss */ select { -moz-appearance: none; appearance: none; @@ -533,21 +546,21 @@ select { margin-right: 5px; cursor: pointer; } -/* line 458, ../../sass/screen.scss */ +/* line 474, ../../sass/screen.scss */ select option { padding: 3px; white-space: pre-wrap; } -/* line 464, ../../sass/screen.scss */ +/* line 480, ../../sass/screen.scss */ select optgroup option { padding-left: 10px; } -/* line 467, ../../sass/screen.scss */ +/* line 483, ../../sass/screen.scss */ select optgroup:before { font-weight: bold; } -/* line 473, ../../sass/screen.scss */ +/* line 489, ../../sass/screen.scss */ input[type="submit"], .btn { font: 19px "Dosis", sans-serif; background-color: #8fcc33; @@ -560,14 +573,14 @@ input[type="submit"], .btn { margin-right: 0; } -/* line 485, ../../sass/screen.scss */ +/* line 501, ../../sass/screen.scss */ p input[type="submit"], p .btn, h1 .btn { display: inline-block; } -/* line 491, ../../sass/screen.scss */ +/* line 507, ../../sass/screen.scss */ .edit-btn { border-color: #706c00; color: #000; @@ -576,14 +589,14 @@ h1 .btn { background-origin: content-box; background-size: contain; } -/* line 499, ../../sass/screen.scss */ +/* line 515, ../../sass/screen.scss */ .edit-btn:after { content: ""; width: 30px; display: inline-block; } -/* line 506, ../../sass/screen.scss */ +/* line 522, ../../sass/screen.scss */ textarea, div.tinymce { border: none; border-left: 1px solid #8fcc33; @@ -592,20 +605,20 @@ textarea, div.tinymce { transition: border 1s ease-out, background 1s ease-out; } -/* line 514, ../../sass/screen.scss */ +/* line 530, ../../sass/screen.scss */ textarea { height: 200px; resize: vertical; } -/* line 522, ../../sass/screen.scss */ +/* line 538, ../../sass/screen.scss */ form .field { margin: 5px 0; display: flex; background: #fff; padding: 10px; } -/* line 528, ../../sass/screen.scss */ +/* line 544, ../../sass/screen.scss */ form .field label, form .field .label { display: inline-block; width: 250px; @@ -614,33 +627,33 @@ form .field label, form .field .label { padding-top: 5px; flex-shrink: 0; } -/* line 536, ../../sass/screen.scss */ +/* line 552, ../../sass/screen.scss */ form .field label { font-family: Podkova, serif; font-weight: bold; } -/* line 540, ../../sass/screen.scss */ +/* line 556, ../../sass/screen.scss */ form .field .help_text { font-style: italic; font-size: 0.9em; } -/* line 544, ../../sass/screen.scss */ +/* line 560, ../../sass/screen.scss */ form .field .input { display: inline-block; flex-grow: 1; margin-right: 10px; } -/* line 554, ../../sass/screen.scss */ +/* line 570, ../../sass/screen.scss */ ul.as-selections { display: flex; flex-wrap: wrap; } -/* line 558, ../../sass/screen.scss */ +/* line 574, ../../sass/screen.scss */ ul.as-selections li { display: inline-block; } -/* line 562, ../../sass/screen.scss */ +/* line 578, ../../sass/screen.scss */ ul.as-selections .as-selection-item { padding: 0 5px; background: #f99b20; @@ -649,52 +662,52 @@ ul.as-selections .as-selection-item { border-radius: 2px; font-weight: 500; } -/* line 570, ../../sass/screen.scss */ +/* line 586, ../../sass/screen.scss */ ul.as-selections .as-selection-item a.as-close { color: #fff; -webkit-cursor: pointer; cursor: pointer; margin-right: 5px; } -/* line 577, ../../sass/screen.scss */ +/* line 593, ../../sass/screen.scss */ ul.as-selections .as-selection-item.selected { background: #8fcc33; } -/* line 582, ../../sass/screen.scss */ +/* line 598, ../../sass/screen.scss */ ul.as-selections .as-original { flex-grow: 1; min-width: 200px; } -/* line 586, ../../sass/screen.scss */ +/* line 602, ../../sass/screen.scss */ ul.as-selections .as-original input { width: 100%; } -/* line 592, ../../sass/screen.scss */ +/* line 608, ../../sass/screen.scss */ div.as-results { position: relative; } -/* line 594, ../../sass/screen.scss */ +/* line 610, ../../sass/screen.scss */ div.as-results ul { position: absolute; width: 100%; background: #fff; border: 1px solid #d2ebad; } -/* line 601, ../../sass/screen.scss */ +/* line 617, ../../sass/screen.scss */ div.as-results ul li { padding: 3px 5px; } -/* line 607, ../../sass/screen.scss */ +/* line 623, ../../sass/screen.scss */ div.as-results ul li.as-result-item.active { background: #fddeb5; } -/* line 612, ../../sass/screen.scss */ +/* line 628, ../../sass/screen.scss */ div.as-results ul li.as-message { font-style: italic; } -/* line 622, ../../sass/screen.scss */ +/* line 638, ../../sass/screen.scss */ .window { display: none; position: fixed; @@ -705,11 +718,11 @@ div.as-results ul li.as-message { left: 0; z-index: 50; } -/* line 632, ../../sass/screen.scss */ +/* line 648, ../../sass/screen.scss */ .window.visible { display: block; } -/* line 636, ../../sass/screen.scss */ +/* line 652, ../../sass/screen.scss */ .window .window-bg { background: #000; opacity: 0.7; @@ -720,7 +733,7 @@ div.as-results ul li.as-message { top: 0; z-index: -1; } -/* line 647, ../../sass/screen.scss */ +/* line 663, ../../sass/screen.scss */ .window .window-content { position: relative; margin: 0 auto; @@ -734,11 +747,11 @@ div.as-results ul li.as-message { max-height: 100%; overflow: auto; } -/* line 661, ../../sass/screen.scss */ +/* line 677, ../../sass/screen.scss */ .window .window-content form label, .window .window-content form .label { width: 150px; } -/* line 667, ../../sass/screen.scss */ +/* line 683, ../../sass/screen.scss */ .window .window-closer { position: absolute; top: 0; @@ -746,36 +759,65 @@ div.as-results ul li.as-message { padding: 12px; z-index: 3; } -/* line 673, ../../sass/screen.scss */ +/* line 689, ../../sass/screen.scss */ .window .window-closer:after { content: "×"; } -/* line 683, ../../sass/screen.scss */ -#map_addlieu { - height: 500px; +/* line 700, ../../sass/screen.scss */ +#lieu_widget .lieu-ui { + position: relative; } - -/* line 688, ../../sass/screen.scss */ -.lieu-ui .map { +/* line 702, ../../sass/screen.scss */ +#lieu_widget .lieu-ui .map { height: 400px; width: 100%; } -/* line 692, ../../sass/screen.scss */ -.lieu-ui .hidden { +/* line 706, ../../sass/screen.scss */ +#lieu_widget .lieu-ui.hidden { display: none; } -/* line 695, ../../sass/screen.scss */ -.lieu-ui .masked { +/* line 709, ../../sass/screen.scss */ +#lieu_widget .lieu-ui .masked { visibility: hidden; } - -/* line 700, ../../sass/screen.scss */ -#avis_lieu_vide { +/* line 714, ../../sass/screen.scss */ +#lieu_widget .lieu-choixmodif { + display: none; +} +/* line 719, ../../sass/screen.scss */ +#lieu_widget.modif .lieu-choixmodif { + display: unset; +} +/* line 724, ../../sass/screen.scss */ +#lieu_widget.modif .lieu-ui, #lieu_widget.attente .lieu-ui { + display: none; +} +/* line 731, ../../sass/screen.scss */ +#lieu_widget.edit .lieu-ui .lieu-acinput { + display: none; +} +/* line 734, ../../sass/screen.scss */ +#lieu_widget.edit .lieu-ui .map { + height: 200px; +} +/* line 740, ../../sass/screen.scss */ +#lieu_widget #avis_lieu_vide { + display: none; +} +/* line 744, ../../sass/screen.scss */ +#lieu_widget .message { + background: #fddeb5; + padding: 5px; + font-style: italic; + font-size: 0.9em; +} +/* line 750, ../../sass/screen.scss */ +#lieu_widget .message.hidden { display: none; } -/* line 704, ../../sass/screen.scss */ +/* line 756, ../../sass/screen.scss */ a.lieu-change { color: #fff; background: #f99b20; @@ -788,38 +830,25 @@ a.lieu-change { border-radius: 5px; margin-right: 7px; } -/* line 716, ../../sass/screen.scss */ +/* line 768, ../../sass/screen.scss */ a.lieu-change.ajout:before { content: "+"; margin-right: 5px; } -/* line 722, ../../sass/screen.scss */ +/* line 774, ../../sass/screen.scss */ #stages-map { width: 100%; height: 600px; max-height: 90vh; } -/* line 728, ../../sass/screen.scss */ -#feedback-button { - position: fixed; - left: 0; - top: 30%; - color: #fff; - z-index: 4; - background: #000; - padding: 14px; - transform: rotateZ(90deg); - transform-origin: bottom left; -} - -/* line 741, ../../sass/screen.scss */ +/* line 781, ../../sass/screen.scss */ #id_stage-thematiques { display: none; } -/* line 747, ../../sass/screen.scss */ +/* line 787, ../../sass/screen.scss */ .homeh1 { display: flex; justify-content: space-between; @@ -829,22 +858,22 @@ a.lieu-change.ajout:before { border-bottom: 3px solid #000; margin-bottom: 15px; } -/* line 756, ../../sass/screen.scss */ +/* line 796, ../../sass/screen.scss */ .homeh1 > * { display: inline-block; } -/* line 759, ../../sass/screen.scss */ +/* line 799, ../../sass/screen.scss */ .homeh1 p { text-align: right; } -/* line 764, ../../sass/screen.scss */ +/* line 804, ../../sass/screen.scss */ .betacadre { background: #fa6cae; padding: 10px; } -/* line 769, ../../sass/screen.scss */ +/* line 809, ../../sass/screen.scss */ .entrer { background: #fff; max-width: 500px; @@ -853,82 +882,82 @@ a.lieu-change.ajout:before { margin: 15px auto; } -/* line 777, ../../sass/screen.scss */ +/* line 817, ../../sass/screen.scss */ article.promo { display: block; font-size: 1.1em; } -/* line 781, ../../sass/screen.scss */ +/* line 821, ../../sass/screen.scss */ article.promo .explications { display: table; } -/* line 784, ../../sass/screen.scss */ +/* line 824, ../../sass/screen.scss */ article.promo .explications:first-child { direction: rtl; } -/* line 786, ../../sass/screen.scss */ +/* line 826, ../../sass/screen.scss */ article.promo .explications:first-child > * { direction: ltr; } -/* line 791, ../../sass/screen.scss */ +/* line 831, ../../sass/screen.scss */ article.promo .explications > div { display: table-cell; vertical-align: middle; text-align: center; } -/* line 796, ../../sass/screen.scss */ +/* line 836, ../../sass/screen.scss */ article.promo .explications > div p { margin: 15px 15px; } -/* line 804, ../../sass/screen.scss */ +/* line 844, ../../sass/screen.scss */ .faq-toc { display: block; max-width: 700px; margin: 0 auto; } -/* line 808, ../../sass/screen.scss */ +/* line 848, ../../sass/screen.scss */ .faq-toc ul { margin: 20px; } -/* line 812, ../../sass/screen.scss */ +/* line 852, ../../sass/screen.scss */ .faq-toc ul li a { color: #000; display: block; padding: 5px; } -/* line 818, ../../sass/screen.scss */ +/* line 858, ../../sass/screen.scss */ .faq-toc ul li.toc-h1 { display: none; } -/* line 822, ../../sass/screen.scss */ +/* line 862, ../../sass/screen.scss */ .faq-toc ul li.toc-h2 a { background: #fcc883; } -/* line 826, ../../sass/screen.scss */ +/* line 866, ../../sass/screen.scss */ .faq-toc ul li.toc-h3 a { padding-left: 10px; background: #fff; font-weight: normal; } -/* line 832, ../../sass/screen.scss */ +/* line 872, ../../sass/screen.scss */ .faq-toc ul li a:hover { color: #fff; background: #f99b20 !important; } -/* line 841, ../../sass/screen.scss */ +/* line 881, ../../sass/screen.scss */ .faq article { background: #fff; padding: 15px; } -/* line 844, ../../sass/screen.scss */ +/* line 884, ../../sass/screen.scss */ .faq article h2 { background: #fcc883; margin: -15px; padding: 15px; } -/* line 850, ../../sass/screen.scss */ +/* line 890, ../../sass/screen.scss */ .faq article h3 { background: #1a82dd; color: #fff; @@ -936,15 +965,15 @@ article.promo .explications > div p { margin-top: 30px; padding: 10px 15px; } -/* line 857, ../../sass/screen.scss */ +/* line 897, ../../sass/screen.scss */ .faq article h3:nth-child(2) { margin-top: 0; } -/* line 862, ../../sass/screen.scss */ +/* line 902, ../../sass/screen.scss */ .faq article ul { padding-left: 20px; } -/* line 864, ../../sass/screen.scss */ +/* line 904, ../../sass/screen.scss */ .faq article ul li { list-style: initial; } diff --git a/avisstage/static/js/select_lieu.js b/avisstage/static/js/select_lieu.js index 9ce5ef5..ae82436 100644 --- a/avisstage/static/js/select_lieu.js +++ b/avisstage/static/js/select_lieu.js @@ -1,94 +1,29 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) { + + // + // INITIALISATION + // + + // Éléments d'interface à construire var map, input, autocomplete, map_el; + + // Éléments d'interface déjà présents var $el = $(target); var ui_el = $el.find('.lieu-ui'); var form_el = $el.find('form'); var content_el = $el.find('.window-content'); - var ui_ready = false; - var lieux_db = {}; var message_el = $el.find(".lieu-message"); var closer = $el.find(".window-closer"); + var cmodif_el = $el.find(".lieu-choixmodif"); - form_el.detach(); - form_el.on("submit", nouveauLieu); + // Variables globales + var ui_ready = false; + var lieux_db = {}; + var ui_mode_creation = true; + var modiflieu_id; + var form_marqueur; - function initUI(){ - $.each(ui_el.children(), function(i, item){$(item).remove();}); - - closer.on("click", closeWidget).attr("href", "javascript:void(0);"); - $el.find(".window-bg").on("click", closeWidget); - - map_el = $("
", {class: "map"}); - input = $("", - {type:"text", - placeholder:"Chercher un établissement..."}); - - ui_el.append(input); - ui_el.append(map_el); - - // Affiche la carte - map = L.map(map_el[0]).setView([48.8422411,2.3430553], 13); - var layer = new L.StamenTileLayer("terrain"); - map.addLayer(layer); - - // Autocomplete - autocomplete = new google.maps.places.Autocomplete(input[0]); - autocomplete.setTypes(["geocode", "establishment"]); - autocomplete.addListener('place_changed', handlePlaceSearch); - } - - function showMessage(message) { - content_el.find(".message").text(message); - } - - function hideMessage() { - showMessage(""); - } - - function setLieuOrigine (lieu) { - map.panTo(lieu.coord); - lieuSurCarte(lieu, greenIcon); - } - - function handleLieuOrigine(data) { - hideMessage(); - lieux_db[data.id] = data; - setLieuOrigine(data); - askForSuggestions(data.coord); - } - - this.showWidget = function(lieu_id) { - $el.addClass("visible").removeClass("ajout"); - if(!ui_ready) - initUI(); - hideMessage(); - ui_el.removeClass("hidden"); - form_el.detach(); - if (lieu_id === undefined) { - $el.find("h3").text("Ajouter un lieu"); - map_el.addClass("masked"); - } else { - lieu_id = lieu_id * 1; - $el.find("h3").text("Modifier le lieu"); - if(lieux_db[lieu_id] === undefined) { - $.getJSON(API_LIEU + lieu_id + "/?format=json", - handleLieuOrigine); - showMessage("Chargement..."); - ui_el.addClass("hidden"); - } else { - handleLieuOrigine(lieux_db[lieu_id]); - } - } - } - - function closeWidget () { - $el.removeClass("visible"); - } - - this.closeWidget = closeWidget; - - - // Icones + // TODO : icônes mieux gérées function makeIcon(couleur){ return L.icon({ iconUrl: STATIC_ROOT + 'images/marker-'+couleur+'.png', @@ -101,6 +36,80 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) { var redIcon = makeIcon('red'); var blueIcon = makeIcon('blue'); + // Cache le formulaire d'édition + form_el.detach(); + form_el.on("submit", sendForm); + + // Initialise l'interface + function initUI(){ + // Suppression de l'interface déjà existante (au cas où) + $.each(ui_el.children(), function(i, item){$(item).remove();}); + + // Éléments de recherche + map_el = $("
", {class: "map"}); + input = $("", + {type:"text", + placeholder:"Chercher un établissement...", + class:"lieu-acinput"}); + + ui_el.append(input); + ui_el.append(map_el); + + // Affiche la carte + map = L.map(map_el[0]).setView([48.8422411,2.3430553], 13); + var layer = new L.StamenTileLayer("terrain"); + map.addLayer(layer); + + // Autocomplete + autocomplete = new google.maps.places.Autocomplete(input[0]); + autocomplete.setTypes(["geocode", "establishment"]); + + // Évènements + closer.on("click", closeWidget).attr("href", "javascript:void(0);"); + $el.find(".window-bg").on("click", closeWidget); + + autocomplete.addListener('place_changed', handlePlaceSearch); + + cmodif_el.find(".lieu-choixedit").on("click", modifEditLieu); + cmodif_el.find(".lieu-choixautre").on("click", modifChoixLieu); + } + + // Change l'interface selon les besoins + function setUIMode(mode) { + $el.removeClass("ajout edit modif attente"); + map.invalidateSize(); + switch(mode) { + case "select": + case "change": + $el.addClass("select"); + break; + case "ajout": + case "edit": + $el.addClass("edit"); + break; + case "modif": + $el.addClass("modif"); + break; + case "attente": + $el.addClass("attente"); + break; + } + } + + // Messages + function showMessage(message) { + content_el.find(".message").text(message); + content_el.find(".message").removeClass("hidden"); + } + + function hideMessage() { + content_el.find(".message").addClass("hidden"); + } + + // + // Carte et autocomplete + // + // Callback de l'autocomplete function handlePlaceSearch() { var place = autocomplete.getPlace(); @@ -114,7 +123,7 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) { lieux_db.suggestion = undefined; } - // Processing du lieu + // Lecture du lieu var data = {}; $.each(place.address_components, function(i, obj) { for (var j=0; j").append($("

").text(data.nom)) .append($("

").text(data.ville+", "+data.pays_nom)); if (data.num_stages !== undefined) @@ -204,12 +222,150 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) { marqueur.bindPopup(desc[0]).addTo(map); } + // Remet le marqueur à sa place originale (s'il a été déplacé) function resetOrigLieu() { var data = this._lieustage_data; data.marqueur.setLatLng(data.orig_coord); map.panTo(data.orig_coord); } + // + // EDITION + // + + // Affichage du formulaire + function showForm(choix, modification) { + lieux_db.lieufocus = choix; + content_el.append(form_el); + form_el.find("#id_nom").val(choix.nom); + form_el.find("#id_ville").val(choix.ville); + form_el.find("#id_pays").val(choix.pays); + form_el.find("#id_coord_0").val(choix.coord.lat); + form_el.find("#id_coord_1").val(choix.coord.lng); + if (modification == true) { + setUIMode("ajout"); + form_el.find("#id_id").val(choix.id); + form_el.find("h3").text("Modifier un lieu"); + } else { + setUIMode("edit"); + form_el.find("#id_id").val(''); + form_el.find("h3").text("Créer un lieu"); + } + } + + // Envoi du formulaire + function sendForm() { + setUIMode("attente"); + var coord = lieux_db.lieufocus.marqueur.getLatLng(); + form_el.find("#id_coord_0").val(coord.lat); + form_el.find("#id_coord_1").val(coord.lng); + $.post(form_el.attr("action"), + form_el.serialize(), + onFormSent); + form_el.detach(); + showMessage("Envoi en cours..."); + return false; + } + + function onFormSent(data) { + console.log(data); + if(data.success == false) { + setUIMode("edit"); + content_el.find(".message").text("Erreur : "+data.errors); + content_el.append(form_el); + } else { + // Effacement des données (potentiellement) obsolètes + if(lieux_db.lieufocus.id !== undefined) { + lieux_db[lieux_db.lieufocus.id] = undefined; + } + lieux_db.lieufocus.id = data.id; + lieux_db.lieufocus.nom = form_el.find("#id_nom").val(); + callback(lieux_db.lieufocus); + } + } + + // + // MODIFICATION + // + // Callback : quand le lieu à modifier est chargé + function setLieuModif(data) { + setUIMode("modif") + hideMessage(); + cmodif_el.find(".lieu-choixrappel").text(data.nom); + + // Préparation de la carte + lieux_db[data.id] = data; + } + + // Modifier simplement les infos du lieu + function modifEditLieu() { + setUIMode("edit"); + var lieu = lieux_db[modiflieu_id]; + + lieu.fromSuggestion = true; + map.panTo(lieu.coord); + lieuSurCarte(lieu, greenIcon); + + showForm(lieu, true); + } + + // Choisir un autre lieu + function modifChoixLieu() { + setUIMode("change"); + var lieu = lieux_db[modiflieu_id]; + + lieu.fromSuggestion = false; + map.panTo(lieu.coord); + lieuSurCarte(lieu, greenIcon); + + askForSuggestions(lieu.coord); + } + + + // Méthodes publiques : affichage de la fenêtre + this.showWidget = function(lieu_id) { + // Mise en place de l'interface + if(!ui_ready) + initUI(); + + // Nettoyage + hideMessage(); + + $el.addClass("visible"); + setUIMode("default"); + form_el.detach(); + + // Adaptation à la demande + if (lieu_id === undefined) { + // Choix d'un nouveau lieu : pas grand-chose à faire + ui_mode_creation = true; + $el.find("h3").text("Ajouter un lieu"); + map_el.addClass("masked"); + } else { + // Lieu déjà existant + lieu_id = lieu_id * 1; + ui_mode_creation = false; + modiflieu_id = lieu_id; + $el.find("h3").text("Modifier le lieu"); + + // Chargement des infos + if(lieux_db[lieu_id] === undefined) { + $.getJSON(API_LIEU + lieu_id + "/?format=json", + setLieuModif); + showMessage("Chargement..."); + } else { + setLieuModif(lieux_db[lieu_id]); + } + } + } + + // Fermeture du widget + function closeWidget () { + $el.removeClass("visible"); + } + this.closeWidget = closeWidget; + + // Le lieu est choisi, on appelle le callback function choixLieuStage() { var choix = this._lieustage_data; if(!choix.fromSuggestion) @@ -217,38 +373,4 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) { else showForm(choix); } - - function showForm(choix) { - $el.addClass("ajout"); - content_el.append(form_el); - form_el.find("#id_nom").val(choix.nom); - form_el.find("#id_ville").val(choix.ville); - form_el.find("#id_pays").val(choix.pays); - form_el.find("#id_coord_0").val(choix.coord.lat); - form_el.find("#id_coord_1").val(choix.coord.lng); - } - - function nouveauLieu() { - var coord = lieux_db.suggestion.marqueur.getLatLng(); - form_el.find("#id_coord_0").val(coord.lat); - form_el.find("#id_coord_1").val(coord.lng); - $.post(form_el.attr("action")+"?format=json", - form_el.serialize(), - onLieuCreated); - form_el.detach(); - showMessage("Envoi en cours..."); - return false; - } - - function onLieuCreated(data) { - console.log(data); - if(data.success = false) { - content_el.find(".message").text("Erreur : "+data.errors); - content_el.append(form_el); - } else { - lieux_db.suggestion.id = data.id; - lieux_db.suggestion.nom = form_el.find("#id_nom").val(); - callback(lieux_db.suggestion); - } - } } diff --git a/avisstage/templates/avisstage/formulaires/stage.html b/avisstage/templates/avisstage/formulaires/stage.html index 629fc4e..813c0be 100644 --- a/avisstage/templates/avisstage/formulaires/stage.html +++ b/avisstage/templates/avisstage/formulaires/stage.html @@ -12,6 +12,13 @@ diff --git a/avisstage/templates/avisstage/templatetags/widget_lieu.html b/avisstage/templates/avisstage/templatetags/widget_lieu.html index a4a000a..1917d7a 100644 --- a/avisstage/templates/avisstage/templatetags/widget_lieu.html +++ b/avisstage/templates/avisstage/templatetags/widget_lieu.html @@ -3,15 +3,31 @@

- +

Choisir un lieu

+

Restez général dans le lieu : choisissez l'université plutôt que le laboratoire, l'incubateur plutôt que la startup...

+
+ + {# UI avec carte et autocomplete #}
+ + {# En cas de modification #} +
+

Que voulez-vous faire pour le lieu :  ?

+ +
+ + {# Formulaire de création/modification #}
{% load staticfiles %}
-

Ajouter un lieu

+

Ajouter un lieu

+

Vous pouvez déplacer le curseur pour indiquer précisément la bonne position

{% csrf_token %} {% for field in form.hidden_fields %} {{ field }} diff --git a/avisstage/urls.py b/avisstage/urls.py index a4fa716..4561701 100644 --- a/avisstage/urls.py +++ b/avisstage/urls.py @@ -17,7 +17,7 @@ urlpatterns = [ url(r'^stage/(?P\w+)/publication/$', views.publier_stage, name='stage_publication'), url(r'^stages/majs/$', views.StageListe.as_view(), name='stage_majs'), - url(r'^lieu/ajout/$', views.LieuAjout.as_view(), name='lieu_ajout'), + url(r'^lieu/save/$', views.save_lieu, name='lieu_ajout'), url(r'^profil/show/(?P\w+)/$', views.ProfilView.as_view(), name='profil'), url(r'^profil/edit/$', views.ProfilEdit.as_view(), name='profil_edit'), diff --git a/avisstage/views.py b/avisstage/views.py index a25a207..e8d10c7 100644 --- a/avisstage/views.py +++ b/avisstage/views.py @@ -15,6 +15,8 @@ from django.db.models import Q from avisstage.models import Normalien, Stage, Lieu, AvisLieu, AvisStage from avisstage.forms import StageForm, LieuForm, AvisStageForm, AvisLieuForm, FeedbackForm +import random, math + # # LECTURE # @@ -132,6 +134,52 @@ def manage_stage(request, pk=None): # Ajout d'un lieu de stage #login_required + +# Stage +@login_required +def save_lieu(request): + normalien = request.user.profil + + if request.method == "POST": + pk = request.POST.get("id", None) + print request.POST + jitter = False + if pk is None or pk == '': + lieu = Lieu() + else: + # Modification du lieu + lieu = get_object_or_404(Lieu, pk=pk) + + # On regarde si les stages associés à ce lieu "appartiennent" tous à l'utilisateur + not_same_user = lieu.stages.exclude(auteur=normalien).count() + + # Si d'autres personnes ont un stage à cet endroit, on crée un nouveau lieu, un peu à côté + if not_same_user > 0: + lieu = Lieu() + # Servira à bouger un peu le lieu + jitter = True + + # Lecture des données + form = LieuForm(request.POST, instance=lieu) + + # Validation et enregistrement + if form.is_valid(): + lieu = form.save() + if jitter: + cdx, cdy = lieu.coord.get_coords() + ang = random.random() * 6.29; + rad = (random.random() + 0.5) * 3e-4 + cdx += math.cos(ang) * rad; + cdy += math.sin(ang) * rad; + lieu.coord.set_coords((cdx, cdy)) + lieu.save() + return JsonResponse({"success": True, "id": lieu.id}) + else: + return JsonResponse({"success": False, + "errors": form.errors}) + else: + return JsonResponse({"erreur": "Aucune donnée POST"}) + class LieuAjout(CreateView, LoginRequiredMixin): model = Lieu form_class = LieuForm diff --git a/avisstage/widgets.py b/avisstage/widgets.py index 4543c29..020807f 100644 --- a/avisstage/widgets.py +++ b/avisstage/widgets.py @@ -45,4 +45,3 @@ class LatLonField(forms.MultiValueField): point_str = 'POINT(%f %f)'%tuple(reversed(data_list)) return ';'.join([srid_str, point_str]) return None - diff --git a/requirements.txt b/requirements.txt index 97ef6e4..145279f 100644 --- a/requirements.txt +++ b/requirements.txt @@ -7,3 +7,4 @@ django-braces django-taggit-autosuggest pytz django-tastypie +lxml