index.html 10.5 KB
Newer Older
1
<svelte:head>
2
  <title>{config.title}</title>
3 4
</svelte:head>

5
<SearchForm searchPath="recherche" {term}/>
6

7 8 9 10
<section class="mx-2">
  <h1 class="my-4">Dossiers législatifs en cours</h1>

  <ul class="list-reset">
11 12 13 14 15 16
    {#each dossiersActuelsKnitted as dossierKnitted}
      {#if dossierKnitted.assemblee !== null}
        <!-- TODO: Remove this dummy `each`. -->
        {#each [dossierKnitted.assemblee] as dossierAssemblee}
          <li id="{dossierAssemblee.uid}">
            <a class="flex my-2 no-underline text-black" href="/dossiers/assemblee/{dossierAssemblee.uid}">
17
              <!-- TODO: Remove this dummy `each`. -->
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
              {#each [dossierAssemblee.summaryStepsKnitted[dossierAssemblee.summaryStepsKnitted.length - 1]] as summaryStep}
                <div
                  class="bg-{
                    summaryStep.status === null || summaryStep.status.finalSuccess === null
                    ? summaryStep.color
                    : summaryStep.status.color
                  } flex flex-col flex-none mr-1 p-1 text-center text-white"
                >
                  <!-- <div class="text-grey-lightest text-xs">Échellon</div> -->
                  <div class="flex flex-auto flex-col justify-center">
                      <span class="inline-block text-3xl">
                        {dossierAssemblee.summaryStepsKnitted.length}
                        {#if summaryStep.status === null || summaryStep.status.finalSuccess === null}
                          <i class="fas fa-fw fa-ellipsis-h"></i>
                        {:elseif summaryStep.status.finalSuccess}
                          <i class="fas fa-fw fa-check"></i>
                        {:else}
                          <i class="fas fa-fw fa-times"></i>
                        {/if}
                      </span>
                  </div>
39 40
                </div>
              {/each}
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
              <div class="flex-auto">
                {dossierAssemblee.titreDossier.titre}
                <div class="my-1 text-grey-darker text-sm">
                  <span>{dossierAssemblee.procedureParlementaire.libelle}</span>
                  <!-- <span class="bg-{dossierAssemblee.statusKnitted.color} px-1 rounded text-white">{dossierAssemblee.statusKnitted.label}</span> -->
                  <!-- —
                  Étape {dossierAssemblee.summaryStepsKnitted.length} -->
                  <!-- — -->
                  <!-- TODO: Remove this dummy `each`. -->
                  <!-- {#each [dossierAssemblee.summaryStepsKnitted[dossierAssemblee.summaryStepsKnitted.length - 1]] as summaryStep}
                    <span class="bg-{summaryStep.color} my-1 p-1 text-white">
                      {summaryStep.organeName}{
                      #if summaryStep.title !== null}

                        {summaryStep.title}{
                      /if}
                    </span>
                    {#if summaryStep.status !== null && summaryStep.status.label !== null}
                      <span class="bg-{summaryStep.status.color} p-1 rounded text-base text-white">{summaryStep.status.label}</span>
                    {/if}
                  {/each} -->
62
                </div>
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
                {#if dossierAssemblee.previousSummaryStepKnitted !== null}
                  <!-- TODO: Remove this dummy `each`. -->
                  {#each [dossierAssemblee.previousSummaryStepKnitted] as summaryStep}
                    <div class="my-1 text-sm">
                      <span class="italic text-grey-darker">Dernière étape {displayDateFromString(summaryStep.date)} :</span>
                      <span class="font-semibold text-{summaryStep.color}">
                        {summaryStep.organeName}{
                        #if summaryStep.title !== null
                          }, {summaryStep.title}{
                        /if
                      }</span><span>, {
                        summaryStep.libelle
                      }</span>
                      {#if summaryStep.status !== null && summaryStep.status.label !== null}
                        <span class="bg-{summaryStep.status.color} px-1 rounded text-white">{summaryStep.status.label}</span>
                      {/if}
                    </div>
                  {/each}
                {/if}
                {#if dossierAssemblee.nextSummaryStepKnitted !== null}
                  <!-- TODO: Remove this dummy `each`. -->
                  {#each [dossierAssemblee.nextSummaryStepKnitted] as summaryStep}
                    <div class="my-1 text-sm">
                      <span class="italic text-grey-darker">Prochaine étape {displayDateFromString(summaryStep.date)} :</span>
                      <span class="font-semibold text-{summaryStep.color}">
                        {summaryStep.organeName}{
                        #if summaryStep.title !== null
                          }, {summaryStep.title}{
                        /if
                      }</span><span>, {
                        summaryStep.libelle
                      }</span>
                      {#if summaryStep.status !== null && summaryStep.status.label !== null}
                        <span class="bg-{summaryStep.status.color} px-1 rounded text-white">{summaryStep.status.label}</span>
                      {/if}
                    </div>
                  {/each}
                {/if}
              </div>
              <!-- {#if dossierAssemblee.currentDateKnitted !== null}
                <CalendarDate date={parseDate(dossierAssemblee.currentDateKnitted)} {now}/>
              {/if} -->
            </a>
          </li>
        {/each}
      {:elseif dossierKnitted.senat !== null}
        <!-- TODO: Remove this dummy `each`. -->
        {#each [dossierKnitted.senat] as dossierSenat}
          <li>
            <a href="/dossiers/senat/{dossierSenat.signet}">{dossierSenat.loient}</a>
            <span class="bg-{colorFromEtaloilib(dossierSenat.etaloi.etaloilib)} px-1 rounded text-xs text-white">{
              dossierSenat.etaloi.etaloilib === "promulgué ou adopté (ppr)"
                ? "adopté"
                : dossierSenat.etaloi.etaloilib
            }</span>
          </li>
        {/each}
      {/if}
121 122 123
    {/each}
  </ul>
</section>
124

125 126 127
<aside class="my-4 px-2 py-4 text-sm" role="complementary">
  <div class="flex flex-wrap -mx-2 -my-4">
    <div class="my-4 px-2 w-full sm:w-1/2">
128
      <h2 class="bg-indigo font-bold px-4 py-2 rounded-t text-lg text-white">
129 130
        Pour en savoir plus
      </h2>
131
      <div class="bg-indigo-lightest border border-t-0 border-indigo-light px-4 py-3 rounded-b text-indigo-dark">
132 133 134 135 136
        <h3 class="font-medium mb-1 text-base text-normal">
          Assemblée nationale
        </h3>

        <ul class="list-reset">
137 138 139 140
          <li><a href="http://www.assemblee-nationale.fr/agendas/odj.asp" target="_blank">Ordre du jour</a></li>
          <li><a href="http://www.assemblee-nationale.fr/{legislature}/liste/texte_ordre_du_jour.asp" target="_blank">Textes inscrits à l'ordre du jour</a></li>
          <li><a href="http://www.assemblee-nationale.fr/{legislature}/documents/tableau-ban.asp" target="_blank">État d'avancement des travaux législatifs</a></li>
          <li><a href="http://www.assemblee-nationale.fr/dyn/{legislature}/dossiers" target="_blank">Liste des dossiers législatifs</a></li>
141 142
        </ul>

143
        <h3 class="font-medium mb-1 mt-4 text-base text-normal">
144
          Sénat
145
        </h3>
146 147

        <ul class="list-reset">
148 149
          <li><a href="https://www.senat.fr/ordre-du-jour/ordre-du-jour.html" target="_blank">Ordre du jour</a></li>
          <li><a href="https://www.senat.fr/dossiers-legislatifs/textes-recents.html" target="_blank">Projets et propositions de loi récents ou discutés prochainement</a></li>
150 151
        </ul>

152
        <h3 class="font-medium mb-1 mt-4 text-base text-normal">
153
          La fabrique de la loi
154
        </h3>
155 156 157 158

        <ul class="list-reset">
          <li><a href="https://www.lafabriquedelaloi.fr/lois.html" target="_blank">Textes promulgués depuis 2008</a></li>
        </ul>
159 160 161
      </div>
    </div>

162 163 164 165 166 167
    <div class="my-4 px-2 w-full sm:w-1/2">
      <h2 class="bg-teal font-bold px-4 py-2 rounded-t text-lg text-white">
        Les coulisses techniques
      </h2>
      <div class="bg-teal-lightest border border-t-0 border-teal-light px-4 py-3 rounded-b text-teal-dark">
        <ul class="list-reset">
168
          <li><button class="button-link" on:click="fire('openNewIssueModal')" title="Ouvre un formulaire de saisie d'une remarque sur cette page." type="button">Signaler un problème ou suggérer une amélioration</button></li>
169
          <li><a href="/api" target="_blank" title="Voir les appels à l'API effectués pour générer cette page.">Appels à l'API</a></li>
170
          <li><a href="https://framagit.org/tricoteuses/tricoteuses-ui/blob/master/src/routes/index.html" target="_blank" title="Voir le code source de la page dans la forge du logiciel.">Code source de cette page</a></li>
171 172
        </ul>
      </div>
173 174 175 176
    </div>
  </div>
</aside>

177
<script>
Emmanuel Raviart's avatar
Emmanuel Raviart committed
178
  import config from "../config"
179
  import { displayDateFromString } from "../dates"
180
  import { newViewAgent } from "../model/dossiers_actuels"
181
  import { colorFromEtaloilib } from "../model/senat/helpers"
182

183
  export default {
184 185 186
    components: {
      SearchForm: "../components/SearchForm.html",
    },
187 188
    data() {
      return {
189
        legislature: 15,
190
        term: "",
191 192
      }
    },
193
    helpers: {
194
      colorFromEtaloilib,
195
      displayDateFromString,
196 197
      config,
    },
198 199
    // oncreate() {
    //   // This fires when the component has been rendered to the DOM.
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223
    //   const { dossiersAssembleeActuels } = this.get()
    //   const today = new Date().toISOString().split("T")[0]
    //   let dayBefore = null
    //   let dossierBefore = null
    //   for (let dossier of [...dossiersAssembleeActuels].reverse()) {
    //     if (dayBefore === null) {
    //       if (dossier.currentDateKnitted < today) {
    //         dayBefore = dossier.currentDateKnitted.split("T")[0]
    //         dossierBefore = dossier
    //       }
    //     } else if (dossier.currentDateKnitted >= dayBefore) {
    //       dossierBefore = dossier
    //     } else {
    //       break
    //     }
    //     if (dossierBefore !== null) {
    //       // eslint-disable-next-line no-undef
    //       const dossierElement = document.getElementById(dossierBefore.uid)
    //       if (dossierElement !== null) {
    //         dossierElement.scrollIntoView()
    //       }
    //       break
    //     }
    //   }
224
    // },
225
    async preload(/* { params, query } */) {
226
      const agent = newViewAgent()
227
      return await agent.retrieveData(this.fetch)
228 229 230
    },
  }
</script>