API tools faq
paste
Advertisement
CleverCode

panel

CleverCode
Jun 13th, 2020
99
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.00 KB | None | 0 0
raw download clone embed print report
  1. {% extends "blog/base.html" %}
  2. {% load crispy_forms_tags %}
  3. {% block content %}
  4. <head>
  5.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  6.   <!-- Compiled and minified CSS -->
  7.   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  8. </head>
  9.  
  10. <body>
  11.  
  12. <div>
  13.     <h2>Pannello Annunci</h2><br>
  14. </div>
  15.  
  16. <form>
  17.   <div class="form-row align-items-center">
  18.     <div class="col-auto my-1">
  19.       <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preferenze</label>
  20.       <p>Pubblica il tuo annuncio su:</p>
  21.       <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
  22.         <option selected>Seleziona il sito web...</option>
  23.         <option value="1">Subito.it</option>
  24.         <option value="2">Autoscout24</option>
  25.         <option value="3">Booking.com</option>
  26.       </select>
  27.     </div>
  28.   </div>
  29. </form>
  30. <br><br>
  31.  
  32. <!-- Form Subito.it -->
  33.  
  34. <div id="subito" style="display:none;">
  35.   <form method="POST" enctype="multipart/form-data">
  36.  
  37.     <div class="content-section">
  38.         <h2>Pubblicazione Annuncio</h2> <br>
  39.         <input class="form-control" type="text" name="subito" placeholder="www.subito.it" readonly>
  40.     </div>
  41.  
  42.  
  43.     <div class="content-section">
  44.             <legend class="border-bottom mb-4">Immagini</legend>
  45.               {% csrf_token %}
  46.               <fieldset class="form-group">
  47.                   <input name="file" type="file" multiple />
  48.               </fieldset>
  49.  
  50.             <div class="media">
  51.                 <img class="account-img" src="{{ user.profile.image.url }}">
  52.             </div>
  53.               <div class="form-group">
  54.                   <button class="btn btn-outline-info">Aggiungi</button>
  55.               </div>
  56.  
  57.         <br>
  58.         <legend class="border-bottom mb-4">Categoria</legend>
  59.         <div class="form-row align-items-center">
  60.         <div class="col-auto my-1">
  61.           <select class="custom-select mr-sm-2" id="inlineCustomSelect">
  62.               <option selected>Seleziona la categoria...</option>
  63.               <option value="41">Informatica</option>
  64.               <option value="10">Cellulari & Smartphone</option>
  65.              <option value="61">Animali</option>
  66.              <option value="62">Musica & Film</option>
  67.              <option value="63">Libri & Riviste</option>
  68.              <option value="64">Strumenti Musicali</option>
  69.              <option value="65">Sports</option>
  70.              <option value="67">Collezionismo</option>
  71.              <option value="71">Altri</option>
  72.          </select>
  73.        </div>
  74.      </div>
  75. <br>
  76.        <legend class="border-bottom mb-4">Titolo</legend>
  77.        <p>Inserisci il titolo dell'annuncio: <input type="text" name="titolo" class="form-control"></p>
  78. <br>
  79.        <legend class="border-bottom mb-4">Descrizione</legend>
  80.        <div class="input-group">
  81.          <div class="input-group-prepend">
  82.            <span class="input-group-text"></span>
  83.          </div>
  84.          <textarea class="form-control" aria-label="With textarea" placeholder="Descrivi le caratteristiche del tuo prodotto..."></textarea>
  85.        </div>
  86. <br>
  87.        <legend class="border-bottom mb-4">Prezzo</legend>
  88.        Inserisci il prezzo:<br>
  89.        <div class="input-group mb-3">
  90.          <div class="input-group-prepend">
  91.            <span class="input-group-text">€</span>
  92.          </div>
  93.          <input type="text" name="prezzo" class="form-control">
  94.        </div>
  95. <br>
  96.        <legend class="border-bottom mb-4">Altro</legend>
  97.        Comune: <input type="text" class="form-control"> <br>
  98.        Nome Venditore: <input type="text" class="form-control"> <br>
  99.        Numero di telefono: <input type="number" class="form-control"> <br>
  100.        <button type="submit" class="btn btn-outline-info">Pubblica</button>
  101.    </div>
  102.  </form>
  103. </div>
  104.  
  105. <!-- Fine Form Subito.it -->
  106.  
  107.  
  108. <!-- Form Autoscout24 -->
  109.  
  110. <div id="autoscout24" style="display:none;">
  111. <form method="POST" enctype="multipart/form-data">
  112.  
  113.     <div class="content-section">
  114.         <h2>Pubblicazione Annuncio</h2> <br>
  115.         <input class="form-control" type="text" name="autoscout24" placeholder="www.autoscout24.it" readonly>
  116.     </div>
  117.  
  118.  
  119.     <div class="content-section">
  120.         <legend class="border-bottom mb-4">Immagini</legend>
  121.           {% csrf_token %}
  122.           <fieldset class="form-group">
  123.               {{ p_form|crispy }}
  124.           </fieldset>
  125.  
  126.         <div class="media">
  127.             <img class="account-img" src="{{ user.profile.image.url }}">
  128.         </div>
  129.           <div class="form-group">
  130.               <button class="btn btn-outline-info" type="submit">Aggiungi</button>
  131.           </div>
  132.  
  133.  
  134.         <br>
  135.         <legend class="border-bottom mb-4">Categoria</legend>
  136.         <div class="form-row align-items-center">
  137.         <div class="col-auto my-1">
  138.           <select class="custom-select mr-sm-2" id="inlineFormCustomSelect2">
  139.               <option selected>Seleziona la categoria...</option>
  140.               <option value="11">Auto</option>
  141.               <option value="31">Offerte Di Lavoro</option>
  142.               <option value="41">Informatica</option>
  143.               <option value="61">Animali</option>
  144.               <option value="62">Musica & Film</option>
  145.              <option value="63">Libri & Riviste</option>
  146.              <option value="64">Strumenti Musicali</option>
  147.              <option value="65">Sports</option>
  148.              <option value="67">Collezionismo</option>
  149.              <option value="71">Altri</option>
  150.          </select>
  151.        </div>
  152.      </div>
  153. <br>
  154.        <legend class="border-bottom mb-4">Titolo</legend>
  155.        <p>Inserisci il titolo dell'annuncio: <input type="text" class="form-control"></p>
  156. <br>
  157.        <legend class="border-bottom mb-4">Descrizione</legend>
  158.        <div class="input-group">
  159.          <div class="input-group-prepend">
  160.            <span class="input-group-text"></span>
  161.          </div>
  162.          <textarea class="form-control" aria-label="With textarea" placeholder="Descrivi le caratteristiche del tuo prodotto..."></textarea>
  163.        </div>
  164. <br>
  165.        <legend class="border-bottom mb-4">Prezzo</legend>
  166.        Inserisci il prezzo:<br>
  167.        <div class="input-group mb-3">
  168.          <div class="input-group-prepend">
  169.            <span class="input-group-text">€</span>
  170.          </div>
  171.          <input type="text" class="form-control">
  172.        </div>
  173. <br>
  174.        <legend class="border-bottom mb-4">Altro</legend>
  175.        Comune: <input type="text" class="form-control"> <br>
  176.        Nome Venditore: <input type="text" class="form-control"> <br>
  177.        Numero di telefono: <input type="number" class="form-control"> <br>
  178.        <button type="submit" class="btn btn-outline-info">Pubblica</button>
  179.    </div>
  180.  
  181. </form>
  182. </div>
  183. <!-- Fine Form Autoscout24 -->
  184.  
  185. <!-- Form Booking.com -->
  186.  
  187. <div id="booking" style="display:none;">
  188. <form method="POST" enctype="multipart/form-data">
  189.  
  190.     <div class="content-section">
  191.         <h2>Pubblicazione Annuncio</h2> <br>
  192.         <input class="form-control" type="text" name="booking" placeholder="www.booking.com" readonly>
  193.     </div>
  194.  
  195.  
  196.     <div class="content-section">
  197.         <legend class="border-bottom mb-4">Immagini</legend>
  198.           {% csrf_token %}
  199.           <fieldset class="form-group">
  200.               {{ p_form|crispy }}
  201.           </fieldset>
  202.  
  203.         <div class="media">
  204.             <img class="account-img" src="{{ user.profile.image.url }}">
  205.         </div>
  206.           <div class="form-group">
  207.               <button class="btn btn-outline-info" type="submit">Aggiungi</button>
  208.           </div>
  209.  
  210.  
  211.         <br>
  212.         <legend class="border-bottom mb-4">Categoria</legend>
  213.         <div class="form-row align-items-center">
  214.         <div class="col-auto my-1">
  215.           <select class="custom-select mr-sm-2" id="inlineFormCustomSelect3">
  216.               <option selected>Seleziona la categoria...</option>
  217.               <option value="11">Auto</option>
  218.               <option value="31">Offerte Di Lavoro</option>
  219.               <option value="41">Informatica</option>
  220.               <option value="61">Animali</option>
  221.               <option value="62">Musica & Film</option>
  222.              <option value="63">Libri & Riviste</option>
  223.              <option value="64">Strumenti Musicali</option>
  224.              <option value="65">Sports</option>
  225.              <option value="67">Collezionismo</option>
  226.              <option value="71">Altri</option>
  227.          </select>
  228.        </div>
  229.      </div>
  230. <br>
  231.        <legend class="border-bottom mb-4">Titolo</legend>
  232.        <p>Inserisci il titolo dell'annuncio: <input type="text" class="form-control"></p>
  233. <br>
  234.        <legend class="border-bottom mb-4">Descrizione</legend>
  235.        <div class="input-group">
  236.          <div class="input-group-prepend">
  237.            <span class="input-group-text"></span>
  238.          </div>
  239.          <textarea class="form-control" aria-label="With textarea" placeholder="Descrivi le caratteristiche del tuo prodotto..."></textarea>
  240.        </div>
  241. <br>
  242.        <legend class="border-bottom mb-4">Prezzo</legend>
  243.        Inserisci il prezzo:<br>
  244.        <div class="input-group mb-3">
  245.          <div class="input-group-prepend">
  246.            <span class="input-group-text">€</span>
  247.          </div>
  248.          <input type="text" class="form-control">
  249.        </div>
  250. <br>
  251.        <legend class="border-bottom mb-4">Altro</legend>
  252.        Comune: <input type="text" class="form-control"> <br>
  253.        Nome Venditore: <input type="text" class="form-control"> <br>
  254.        Numero di telefono: <input type="number" class="form-control"> <br>
  255.        <button type="submit" class="btn btn-outline-info">Pubblica</button>
  256.    </div>
  257.  
  258. </form>
  259. </div>
  260. <br>
  261. <!-- Fine Form Booking.com -->
  262.  
  263. <p>Annunci attualmente online: </p>
  264.  
  265. <!-- Table -->
  266.  <table class="table table-bordered data-table">
  267.    <thead>
  268.      <th width="200px" scope="col">Immagine</th>
  269.      <th width="200px" scope="col">Titolo</th>
  270.      <th width="200px" scope="col">Prezzo</th>
  271.      <th width="200px" scope="col">Data Pubbl.</th>
  272.      <th width="200px" scope="col">Portale Pubbl.</th>
  273.      <th width="500px">Azione</th>
  274.    </thead>
  275.    <tbody>
  276.    </tbody>
  277.  </table>
  278.  
  279.  
  280. <script type="text/javascript">
  281.  
  282.    var portale_pubblicazione = ""; $("input[name='subito']").attr('placeholder');
  283.  
  284.     $(document).ready(function(){
  285.         $('#inlineFormCustomSelect').on('change', function() {
  286.           if (this.value == "1"){
  287.             $("#subito").show()
  288.             portale_pubblicazione = $("input[name='subito']").attr('placeholder');
  289.           }else{
  290.             $("#subito").hide()
  291.           }
  292.  
  293.           if (this.value == "2"){
  294.             $("#autoscout24").show()
  295.             portale_pubblicazione = $("input[name='autoscout24']").attr('placeholder');
  296.           }else{
  297.             $("#autoscout24").hide()
  298.           }
  299.  
  300.           if (this.value == "3"){
  301.             $("#booking").show()
  302.             portale_pubblicazione = $("input[name='booking']").attr('placeholder');
  303.           }else{
  304.             $("#booking").hide()
  305.           }
  306.  
  307.         });
  308.     });
  309.  
  310.     $("form").submit(function(e){
  311.         e.preventDefault();
  312.         var immagine = "Da fare";
  313.         var titolo = $("input[name='titolo']").val();
  314.         var prezzo = $("input[name='prezzo']").val();
  315.         var data = new Date();
  316.         var Hh, Mm, Ss, mm;
  317.         Hh = data.getHours() + ":";
  318.         Mm = data.getMinutes() + ":";
  319.         Ss = data.getSeconds();
  320.         var data_pubblicazione = Hh + Mm + Ss;
  321.  
  322.  
  323.         $(".data-table tbody").append("<tr data-name='"+titolo+"' data-email='"+prezzo+"'><td>"+immagine+"</td><td>"+titolo+"</td><td>"+prezzo+"</td><td>"+data_pubblicazione+"</td><td>"+portale_pubblicazione+"</td><td><button class='btn btn-info btn-xs btn-edit material-icons'>edit</button><button class='btn btn-danger btn-xs btn-delete material-icons'>delete</button></td></tr>");
  324.  
  325.         $("input[name='titolo']").val('');
  326.         $("input[name='prezzo']").val('');
  327.  
  328.     });
  329.  
  330.     $("body").on("click", ".btn-delete", function(){
  331.         $(this).parents("tr").remove();
  332.     });
  333.  
  334.     $("body").on("click", ".btn-edit", function(){
  335.         var titolo = $(this).parents("tr").attr('data-name');
  336.         var prezzo = $(this).parents("tr").attr('data-email');
  337.  
  338.         $(this).parents("tr").find("td:eq(1)").html('<input name="edit_name" value="'+titolo+'">');
  339.         $(this).parents("tr").find("td:eq(2)").html('<input name="edit_email" value="'+prezzo+'">');
  340.  
  341.         $(this).parents("tr").find("td:eq(5)").prepend("<button class='btn btn-info btn-xs btn-update material-icons'>save</button><button class='btn btn-warning btn-xs btn-cancel material-icons'>cancel</button>");
  342.         $(this).hide();
  343.     });
  344.  
  345.     $("body").on("click", ".btn-cancel", function(){
  346.         var titolo = $(this).parents("tr").attr('data-name');
  347.         var prezzo = $(this).parents("tr").attr('data-email');
  348.  
  349.         $(this).parents("tr").find("td:eq(1)").text(titolo);
  350.         $(this).parents("tr").find("td:eq(2)").text(prezzo);
  351.  
  352.         $(this).parents("tr").find(".btn-edit").show();
  353.         $(this).parents("tr").find(".btn-update").remove();
  354.         $(this).parents("tr").find(".btn-cancel").remove();
  355.     });
  356.  
  357.     $("body").on("click", ".btn-update", function(){
  358.         var titolo = $(this).parents("tr").find("input[name='edit_name']").val();
  359.         var prezzo = $(this).parents("tr").find("input[name='edit_email']").val();
  360.  
  361.         $(this).parents("tr").find("td:eq(1)").text(titolo);
  362.         $(this).parents("tr").find("td:eq(2)").text(prezzo);
  363.  
  364.         $(this).parents("tr").attr('data-name', titolo);
  365.         $(this).parents("tr").attr('data-email', prezzo);
  366.  
  367.         $(this).parents("tr").find(".btn-edit").show();
  368.         $(this).parents("tr").find(".btn-cancel").remove();
  369.         $(this).parents("tr").find(".btn-update").remove();
  370.     });
  371.  
  372. </script>
  373.  
  374.  
  375. <br>
  376. <br>
  377. <br>
  378. <br>
  379. <br>
  380. <br>
  381. <br>
  382. <br>
  383. <br>
  384. <br>
  385. <br>
  386. <br>
  387. </body>
  388.  
  389. {% endblock content %}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!