add formset

gazhdict/addentry/views.py

@@ -1,15 +1,18 @@
 from django.shortcuts import render
-
+from django.contrib.auth.decorators import login_required
 from django.http import HttpResponse
 from datetime import datetime
 from .add_entry_form import EntryForm, MeaningForm
 from .models import Entry, Meaning
+from django.forms import formset_factory
+
 
 # Create your views here.
 def hello_world(request):
     return render(request, 'hello_world.html',
     {'current_time' : str(datetime.now()),})
 
+@login_required #登入必要
 def add_entry(request):
     
     # it becomes true when stored successfully
@@ -22,30 +25,42 @@ def add_entry(request):
 
 
             latest_entry_id = Entry.objects.latest('id').id
-            meaning_form = MeaningForm(request.POST)
+            MeaningFormSet = formset_factory(MeaningForm, extra=5)
+            meaning_form_set = MeaningFormSet(data=request.POST or None)
             
-            if meaning_form.is_valid:
+            meaning_form_valid_length = len(list(filter(lambda x : x == {} , meaning_form_set.errors)))
-                meaning_form.save()
+
+            i = 0
+            for form in meaning_form_set:
+                if i < meaning_form_valid_length:
+                    form.save()
+                    raise Exception("Form Saved!")
+                    i += 1
+                else:
+                    break
 
             latest_meaning_id = Meaning.objects.latest('id').id
 
             # update the entry id of meaning
-                Meaning.objects.filter(id=latest_meaning_id).update(Entry=latest_entry_id)
+            valid_meaning_list = Meaning.objects.all().order_by('-id')[:meaning_form_valid_length]
+            for meaning in valid_meaning_list:
+                Meaning.objects.filter(id=meaning.id).update(Entry=latest_entry_id)
 
             is_saved = True
     
-    entry_list = Entry.objects.all()
+    entry_list = list(Entry.objects.all())[-10:]
-    meaning_list = Meaning.objects.all()
+    meaning_list = list(Meaning.objects.all())[-20:]
 
 
 
     
     entry_form = EntryForm()
-    meaning_form = MeaningForm()
+    meaning_form_set = formset_factory(MeaningForm, extra=5)
+
     context = {
         'is_saved' : is_saved,
         'entry_form' : entry_form,
-        'meaning_form' : meaning_form,
+        'meaning_form_set' : meaning_form_set,
         'entry_list' : entry_list,
         'meaning_list' : meaning_list,
 

gazhdict/static/addentry/add_entry.css

@@ -1,9 +1,13 @@
+.entry-modify-input{
+    display : none;
+}
+
+
 
 #id_Entry {
     display: none;
 }
 
-
 label[for=id_Entry]{
     display: none;
 }

gazhdict/static/addentry/add_entry.js

@@ -1,6 +1,13 @@
 // setting the option value of the entry selection list to 1
-var options = document.getElementById("id_Entry");
+var formBox = document.getElementById("form-box");
-options.value = "1";
+var options = document.getElementsByTagName("select");
+for (var i = 0; i < options.length; i++) {
+    options[i].value = "1";
+    options[i].style.display = "none";
+    var label = document.querySelector("label[for=id_form-" + i + "-Entry]");
+    label.style.display = "none";
+}
+//options.value="1";
 // setting saved_successed position
 var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
@@ -16,3 +23,18 @@ var SuccSaved = document.getElementById("successful-saved");
 closeSuccSaved.addEventListener("click", function (e) {
     SuccSaved.style["display"] = "none";
 });
+var editBottonList = document.getElementsByClassName('entry-edit-button');
+for (var i = 0; i < editBottonList.length; i++) {
+    editBottonList[i].addEventListener("click", function (e) {
+        console.log(123);
+        var tgt = e.target;
+        var bottonId = tgt.id;
+        var entryEditRegexp = /entry-edit-(\d+)/;
+        var IdNum = entryEditRegexp.exec(bottonId)[1];
+        var inputBoxClassName = ".ent-mod-inp-" + IdNum; // ent-mod-inp = entry-modify-input
+        var inputBoxList = document.querySelectorAll(inputBoxClassName);
+        for (var j = 0; j < inputBoxList.length; j++) {
+            inputBoxList[j].style['display'] = 'block';
+        }
+    }, false);
+}

gazhdict/static/addentry/add_entry.ts

@@ -1,8 +1,15 @@
 // setting the option value of the entry selection list to 1
 
-var options = <HTMLSelectElement> document.getElementById("id_Entry");
+var formBox = document.getElementById("form-box");
+var options = document.getElementsByTagName("select");
+for(var i=0; i<options.length;i++){
+    options[i].value="1";
+    options[i].style.display = "none";
+    var label = <HTMLLabelElement> document.querySelector("label[for=id_form-" + i + "-Entry]");
+    label.style.display = "none";
+}
 
-options.value="1";
+//options.value="1";
 
 // setting saved_successed position
 
@@ -27,4 +34,23 @@ closeSuccSaved.addEventListener("click",(e)=>{
     SuccSaved.style["display"] = "none";
 })
 
+var editBottonList = document.getElementsByClassName('entry-edit-button')
+
+for (var i=0; i< editBottonList.length; i++){    
+    editBottonList[i].addEventListener("click",(e)=>{
+        console.log(123);
+        let tgt = <HTMLElement> e.target;
+        let bottonId = tgt.id;
+        let entryEditRegexp = /entry-edit-(\d+)/;
+        let IdNum = entryEditRegexp.exec(bottonId)[1];
+        let inputBoxClassName = ".ent-mod-inp-" + IdNum; // ent-mod-inp = entry-modify-input
+
+        let inputBoxList =  document.querySelectorAll<HTMLElement>(inputBoxClassName);
+        for (var j=0; j<inputBoxList.length; j++){
+            inputBoxList[j].style['display'] = 'block';
+        }
+
+
+    }, false)
+}
 

gazhdict/static/basic_generic.css

@@ -0,0 +1,98 @@
+
+#head-bar{
+    background: url("./image/headbarright.png"),
+				 #7fa962;
+	padding: 1.2em 2em 2em 1.2em;
+	background-position:right;
+	background-repeat:no-repeat;
+}
+
+#head-bar h1{
+    color: #ffffff;
+    font-size:209%;
+}
+
+#head-bar h2{
+    color: #ffff7f;
+    font-size:135%;
+}
+
+#head-bar #login{
+    float: right;
+}
+
+#head-bar #login a {
+color:#ffffff;
+}
+
+#head-bar #login a:hover {
+color:#ffffff;
+}
+
+#head-bar #login a:active {
+color:#ffffff;
+}
+
+#head-bar #login a:visited{
+color:#ffffff;
+}
+
+#middie{
+  display: table;
+}
+
+.css_tr{
+  display: table-row;
+}
+
+.css_td{
+  display: table-cell;
+}
+
+#left-bar{
+ width: 200px;
+ padding: 2em 1.5em 2em 1.5em;
+ background-color:#f2f38d;
+}
+
+#left-bar ul{
+ list-style: none;
+ padding-left: 1em;
+}
+
+#left-bar ul li{
+ padding-top: 0.5em;
+ padding-right: auto;
+ padding-bottom: 0.5em;
+ border-bottom: 1px solid #9c9d5b;
+ font-size:115%;
+}
+
+#left-bar ul ul{
+ padding-left: 0em;
+}
+
+
+#left-bar ul ul li{
+ padding-top: 0.5em;
+ padding-right: auto;
+ padding-bottom: 0.5em;
+ padding-left: 2em;
+ font-size:100%;
+}
+
+#id_search_content{
+  width: 500px;
+}
+
+
+#main {
+ box-sizing: border-box;
+ padding: 2em 1.5em 2em 1.5em;
+}
+
+#footer {
+  background: #7fa962;
+  color: #ffffff;
+  padding: 2em 2em 2em 2em;
+}

gazhdict/static/ga_search.css

@@ -0,0 +1,18 @@
+label[for=id_search_content]{
+ font-weight: bold;
+
+}
+
+
+#search-content{
+  width: 100%;
+}
+
+#search-content h1{
+  color: #7fa861;
+}
+
+#options{
+padding: 1em 0em 1em 0em;
+
+}

gazhdict/templates/addentry/add_entry.html

@@ -1,25 +1,18 @@
+{% extends "base_generic.html" %}
 {% load static %}
+{% block title %}<title>愛爾蘭語—華語線上辭典 - 增加條目</title>{% endblock %}
+{% block content %}
 
-<html>
+<div id="successful-saved" {% if is_saved != True %}style="display:none;"{% endif %}>
-<head>
-
-    <meta charset="utf-8">
-    <title>增加條目</title>
-	<link rel="stylesheet" href="{% static 'addentry/add_entry.css' %}">
-</head>
-
-<body>
-{% if is_saved == True %}
-<div id="successful-saved">
 <div id="close-saved-screen-bar"><span id="close-successful-saved">[X]</span></div>
 <div id="successful-saved-message">儲存成功！</div>
 </div>
-{% endif %}
+
 
 <h1>線上愛爾蘭語—華語辭典</h1>
 <h2>增加項目與解釋</h2>
 <div id="sidebar"><a href="../accounts/logout">登出</a></div>
-{% block content %}
+
 <form action="" method="POST">
     {% csrf_token %}
     <div class="form-group">
@@ -29,22 +22,26 @@
 			{{field.label_tag}} {{field}} <br/>
 			{% endfor %}
 			<p/>
-			<h3>解釋</h3>
 			<div id="form-box">
-            {% for field in meaning_form %}
+     		 {{meaning_form_set.management_form}}
-			
+            {% for meaning in meaning_form_set %}
+			<h3>解釋{{forloop.counter}}</h3>
+	          {% for field in meaning %}
 			    {{field.label_tag}} {{field}}<br/>
-
 			  {% endfor %}
-			</div>
+			{% endfor %}
+			<p/>
 
             <input class="btn btn-success" type="submit" value="儲存" />
         </div>
     </div>
 </form>
-{% endblock  %}
 
-<h3>詞條一覽</h3>
+{% for entry in entry_list reversed%}
+<form id="entry-{{entry.id}}" action="add_entry_modified" method="POST"></form>
+{% endfor %}
+
+<h3>詞條一覽（最後10筆倒著顯示）</h3>
 <table class="table table-bordered table-striped">
 <thead>
 <tr>
@@ -57,19 +54,52 @@
 <th>編輯</th>
 <tr/>
 </thead>
-{% for entry in entry_list%}
+
+{% for entry in entry_list reversed%}
 <tr>
-<td>{{entry.id}}</td>
+<td>{{entry.id}}<input type="hidden" name="id" class="entry-modify-input ent-mod-inp-{{ forloop.counter0 }}" id="id" value="{{entry.id}}" form="entry-{{entry.id}}"></td>
-<td>{{entry.Gaeilge}}</td>
+<td>{{entry.Gaeilge}}<input type="text" name="Gaeilge" class="entry-modify-input ent-mod-inp-{{ forloop.counter0 }}" maxlength="100" id="Gaeilge" value="{{entry.Gaeilge}}" form="entry-{{entry.id}}" required=""></td>
-<td>{% if entry.Pronoun != None %}{{entry.Pronoun}}{% endif %}</td>
+<td>{% if entry.Pronoun != None %}{{entry.Pronoun}}{% endif %}<input type="text" name="Pronoun" class="entry-modify-input ent-mod-inp-{{ forloop.counter0 }}" maxlength="250" id="Pronoun" value="{{entry.Pronoun}}" form="entry-{{entry.id}}"></td>
-<td>{% if entry.PoS != None %}{{entry.PoS}}{% endif %}</td>
+<td>{% if entry.PoS != None %}{{entry.PoS}}{% endif %}<input type="text" name="PoS" class="entry-modify-input ent-mod-inp-{{ forloop.counter0 }}" maxlength="20" id="PoS" value="{{entry.PoS}}" form="entry-{{entry.id}}"></td>
-<td>{% if entry.PreScript != None %}{{entry.PreScript}}{% endif %}</td>
+<td>{% if entry.PreScript != None %}{{entry.PreScript}}{% endif %}<input type="text" name="PreScript" class="entry-modify-input ent-mod-inp-{{ forloop.counter0 }}" maxlength="20" id="PreScript" value="{{entry.PreScript}}" form="entry-{{entry.id}}"></td>
-<td>{% if entry.PostScript != None %}{{entry.PostScript}}{% endif %}</td>
+<td>{% if entry.PostScript != None %}{{entry.PostScript}}{% endif %}<input type="text" name="PostScript" class="entry-modify-input ent-mod-inp-{{ forloop.counter0 }}" maxlength="20" id="PostScript" value="{{entry.PostScript}}" form="entry-{{entry.id}}"></td>
-<td><a class="edit">編輯</a> <a class="edit">刪除</a></td>
+<td><button class="entry-edit-button" id="entry-edit-{{ forloop.counter0 }}">編輯</button>  <input type="submit" value="更新" form="entry-{{entry.id}}"> <a class="edit">刪除</a></td>
+</tr>
+{% endfor %}
+</table>
+
+<h3>釋義一覽</h3>
+<table class="table table-bordered table-striped">
+<thead>
+<tr>
+<th>id</th>
+<th>條目id<br>Entry Id</th>
+<th>意思<br>Meaning_content</th>
+<th>例句1<br>Exam_Sentence1</th>
+<th>例句中譯1<br>Exam_Sentence1_zh</th>
+<th>例句2<br>Exam_Sentence2</th>
+<th>例句中譯2<br>Exam_Sentence2_zh</th>
+<th>例句3<br>Exam_Sentence3</th>
+<th>例句中譯3<br>Exam_Sentence3_zh</th>
+<th>編輯</th>
+<tr/>
+</thead>
+{% for m in meaning_list reversed%}
+<tr>
+<td>{{m.id}}</td>
+<td>{{m.Entry.id}}</td>
+<td>{{m.Meaning_content}}</td>
+<td>{% if m.Exam_Sentence1 != None %}{{m.Exam_Sentence1}}{% endif %}</td>
+<td>{% if m.Exam_Sentence1_zh != None %}{{m.Exam_Sentence1_zh}}{% endif %}</td>
+<td>{% if m.Exam_Sentence2 != None %}{{m.Exam_Sentence2}}{% endif %}</td>
+<td>{% if m.Exam_Sentence2_zh != None %}{{m.Exam_Sentence2_zh}}{% endif %}</td>
+<td>{% if m.Exam_Sentence3 != None %}{{m.Exam_Sentence3}}{% endif %}</td>
+<td>{% if m.Exam_Sentence3_zh != None %}{{m.Exam_Sentence3_zh}}{% endif %}</td>
+<td><a class="edit">編輯</a> <a class="update">更新</a> <a class="delete">刪除</a></td>
 </tr>
 {% endfor %}
 </table>
 
 <script src="{% static 'addentry/add_entry.js' %}"></script>
-
+<link rel="stylesheet" href="{% static 'addentry/add_entry.css' %}">
-</html>
+{% endblock  %}

gazhdict/templates/base_generic.html

@@ -1,3 +1,4 @@
+{% load static %}
 <html lang="zh">
 <head>
 <meta charset="utf-8">
@@ -5,7 +6,40 @@
 </head>
 
 <body>
-
+<div id="head-bar">
+<div id="login"><a href="http://127.0.0.1:8000/accounts/login/">登入</a></div>
+<h1>愛爾蘭語—華語線上辭典</h1>
+<h2>An Fócloir Gaeilge-Mandairinis ar Líne</h2>
+</div>
+<div id="middle">
+<div id="middle-css-tr" class="css_tr">
+<div id="left-bar" class="css_td">
+<ul>
+<li>不規則動詞、繫詞表</li>
+<ul><li>abair</li>
+<li>beir</li>
+<li>bí</li>
+<li>clois</li>
+<li>dein</li>
+<li>is</li>
+<li>faigh</li>
+<li>gabh</li>
+<li>inis</li>
+<li>ith</li>
+<li>righ</li>
+<li>tabhair</li>
+<li>tar</li>
+<li>téigh</li>
+</ul>
+<li>關於本站</li>
+</ul>
+</div>
+<div id="main" class="css_td">
 {% block content %}<!-- default content text (typically empty) -->{% endblock %}
+</div></div></div>
+
+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
+<link rel="stylesheet" href="{% static 'basic_generic.css' %}">
+<div id="footer">(c) 2021 Chen, Chien-ting</div>
 </body>
 </html>

gazhdict/templates/ga_search.html

@@ -1,28 +1,24 @@
-<!DOCTYPE html>
+{% extends "base_generic.html" %}
-<html>
+{% load static %}
-    <head>
+{% block title %}
-        <title>線上愛爾蘭語—漢語辭典 - 愛爾蘭語搜尋 {{entry}} 的結果</title>
+<title>愛爾蘭語—華語線上辭典 - 首頁</title>{% endblock %}
-    </head>
+{% block content %}
-    <body>
+<link rel="stylesheet" href="{% static 'ga_search.css' %}">
-<div id="header">
-    <h1>線上愛爾蘭語—華語辭典</h1>
-    <h2>An Foclóir Gaeilge-Mandairínis ar Líne</h2>
-</div>
 <div id="search-bar">
 <form method="POST">
     {% csrf_token %}
-    <div id="search_content">
+    <div id="search-content">
+	<h1 id="search-content-head">搜尋內容</h1>
     <label for="{{form.search_content.id_for_label}}">搜尋內容：</label>{{form.search_content}}
     </div>
     <div id="options">
     {% for option in form.choice_field %}
-    <li id="{{option.id_for_label}}">{{option.label_tag}} {{option}}</li>
+    <span id="{{option.id_for_label}}">{{option.label_tag}} {{option}}</span>
     {% endfor %}
     </div>
     <input type="submit" value="搜尋">
 </form>
 </div>
-<hr/>
 <div id="search-result">
 		{% if entry == "" %}
 		<!-- Let it blank -->
@@ -52,6 +48,5 @@
 		</div>
 		{% endfor %}
 		{% endif %}
-</div>
+
-    </body>
+{% endblock %}
-</html>

gazhdict/templates/index.html

@@ -1,15 +1,6 @@
-<html>
+{% load static %}
-    <head>
+{% block title %}<title>愛爾蘭語—華語線上辭典 - 首頁</title>{% endblock %}
-    
+{% extends "base_generic.html" %}
-        <meta charset="utf-8">
-        <title>線上愛爾蘭語—漢語辭典</title>
-    </head>
-
-<body>
-<div id="header">
-    <h1>線上愛爾蘭語—華語辭典</h1>
-    <h2>An Foclóir Gaeilge-Mandairínis ar Líne</h2>
-</div>
 <div id="search-bar">
 <form method="POST">
     {% csrf_token %}
@@ -23,6 +14,4 @@
     </div>
     <input type="submit" value="搜尋">
 </form>
-</div>
+{% endblock %} 
-</body>
-</html>

gazhdict/templates/registration/login.html

@@ -1,13 +1,9 @@
-<body>
+{% extends "base_generic.html" %}
-<head>
+{% load static %}
-<meta charset="utf-8">
+{% block title %}
-<title>線上愛爾蘭語—華語辭典 - 登入</title>
+<title>愛爾蘭語—華語線上辭典 - 登入</title>{% endblock %}
-<head>
-<body>
-<h1>線上愛爾蘭語—華語辭典</h1>
-<h2>管理後台登入畫面</h2>
-
 {% block content %}
+<h2>後台登入</h2>
 {% if form.errors %}
   <p>帳號或密碼不符合，請重新輸入。</p>
 {% endif %}
@@ -42,5 +38,3 @@
 <p><a href="{% url 'password_reset' %}">忘記密碼？</a></p>
 
 {% endblock %}
-</body>
-</html>