diff --git a/campics_/content/migrations/0009_feed_created_at.py b/campics_/content/migrations/0009_feed_created_at.py new file mode 100644 index 0000000000000000000000000000000000000000..9bfd650ae4f2eb9c57618285bbb5837e889d2474 --- /dev/null +++ b/campics_/content/migrations/0009_feed_created_at.py @@ -0,0 +1,20 @@ +# Generated by Django 4.0.4 on 2022-06-01 06:23 + +from django.db import migrations, models +import django.utils.timezone + + +class Migration(migrations.Migration): + + dependencies = [ + ('content', '0008_auto_20211014_1246'), + ] + + operations = [ + migrations.AddField( + model_name='feed', + name='created_at', + field=models.DateTimeField(auto_now_add=True, default=django.utils.timezone.now), + preserve_default=False, + ), + ] diff --git a/campics_/content/migrations/0010_feed_univ.py b/campics_/content/migrations/0010_feed_univ.py new file mode 100644 index 0000000000000000000000000000000000000000..fb3e1b8b73ca771fcdca26443806ac5386c2512d --- /dev/null +++ b/campics_/content/migrations/0010_feed_univ.py @@ -0,0 +1,20 @@ +# Generated by Django 4.0.4 on 2022-06-01 07:43 + +from django.db import migrations, models +import django.utils.timezone + + +class Migration(migrations.Migration): + + dependencies = [ + ('content', '0009_feed_created_at'), + ] + + operations = [ + migrations.AddField( + model_name='feed', + name='univ', + field=models.CharField(default=django.utils.timezone.now, max_length=15), + preserve_default=False, + ), + ] diff --git a/campics_/content/migrations/0011_remove_feed_created_at.py b/campics_/content/migrations/0011_remove_feed_created_at.py new file mode 100644 index 0000000000000000000000000000000000000000..17f8b920d16d78c2d223c6b19e99253a8da721bf --- /dev/null +++ b/campics_/content/migrations/0011_remove_feed_created_at.py @@ -0,0 +1,17 @@ +# Generated by Django 4.0.4 on 2022-06-01 08:39 + +from django.db import migrations + + +class Migration(migrations.Migration): + + dependencies = [ + ('content', '0010_feed_univ'), + ] + + operations = [ + migrations.RemoveField( + model_name='feed', + name='created_at', + ), + ] diff --git a/campics_/content/migrations/0012_feedview_feed_type_feed_views_and_more.py b/campics_/content/migrations/0012_feedview_feed_type_feed_views_and_more.py new file mode 100644 index 0000000000000000000000000000000000000000..a1c273128c10f4faea0d391258365088b8c3ab9d --- /dev/null +++ b/campics_/content/migrations/0012_feedview_feed_type_feed_views_and_more.py @@ -0,0 +1,35 @@ +# Generated by Django 4.0.4 on 2022-06-04 03:37 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('content', '0011_remove_feed_created_at'), + ] + + operations = [ + migrations.CreateModel( + name='FeedView', + fields=[ + ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), + ('email', models.EmailField(max_length=100, verbose_name='email')), + ('feed_id', models.IntegerField()), + ], + ), + migrations.AddField( + model_name='feed', + name='type', + field=models.BooleanField(default=False), + ), + migrations.AddField( + model_name='feed', + name='views', + field=models.IntegerField(default=0), + ), + migrations.AddIndex( + model_name='feedview', + index=models.Index(fields=['email'], name='content_fee_email_a02fc8_idx'), + ), + ] diff --git a/campics_/content/models.py b/campics_/content/models.py index 789c1c388575d31264b757e82539f4730b374328..fad019284df68f737eec213f508c4c289a6a83ff 100644 --- a/campics_/content/models.py +++ b/campics_/content/models.py @@ -1,5 +1,5 @@ from django.db import models - +from django.utils import timezone # Create your models here. class Feed(models.Model): @@ -9,9 +9,22 @@ class Feed(models.Model): email = models.EmailField(verbose_name='email', max_length=100, blank=True, null=True) user_id = models.CharField(max_length=30, blank=True, null=True) like_count = models.IntegerField(default=0) - views = models.IntegerField(default=0) #조회수 + view_count = models.IntegerField(default=0) #조회수 type = models.BooleanField(default=False) #전경 포토존 - univ = models.CharField(max_length=30) #대학 + univ = models.CharField(max_length=15) + +class Reply(models.Model): + feed_id = models.IntegerField() + created_at = models.DateTimeField(auto_now_add=True) + user_id = models.CharField(max_length=30, blank=True, null=True) + content = models.TextField() + email = models.EmailField(verbose_name='email', max_length=100, blank=True, null=True) + + class Meta: + indexes = [ + models.Index(fields=['feed_id']) + ] + class FeedLike(models.Model): feed_id = models.IntegerField() @@ -24,8 +37,18 @@ class FeedLike(models.Model): models.Index(fields=['email']), ] - class FeedView(models.Model): + feed_id = models.IntegerField() + email = models.CharField(max_length=30, blank=True, null=True) + is_view = models.BooleanField(default=False) + + class Meta: + indexes = [ + models.Index(fields=['feed_id']), + models.Index(fields=['email']), + ] + +class Bookmark(models.Model): email = models.EmailField(verbose_name='email', max_length=100) feed_id = models.IntegerField() diff --git a/campics_/content/urls.py b/campics_/content/urls.py index fdd5cadf17cd010d9e61f35a2e641d02de288519..351165c72c51f72e4c917537be209d2baf415eaa 100644 --- a/campics_/content/urls.py +++ b/campics_/content/urls.py @@ -1,11 +1,16 @@ from django.urls import path -from .views import UploadFeed, LikeFeed, DeleteFeed, searchUniv, searchUser +from .views import UploadFeed, CreateReply, LikeFeed, ViewFeed, BookmarkFeed, DeleteFeed, searchUniv, searchUser urlpatterns = [ path('upload', UploadFeed.as_view(), name='upload_feed'), path('delete', DeleteFeed.as_view(), name='delete_feed'), path('like', LikeFeed.as_view(), name='like'), + path('view', ViewFeed.as_view(), name='view'), + path('bookmark', BookmarkFeed.as_view(), name='bookmark'), + + ## 시환님꺼 + path('delete', DeleteFeed.as_view(), name='delete_feed'), path('searchUniv', searchUniv.as_view(), name='seacrh_univ'), path('searchUser', searchUser.as_view(), name='search_user'), ] diff --git a/campics_/content/views.py b/campics_/content/views.py index 39bd045113dfac04347150ec432aa3a6b4dbcdac..74843aea4e8bd2d2a7496d42b1029eaec34176d4 100644 --- a/campics_/content/views.py +++ b/campics_/content/views.py @@ -1,6 +1,6 @@ from django.shortcuts import render from rest_framework.views import APIView -from content.models import Feed, FeedLike, FeedView +from content.models import Feed, Reply, FeedLike, FeedView, Bookmark from rest_framework.response import Response from user.models import User, Univ from rest_framework.response import Response @@ -73,6 +73,87 @@ class LikeFeed(APIView): return Response(status=200, data=dict(message='피드 좋아요 완료.')) +class ViewFeed(APIView): + def post(self, request): + feed_id = request.data.get('feed_id') #id? + email = request.data.get('email') + is_view = request.data.get('is_view', 'True') + + if is_view.lower() == 'false': + is_view = False + else: + is_view = True + feed_view = FeedView.objects.filter(feed_id=feed_id, email=email).first() + + if feed_view is None: + FeedView.objects.create(feed_id=feed_id, + email=email, + is_view=is_view, + ) + else: + feed_view.is_view = is_view + feed_view.save() + + return Response(status=200, data=dict(message='피드 조회 완료.')) + +class CreateReply(APIView): + def post(self, request): + feed_id = request.data.get('feed_id') + email = request.data.get('email') + + # feed_id = 1 + # email = "ksshhses@ajou.ac.kr" + + feed = Feed.objects.filter(id=feed_id).first() + + if feed is None: + return Response(status=500, data=dict(message='삭제 실패')) + + if feed.email == email: + feed.delete() + return render(request, "jinstagram/main.html") #프로필페이지 + else: + return Response(status=500, data=dict(message='삭제 실패')) + +class searchUniv(APIView): + def get(self, request): + # search_word = request.data.get('univ') + search_word = '대학' + + univ_list = Univ.objects.filter(univ__contains=search_word).values('univ') + + if univ_list.count() == 0: + return Response(status=404, data=dict(message='대학이 없습니다.')) + else: + return Response(status=200, data=dict(univ=univ_list)) + +class searchUser(APIView): + def get(self, request): + # search_word = request.data.get('user') + search_word = 's1' + user_list = Feed.objects.filter(user_id__contains=search_word) # .values() 뭐 필요? + + return Response(status=200, data=dict(message='북마크 설정 완료.')) + +## 시환님꺼 +class DetailFeed(APIView): + def get(self, request): + email = request.session.get('email', None) + if email is None: + return render(request, 'user/login.html') + + user = User.objects.filter(email=email).first() + if user is None: + return render(request, 'user/login.html') + + # feed 가지고 오기 + feed = Feed.objects.get(feed_id=id) + + if feed.email == user.email: + return(request, 'deatil_delete.html', feed) + else: + return(request, 'detail.html', feed) + class DeleteFeed(APIView): def post(self, request): feed_id = request.data.get('feed_id') diff --git a/campics_/jinstagram/urls.py b/campics_/jinstagram/urls.py index cc94fc43daf895f7b955bf4e8e8bb3162ccf892c..55f4a9bbf8d6ff629c98429553274be28aede739 100644 --- a/campics_/jinstagram/urls.py +++ b/campics_/jinstagram/urls.py @@ -14,7 +14,7 @@ Including another URLconf 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) """ from django.urls import path -from .views import Main, Profile, Ranking +from .views import Main, Post, Profile, Ranking from django.conf import settings from django.conf.urls.static import static from django.urls import path, include @@ -22,6 +22,7 @@ from django.urls import path, include urlpatterns = [ path('', Main.as_view(), name='main'), + path('post', Post.as_view(), name='post'), path('profile', Profile.as_view(), name='profile'), path('ranking', Ranking.as_view(), name='ranking'), path('user/', include('user.urls')), diff --git a/campics_/jinstagram/views.py b/campics_/jinstagram/views.py index 046a52f8780ef6075818199e236b2d9a0b2244a3..dc1d830156053017d761b219f39888696eb3e79a 100644 --- a/campics_/jinstagram/views.py +++ b/campics_/jinstagram/views.py @@ -1,11 +1,108 @@ from django.shortcuts import render from rest_framework.views import APIView -from content.models import Feed, FeedLike, FeedView -from user.models import User, Univ +from content.models import Feed, Reply, FeedLike, FeedView, Bookmark +from user.models import User, Follow, Univ from django.db.models import Count, Sum - class Main(APIView): + def get(self, request): + email = request.session.get('email', None) + if email is None: + return render(request, 'user/login.html') + + user = User.objects.filter(email=email).first() + if user is None: + return render(request, 'user/login.html') + + feed_object_list = Feed.objects.filter(univ=user.univ).order_by('-id') + + ##### 게시글 정렬 ##### + order_condition = request.GET.get('order', None) + + if order_condition == 'recent': + feed_object_list.order_by('-id') + + if order_condition == 'likesCount': + feed_object_list.order_by('-like_count') + + #################### + + row_feed_list = [] + feed_list = [] + for feed in feed_object_list: + like_count = FeedLike.objects.filter(feed_id=feed.id, is_like=True).count() + is_like = FeedLike.objects.filter(feed_id=feed.id, is_like=True, email=email).exists() + row_feed_list.append(dict( + id=feed.id, + user_id=feed.user_id, + image=feed.image, + like_count=like_count, + is_like=is_like, + )) + + if len(row_feed_list) == 3: + feed_list.append(dict(row_feed_list=row_feed_list)) + row_feed_list = [] + + if len(row_feed_list) > 0: + feed_list.append(dict(row_feed_list=row_feed_list)) + + return render(request, + 'jinstagram/imgboard.html', + context=dict(feed_list=feed_list, + user=user)) + +class Post(APIView): + def get(self, request): + email = request.session.get('email', None) + if email is None: + return render(request, 'user/login.html') + + user = User.objects.filter(email=email).first() + if user is None: + return render(request, 'user/login.html') + + id=request.data.get('id') + feed = Feed.objects.get(id=id) + like_count = FeedLike.objects.filter(feed_id=feed.id, is_like=True).count() + feed.like_count=like_count + is_like = FeedLike.objects.filter(feed_id=feed.id, is_like=True, email=email).exists() + view_count = FeedView.objects.filter(feed_id=feed.id, is_view=True).count() + feed.view_count = view_count + is_view = FeedView.objects.filter(feed_id=feed.id, is_view=True, email=email).exists() + feed.save() + + profile_image = User.objects.filter(email=feed.email).first().thumbnail or 'default_profile.jpg' + print(like_count) + return render(request, + 'jinstagram/post.html', + context=dict(id=feed.id, + profile_image=profile_image, + user_id=feed.user_id, + image=feed.image, + content=feed.content, + like_count=like_count, + is_like=is_like, + view_count=view_count, + is_view=is_view + )) + + +class Ranking(APIView): + def get(self, request): + + univ_list = Feed.objects.values('univ')\ + .annotate(score=Count('univ') + Sum('views') + Sum('like_count'))\ + .order_by('-score') + + print(univ_list) + for i in range(len(univ_list)): + print(i, univ_list[i]['univ']) + return render(request, + 'jinstagram/ranking.html', + context=dict(univ_list=univ_list)) + +class Detail(APIView): def get(self, request): email = request.session.get('email', None) if email is None: @@ -32,7 +129,7 @@ class Main(APIView): )) return render(request, - 'jinstagram/main.html', + 'jinstagram/boarddetail.html', context=dict(feed_list=feed_list, user=user)) diff --git a/campics_/templates/.DS_Store b/campics_/templates/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..dd593c5d56897d4102c20f74dfe1cbb93d7d15a1 Binary files /dev/null and b/campics_/templates/.DS_Store differ diff --git a/campics_/templates/jinstagram/imgboard.html b/campics_/templates/jinstagram/imgboard.html index 39851794245dca403b8f4a204ab4825e53b28fc6..dac3326f661cd72a94b9078b62611bf6f1940b4d 100644 --- a/campics_/templates/jinstagram/imgboard.html +++ b/campics_/templates/jinstagram/imgboard.html @@ -9,10 +9,241 @@ <title>포토존</title> <link href="{% static '/css/bootstrap.css' %}" rel="stylesheet" > <link rel="stylesheet" href="{% static '/bootstrap-icons-1.8.2/bootstrap-icons.css' %}"> - <script src="{% static '/jquery/jquery.min.js' %}"></script> + <!-- <script src="{% static '/jquery/jquery.min.js' %}"></script> --> <script src="{% static '/js/bootstrap.min.js' %}"></script> + <!-- 요기에 구글 머티리얼 아이콘 --> + <link + href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" + rel="stylesheet"> + + <!-- jquery 사용하기 위해 --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> + + <style> + .main_body { + display: flex; + justify-content: center; + padding-top: 50px; + background-color: #FAFAFA; + } + + .left_body { + {#background-color: skyblue;#} margin-right: 100px; + width: 600px; + height: 2000px; + display: flex; + flex-direction: column; + } + + .right_body { + {#background-color: yellow;#} padding-top: 20px; + width: 300px; + height: 1000px; + left: 72%; + position: fixed + } + + .feed_box { + background-color: white; + width: 580px; + margin: 10px; + min-height: auto; + padding-bottom: 10px; + } + + .feed_img { + width: 100%; + object-fit: contain; + } + + .feed_content { + padding: 0px 10px; + } + + .feed_like { + padding: 0px 10px; + } + + .feed_reply { + padding: 0px 10px; + display: flex; + flex-direction: column; + } + + + .feed_txt { + font-size: 14px; + } + + + .feed_icon { + padding: 5px 5px 0px 5px; + display: flex; + justify-content: space-between; + } + + span { + padding-right: 5px; + } + + .feed_name { + padding: 10px; + display: flex; + align-items: center; + } + + .feed_name_txt { + font-size: 14px; + padding: 0px 10px; + font-weight: bold; + } + + .profile_box { + width: 40px; + height: 40px; + border-radius: 70%; + overflow: hidden; + } + + .profile_img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .name_content { + display: flex; + flex-direction: column; + } + + .name_content_txt { + font-size: 12px; + padding: 0px 10px; + font-weight: bold; + color: lightgray; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 190px; + } + + .big_profile_box { + width: 60px; + height: 60px; + border-radius: 70%; + overflow: hidden; + } + + .link_txt { + font-size: 14px; + font-weight: bold; + cursor: pointer; + text-decoration: none; + } + + .recommend_box { + display: flex; + justify-content: space-between; + padding: 5px; + font-size: 14px; + font-weight: bold; + align-items: center; + } + + .comment_box { + margin: 40px 0 0 5px; + font-size: 12px; + font-weight: bold; + color: lightgray; + display: flex; + flex-direction: column; + } + + @media screen and (max-width: 1280px) { + .right_body { + display: none; + } + } + + .modal_overlay { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + background: rgba(0,0,0,0.8); + backdrop-filter: blur(1.5px); + -webkit-backdrop-filter: blur(1.5px); + } + + .modal_window { + background: white; + backdrop-filter: blur(13.5px); + -webkit-backdrop-filter: blur(13.5px); + border-radius: 10px; + border: 1px solid rgba(255,255,255,0.18); + width: 800px; + height: 600px; + position: relative; + padding: 10px; + } + + + .modal_title{ + display: flex; + flex-direction: row; + justify-content: space-between; + font-weight: bold; + font-size: 20px; + } + + .modal_title_side{ + flex: 0 0 40px; + text-align: center; + } + + .modal_image_upload{ + outline: 2px dashed black ; + outline-offset:-10px; + text-align: center; + transition: all .15s ease-in-out; + width:780px; + height: 548px; + } + + .modal_image_upload_content{ + outline: 2px dashed black ; + outline-offset:-10px; + text-align: center; + transition: all .15s ease-in-out; + width:500px; + height: 548px; + } + + .modal_image_content{ + display: flex; + flex-direction: row; + } + + .modal_content_write{ + display: flex; + flex-direction: column; + border-left: 1px solid rgba(0, 0, 0, 0.18);; + } + + .feed_content_textarea{ + resize: none; + width: 294px; + border: none; + } + </style> + <body> <div class="container"> <!-- Page Top Start --> @@ -20,112 +251,37 @@ <div class="text-bg-primary py-1" > <div class="row align-middle"> <div class="col col-2 text-start"> - <a href="login.html" class="btn btn-sm fs-4 fw-bold text-light "> + <a href="{% url 'login' %}" class="btn btn-sm fs-4 fw-bold text-light "> <i class="bi bi-arrow-bar-left fs"></i> </a> </div> <div class="col col-8 text-center "> - <span class="fs-3 fw-normal align-middle" >아주대학교</span> + <span class="fs-3 fw-normal align-middle" >{{ user.univ }}</span> </div> <div class="col col-2 text-end" > - <a href="#" class="btn btn-sm fs-4 fw-bold text-light "> + <a href="#" class="btn btn-sm fs-4 fw-bold text-light "> <!-- 정렬 버튼--> + <i class="bi bi-filter fs"></i> + </a> + <a href="#" class="btn btn-sm fs-4 fw-bold text-light "> <!-- 정렬 버튼--> <i class="bi bi-filter fs"></i> </a> </div> + </div> </div> </div> <!-- Page Top End --> <!-- Page Content Start --> <div class="mt-5"> - <div class="row "> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - </div> - <div class="row "> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - </div> - <div class="row "> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - </div> - <div class="row "> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - </div> - <div class="row "> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - </div> - <div class="row "> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> + {% for feed in feed_list %} + <div class="row " style="display: flex; flex-direction: row"> + {% for row_feed in feed.row_feed_list %} + <div class="col col-4 g-1"> + <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}" width="400px" height="300px"> + </div> + {% endfor %} </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - </div> - <div class="row "> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - </div> - <div class="row "> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - <a href="boarddetail.html"><img src="{% static '/img/empty.png' %}" class="rounded img-fluid " alt="..."></a> - </div> - <div class="col col-4 g-1"> - - </div> - </div> + {% endfor %} </div> <!-- Page Content end --> @@ -134,29 +290,35 @@ <div class="text-bg-primary py-1" > <div class="row align-middle"> <div class="col col-2 text-center"> - <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light" alt="my univ"> + <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light" alt="my univ"> <i class="bi bi-view-list fs"></i> </a> </div> <div class="col col-2 text-center"> - <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light" alt="all"> + <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light" alt="all"> <i class="bi bi-view-stacked fs"></i> </a> </div> <div class="col col-2 text-center"> - <a href="ranking.html" class="btn btn-sm fs-3 fw-bold text-light " alt="ranking"> + <a href="{% url 'ranking' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="ranking"> <i class="bi bi-list-ol fs"></i> </a> </div> <div class="col col-2 text-center"> - <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light " alt="my list"> + <a href="{% url 'profile' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="my list"> <i class="bi bi-tags fs"></i> </a> </div> <div class="col col-2 text-center"> - <a href="add.html" class="btn btn-sm fs-3 fw-bold text-light " alt="등록"> + <!-- <span id="add_feed" class="btn btn-sm fs-3 fw-bold text-light" alt="등록"> <i class="bi bi-plus-circle fs"></i> - </a> + </span> --> + <span id="add_feed" class="btn btn-sm fs-3 fw-bold text-light " alt="등록"> + <i class="bi bi-plus-circle fs"></i> + </span> + <!-- <a href="add.html" id="add_feed" class="btn btn-sm fs-3 fw-bold text-light " alt="등록"> + <i class="bi bi-plus-circle fs"></i> + </a> --> </div> <div class="col col-2 text-center"> <a href="univserach.html" class="btn btn-sm fs-3 fw-bold text-light " alt="대학검색"> @@ -168,5 +330,209 @@ </div> <!-- Page bottom End --> </div> + + <div id="modal_add_feed" class="modal_overlay"> + <div class="modal_window"> + <div class="modal_title"> + <div class="modal_title_side"></div> + <div> 새 게시물 </div> + <div class="modal_title_side"> + <span id="close_modal" class="material-icons-outlined"> + close + </span> + + </div> + </div> + + <div class="modal_image_upload"> + <span style="text-align: center"></span> + </div> + </div> + </div> + + + <div id="modal_add_feed_content" class="modal modal_overlay_content"> + <div class="modal_window"> + <div class="modal_title"> + <div class="modal_title_side"></div> + <div style="margin: 5px"> 새 게시물</div> + <div class="modal_title_side"> + <span id="close_modal" class="close_modal material-icons-outlined" style="font-size: 30px"> + close + </span> + </div> + </div> + <div class="modal_image_content"> + <div id="input_image" class="modal_image_upload_content"> + + </div> + <div class="modal_content_write"> + <div class="feed_name"> + <div class="profile_box"> + <img id="input_profile_image" class="profile_img" + src="{% get_media_prefix %}{{ user.thumbnail }}"> + </div> + <span id="input_user_id" class="feed_name_txt"> {{ user.user_id }} </span> + <span id="input_email" style="display: none"> {{ user.email }} </span> + </div> + <div style="height: 440px"> + <textarea id="input_content" class="feed_content_textarea form-control col-sm-5" rows="10" + placeholder="설명을 입력하세요..."></textarea> + </div> + <div style="width: 100%; text-align: center"> + <button id="button_write_feed" type="button" class="btn btn-primary" style="width: 268px"> 공유하기 + </button> + </div> + </div> + </div> + + </div> + </div> + + + + <!-- Optional JavaScript; choose one of the two! --> +<script> + // 모달 띄우기 코드 + const modal = document.getElementById("modal_add_feed"); + const buttonAddFeed = document.getElementById("add_feed"); + buttonAddFeed.addEventListener("click", e => { + modal.style.top = window.pageYOffset + 'px'; // top을 이용해 시작 y위치를 바꿔줌 + modal.style.display = "flex"; + }); + + // 모달 닫기 코드 + const buttonCloseModal = document.getElementById("close_modal"); + buttonCloseModal.addEventListener("click", e => { + modal.style.display = "none"; + }); + + $('.close_modal').on("click", () => { + closeModal(); + }); + + $('.go_home').on("click", () => { + location.replace('/'); + }); + + function closeModal() { + $('.modal').css({ + display: 'none' + }); + }; + + $('.modal_image_upload') + .on("dragover", dragOver) + .on("dragleave", dragOver) + .on("drop", uploadFiles); + + function dragOver(e) { + e.stopPropagation(); + e.preventDefault(); + + if (e.type == "dragover") { + $(e.target).css({ + "background-color": "black", + "outline-offset": "-20px" + }); + } else { + $(e.target).css({ + "background-color": "white", + "outline-offset": "-10px" + }); + } + }; + + let files; + + function uploadFiles(e) { + e.stopPropagation(); + e.preventDefault(); + console.log(e.dataTransfer) + console.log(e.originalEvent.dataTransfer) + + e.dataTransfer = e.originalEvent.dataTransfer; + + files = e.dataTransfer.files; + if (files.length > 1) { + alert('하나만 올려라.'); + return; + } + + if (files[0].type.match(/image.*/)) { + $('#modal_add_feed_content').css({ + display: 'flex' + }); + $('.modal_image_upload_content').css({ + "background-image": "url(" + window.URL.createObjectURL(files[0]) + ")", + "outline": "none", + "background-size": "contain", + "background-repeat": "no-repeat", + "background-position": "center" + }); + $('#modal_add_feed').css({ + display: 'none' + }) + } else { + alert('이미지가 아닙니다.'); + return; + } + }; + + $('#button_write_feed').on('click', () => { + const image = $('#input_image').css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'); + const content = $('#input_content').val(); + const profile_image = $('#input_profile_image').attr('src'); + const user_id = $.trim($('#input_user_id').text()); + const email = $.trim($('#input_email').text()); + const univ = $.trim($('#input_univ').text()); + + const file = files[0]; + + let fd = new FormData(); + + fd.append('file', file); + fd.append('image', image); + fd.append('content', content); + fd.append('profile_image', profile_image); + fd.append('user_id', user_id); + fd.append('email', email); + fd.append('univ', univ); + + if (image.length <= 0) { + alert("이미지가 비어있습니다."); + } else if (content.length <= 0) { + alert("설명을 입력하세요"); + } else if (profile_image.length <= 0) { + alert("프로필 이미지가 비어있습니다."); + } else if (user_id.length <= 0) { + alert("사용자 id가 없습니다."); + } else { + writeFeed(fd); + console.log(files[0]); + } + }); + + function writeFeed(fd) { + $.ajax({ + url: "/content/upload", + data: fd, + method: "POST", + processData: false, + contentType: false, + success: function (data) { + console.log("성공"); + }, + error: function (request, status, error) { + console.log("에러"); + }, + complete: function () { + console.log("무조건실행"); + closeModal(); + location.reload(); + } + }) + }; +</script> </body> </html> \ No newline at end of file diff --git a/campics_/templates/jinstagram/main.html b/campics_/templates/jinstagram/main.html index eec4de9f28e3c2c99864cc823168e847bfb25c60..1ded46a727c7a7dbdf076873f8d35e3be8236645 100644 --- a/campics_/templates/jinstagram/main.html +++ b/campics_/templates/jinstagram/main.html @@ -535,131 +535,6 @@ document.body.style.overflowY = "hidden"; // 스크롤 없애기 }); - <!-- jquery 부분 --> - <!-- @@@댓글 달기 --> - $('.write_reply').click(function () { - console.log($(this).prev().val()); - console.log($(this).attr('feed_id')); - let success = false; - let content = $(this).prev().val(); - let feed_id = Number($(this).attr('feed_id')); - - $.ajax({ - url: "/content/reply/create", - data: { - email: '{{ user.email }}', - user_id: '{{ user.user_id }}', - content: content, - feed_id: feed_id - }, - method: "POST", - dataType: "json", - async: false, - success: function (data){ - alert(data.message); - success=true - }, - error:function (request, status, error){ - let data = JSON.parse(request.responseText); - console.log(data.message); - alert(data.message); - } - }); - console.log(success) - if(success == true){ - $(this).parent().prev().append('<span class="feed_txt"><b> {{ user.user_id }} </b> '+ content +' </span>'); - $('.write_reply_input').val(''); - } - }); - - <!-- @@@좋아요 누르기 --> - $('.favorite_icon').click(function () { - console.log($(this).prev().val()); - console.log($(this).attr('feed_id')); - let success = false; - let icon = $.trim($(this).html()); - console.log('지금현재 상태 : ' + icon); - let is_like = false; - if( icon == 'favorite_border'){ - is_like = true; - } - let feed_id = Number($(this).attr('feed_id')); - - $.ajax({ - url: "/content/like", - data: { - email: '{{ user.email }}', - is_like: is_like, - feed_id: feed_id - }, - method: "POST", - dataType: "json", - async: false, - success: function (data){ - success=true - }, - error:function (request, status, error){ - let data = JSON.parse(request.responseText); - console.log(data.message); - } - }); - console.log(success) - if(success == true){ - console.log(is_like) - if(is_like){ - $(this).html('favorite'); - let like_count_object = $(this).parent().parent().next().find('p').find('span'); - let like_count = Number(like_count_object.html()); - like_count_object.html(like_count + 1); - console.log(like_count); - }else{ - $(this).html('favorite_border'); - let like_count_object = $(this).parent().parent().next().find('p').find('span'); - let like_count = Number(like_count_object.html()); - like_count_object.html(like_count - 1); - console.log(like_count); - } - } - }); - - <!-- @@@북마크 누르기 --> - $('.bookmark_icon').click(function () { - let success = false; - let icon = $.trim($(this).html()); - let is_bookmarked = false; - if( icon == 'turned_in_not'){ - is_bookmarked = true; - } - let feed_id = Number($(this).attr('feed_id')); - - $.ajax({ - url: "/content/bookmark", - data: { - email: '{{ user.email }}', - is_bookmarked: is_bookmarked, - feed_id: feed_id - }, - method: "POST", - dataType: "json", - async: false, - success: function (data){ - success=true - }, - error:function (request, status, error){ - let data = JSON.parse(request.responseText); - } - }); - if(success == true){ - if(is_bookmarked){ - $(this).html('turned_in'); - }else{ - $(this).html('turned_in_not'); - } - } - }); - - - $('.close_modal').on("click", () => { closeModal(); }); @@ -741,6 +616,7 @@ const profile_image = $('#input_profile_image').attr('src'); const user_id = $.trim($('#input_user_id').text()); const email = $.trim($('#input_email').text()); + const univ = $.trim($('#input_univ').text()); const file = files[0]; @@ -752,6 +628,7 @@ fd.append('profile_image', profile_image); fd.append('user_id', user_id); fd.append('email', email); + fd.append('univ', univ); if (image.length <= 0) { alert("이미지가 비어있습니다."); diff --git a/campics_/templates/jinstagram/profile copy.html b/campics_/templates/jinstagram/profile copy.html new file mode 100644 index 0000000000000000000000000000000000000000..66cda95b04fad2c8955bd5107451b066ed4c621f --- /dev/null +++ b/campics_/templates/jinstagram/profile copy.html @@ -0,0 +1,651 @@ +<!doctype html> +<html lang="en"> +<head> + {% load static %} + <!-- Required meta tags --> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <!-- Bootstrap CSS --> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" + integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> + + <!-- 요기에 구글 머티리얼 아이콘 --> + <link + href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" + rel="stylesheet"> + + <!-- jquery 사용하기 위해 --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> + + <title>여기에 진스타그램 만들꺼임 </title> +</head> + +<style> + .main_body { + display: flex; + justify-content: center; + padding-top: 50px; + z-index: 1; + background-color: #FAFAFA; + } + .sub_body{ + display: flex; + justify-content: center; + flex-direction: column; + min-width: 780px; + } + + span { + padding-right: 5px; + } + + .feed_name { + padding: 10px; + display: flex; + align-items: center; + } + + .row_feed { + width: 240px; + height: 240px; + object-fit: cover; + margin: 10px; + } + + .feed_name_txt { + font-size: 14px; + padding: 0px 10px; + font-weight: bold; + } + + .profile_box { + width: 40px; + height: 40px; + border-radius: 70%; + overflow: hidden; + } + + .navi_profile_box { + width: 30px; + height: 30px; + border-radius: 70%; + overflow: hidden; + cursor: pointer; + } + + .profile_img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .modal { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(1.5px); + -webkit-backdrop-filter: blur(1.5px); + } + + .modal_window { + background: white; + backdrop-filter: blur(13.5px); + -webkit-backdrop-filter: blur(13.5px); + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.18); + width: 800px; + height: 600px; + position: relative; + } + + .modal_title { + display: flex; + flex-direction: row; + justify-content: space-between; + font-weight: bold; + font-size: 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.18); + } + + .modal_title_side { + margin: 5px; + flex: 0 0 40px; + text-align: center; + } + + .modal_image_upload { + outline: 2px dashed black; + outline-offset: -10px; + transition: all .15s ease-in-out; + width: 798px; + height: 548px; + text-align: center; + line-height: 548px; + } + + .modal_image_upload_content { + outline: 2px dashed black; + outline-offset: -10px; + text-align: center; + transition: all .15s ease-in-out; + width: 500px; + height: 548px; + } + + .modal_image_content { + display: flex; + flex-direction: row; + } + + .modal_content_write { + display: flex; + flex-direction: column; + border-left: 1px solid rgba(0, 0, 0, 0.18);; + } + + .feed_content_textarea { + resize: none; + width: 294px; + border: none; + } + + .navi_icons { + padding-right: 18px; + font-size: 28px; + cursor: pointer; + } + + .big_profile_box { + width: 150px; + height: 150px; + border-radius: 70%; + overflow: hidden; + margin: 30px; + } + +</style> + +<body> + +<div style="min-width: 1024px"> + <!-- 상단 내비게이션 바 --> + <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom" + style="width: 100%;height: 50px;position: fixed;z-index: 9999"> + <div class="container" style="min-width: 800px"> + <img class="go_home" style="height: 30px; object-fit: contain;cursor: pointer" + src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png"> + <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search"> + <div style="display: flex; flex-direction: row; align-items: center; "> + <span class="material-icons navi_icons go_home">home</span> + <span id="add_feed" class="material-icons-outlined navi_icons">add_box</span> + <span class="material-icons-outlined navi_icons">explore</span> + <span class="material-icons-outlined navi_icons "> + favorite_border + </span> + <div class="dropdown" style="position: relative; z-index: 9999"> + <div class="navi_profile_box" id="dropdownMenuButton1" + data-bs-toggle="dropdown" aria-expanded="false"> + <img class="profile_img" + src="{% get_media_prefix %}{{ user.thumbnail }}"> + </div> + + <ul class="dropdown-menu" style="left: -130px" aria-labelledby="dropdownMenuButton1"> + <li><a class="dropdown-item" href="#">프로필</a></li> + <li><a class="dropdown-item" href="#">저장됨</a></li> + <li> + <hr class="dropdown-divider"> + </li> + <li><a class="dropdown-item" href="{% url 'logout' %}">로그아웃</a></li> + </ul> + </div> + </div> + </div> + </nav> + + <!-- 바디 영역 --> + <div class="main_body"> + <div class="sub_body"> + <!-- 프로필 영역 --> + <div style="display: flex; flex-direction: row"> + <div class="big_profile_box"> + <img class="profile_img" + src="{% get_media_prefix %}{{ user.thumbnail }}"> + </div> + <div style="display: flex; flex-direction: column; margin: 40px 60px"> + <div class="mb-3" style="display: flex; flex-direction: row;"> + <div style="font-size: 24px"> {{ user.user_id }} </div> + <div> + <button id="button_write_feed" type="button" + style="margin-left: 10px;font-size: 14px;width: 120px; border: 1px solid silver; background-color: transparent" onclick="ajaxFileUpload()"> + 프로필사진 변경 + </button> + <input id="ajaxFile" type="file" onchange="ajaxFileChange()" name="profile" style="display: none"> + </div> + </div> + <div class="mb-3" style="display: flex; flex-direction: row; margin-right: 100px"> + <div style="margin-right: 30px;"> 게시물 <span style="font-weight: bold"> {{ feed_count }} </span></div> + <div style="margin-right: 30px"> 팔로워 <span style="font-weight: bold"> {{ follower_count }} </span></div> + <div style="margin-right: 30px"> 팔로우 <span style="font-weight: bold"> {{ following_count }} </span></div> + </div> + <div style="display: flex; flex-direction: row"> + <div style="font-size: 18px;font-weight: bold"> {{ user.name }} </div> + </div> + + </div> + </div> + <!-- 중앙 메뉴 --> + <div style="font-size: 14px;padding: 0 140px;border-top: 1px solid silver; display: flex;width: 100%; flex-direction: row; justify-content: space-evenly"> + <div target_id="menu_feed" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px; border-top: 1px solid gray;font-weight: bold"> <span class="material-icons-outlined" style="font-size: 16px"> +grid_on +</span> 게시물 </div> + <div target_id="menu_bookmark" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px;font-weight: lighter"> <span class="material-icons-outlined" style="font-size: 16px"> +bookmark_border +</span> 저장됨 </div> + <div target_id="menu_taged" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px;font-weight: lighter"> <span class="material-icons-outlined" style="font-size: 16px"> +assignment_ind +</span>태그됨 </div> + </div> + <!-- 하단 컨텐츠 --> + <div id="menu_feed" class="menu_content_box" style="display: flex; flex-direction: column"> + {% for feed in feed_list %} + <div style="display: flex; flex-direction: row"> + {% for row_feed in feed.row_feed_list %} + <div> + <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}" > + </div> + {% endfor %} + </div> + {% endfor %} + </div> + <div id="menu_bookmark" class="menu_content_box" style="display: none; flex-direction: column"> + {% for feed in bookmark_feed_list %} + <div style="display: flex; flex-direction: row"> + {% for row_feed in feed.row_bookmark_feed_list %} + <div> + <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}"> + </div> + {% endfor %} + </div> + {% endfor %} + </div> + <div id="menu_taged" class="menu_content_box" style="display: none; flex-direction: column"> + {% for feed in feed_list %} + <div style="display: flex; flex-direction: row"> + {% for row_feed in feed.row_feed_list %} + <div> + <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}"> + </div> + {% endfor %} + </div> + {% endfor %} + </div> + </div> + + </div> + + +</div> +<div id="modal_add_feed" class="modal modal_overlay"> + <div class="modal_window"> + <div class="modal_title"> + <div class="modal_title_side"></div> + <div> 새 게시물</div> + <div class="modal_title_side"> + <span id="close_modal" class="close_modal material-icons-outlined" style="font-size: 30px"> + close + </span> + </div> + </div> + <div class="modal_image_upload"> + <span style="text-align: center"> 사진을 여기에 끌어다 놓으세요. </span> + + </div> + </div> +</div> + +<div id="modal_add_feed_content" class="modal modal_overlay_content"> + <div class="modal_window"> + <div class="modal_title"> + <div class="modal_title_side"></div> + <div style="margin: 5px"> 새 게시물</div> + <div class="modal_title_side"> + <span id="close_modal" class="close_modal material-icons-outlined" style="font-size: 30px"> + close + </span> + </div> + </div> + <div class="modal_image_content"> + <div id="input_image" class="modal_image_upload_content"> + + </div> + <div class="modal_content_write"> + <div class="feed_name"> + <div class="profile_box"> + <img id="input_profile_image" class="profile_img" + src="{% get_media_prefix %}{{ user.thumbnail }}"> + </div> + <span id="input_user_id" class="feed_name_txt"> {{ user.user_id }} </span> + <span id="input_email" style="display: none"> {{ user.email }} </span> + </div> + <div style="height: 440px"> + <textarea id="input_content" class="feed_content_textarea form-control col-sm-5" rows="10" + placeholder="설명을 입력하세요..."></textarea> + </div> + <div style="width: 100%; text-align: center"> + <button id="button_write_feed" type="button" class="btn btn-primary" style="width: 268px"> 공유하기 + </button> + </div> + </div> + </div> + + </div> +</div> + +<!-- Optional JavaScript; choose one of the two! --> +<script> + // 모달 띄우기 코드 + const modal = document.getElementById("modal_add_feed"); + const buttonAddFeed = document.getElementById("add_feed"); + buttonAddFeed.addEventListener("click", e => { + modal.style.top = window.pageYOffset + 'px'; // top을 이용해 시작 y위치를 바꿔줌 + modal.style.display = "flex"; + document.body.style.overflowY = "hidden"; // 스크롤 없애기 + }); + + <!-- jquery 부분 --> + <!-- @@@댓글 달기 --> + $('.write_reply').click(function () { + console.log($(this).prev().val()); + console.log($(this).attr('feed_id')); + let success = false; + let content = $(this).prev().val(); + let feed_id = Number($(this).attr('feed_id')); + + $.ajax({ + url: "/content/reply/create", + data: { + email: '{{ user.email }}', + user_id: '{{ user.user_id }}', + content: content, + feed_id: feed_id + }, + method: "POST", + dataType: "json", + async: false, + success: function (data) { + alert(data.message); + success = true + }, + error: function (request, status, error) { + let data = JSON.parse(request.responseText); + console.log(data.message); + alert(data.message); + } + }); + console.log(success) + if (success == true) { + $(this).parent().prev().append('<span class="feed_txt"><b> {{ user.user_id }} </b> ' + content + ' </span>'); + } + }); + + <!-- @@@좋아요 누르기 --> + $('.favorite_icon').click(function () { + console.log($(this).prev().val()); + console.log($(this).attr('feed_id')); + let success = false; + let icon = $.trim($(this).html()); + console.log('지금현재 상태 : ' + icon); + let is_like = false; + if (icon == 'favorite_border') { + is_like = true; + } + let feed_id = Number($(this).attr('feed_id')); + + $.ajax({ + url: "/content/like", + data: { + email: '{{ user.email }}', + is_like: is_like, + feed_id: feed_id + }, + method: "POST", + dataType: "json", + async: false, + success: function (data) { + alert(data.message); + success = true + }, + error: function (request, status, error) { + let data = JSON.parse(request.responseText); + console.log(data.message); + alert(data.message); + } + }); + console.log(success) + if (success == true) { + console.log(is_like) + if (is_like) { + $(this).html('favorite'); + let like_count_object = $(this).parent().parent().next().find('p').find('span'); + let like_count = Number(like_count_object.html()); + like_count_object.html(like_count + 1); + console.log(like_count); + } else { + $(this).html('favorite_border'); + let like_count_object = $(this).parent().parent().next().find('p').find('span'); + let like_count = Number(like_count_object.html()); + like_count_object.html(like_count - 1); + console.log(like_count); + } + } + }); + + + $('.close_modal').on("click", () => { + closeModal(); + }); + + function closeModal() { + $('.modal').css({ + display: 'none' + }); + $(document.body).css({ + overflowY: 'visible' + }); + }; + + $('.modal_image_upload') + .on("dragover", dragOver) + .on("dragleave", dragOver) + .on("drop", uploadFiles); + + function dragOver(e) { + e.stopPropagation(); + e.preventDefault(); + + if (e.type == "dragover") { + $(e.target).css({ + "background-color": "black", + "outline-offset": "-20px" + }); + } else { + $(e.target).css({ + "background-color": "white", + "outline-offset": "-10px" + }); + } + }; + + let files; + + function uploadFiles(e) { + e.stopPropagation(); + e.preventDefault(); + console.log(e.dataTransfer) + console.log(e.originalEvent.dataTransfer) + + e.dataTransfer = e.originalEvent.dataTransfer; + + files = e.dataTransfer.files; + if (files.length > 1) { + alert('하나만 올려라.'); + return; + } + + if (files[0].type.match(/image.*/)) { + $('#modal_add_feed_content').css({ + display: 'flex' + }); + $('.modal_image_upload_content').css({ + "background-image": "url(" + window.URL.createObjectURL(files[0]) + ")", + "outline": "none", + "background-size": "contain", + "background-repeat": "no-repeat", + "background-position": "center" + }); + $('#modal_add_feed').css({ + display: 'none' + }) + } else { + alert('이미지가 아닙니다.'); + return; + } + }; + + $('#button_write_feed').on('click', () => { + const image = $('#input_image').css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'); + const content = $('#input_content').val(); + const profile_image = $('#input_profile_image').attr('src'); + const user_id = $('#input_user_id').text(); + const email = $('#input_email').text(); + + const file = files[0]; + + let fd = new FormData(); + + fd.append('file', file); + fd.append('image', image); + fd.append('content', content); + fd.append('profile_image', profile_image); + fd.append('user_id', user_id); + fd.append('email', email); + + if (image.length <= 0) { + alert("이미지가 비어있습니다."); + } else if (content.length <= 0) { + alert("설명을 입력하세요"); + } else if (profile_image.length <= 0) { + alert("프로필 이미지가 비어있습니다."); + } else if (user_id.length <= 0) { + alert("사용자 id가 없습니다."); + } else { + writeFeed(fd); + console.log(files[0]); + } + }); + + function writeFeed(fd) { + $.ajax({ + url: "/content/upload", + data: fd, + method: "POST", + processData: false, + contentType: false, + success: function (data) { + console.log("성공"); + }, + error: function (request, status, error) { + console.log("에러"); + }, + complete: function () { + console.log("무조건실행"); + closeModal(); + location.reload(); + } + }) + }; + + $('.menu_content').click(function (event){ + $('.menu_content').css({ + 'border-top': 'none', + 'font-weight' : 'lighter' + }); + $(this).css({ + 'border-top' : '1px solid gray', + 'font-weight' : 'bold' + }); + + $('.menu_content_box').css({ + display : 'none' + }); + + let target_id = $(this).attr('target_id') + + $('#'+target_id).css({ + display : 'flex' + }); + }); + + $('.go_home').on("click", () => { + location.replace('/'); + }); + + function ajaxFileUpload() { + // 업로드 버튼이 클릭되면 파일 찾기 창을 띄운다. + $("#ajaxFile").click(); + } + + function ajaxFileChange() { + // 파일이 선택되면 업로드를 진행한다. + ajaxFileTransmit(); + } + + function ajaxFileTransmit() { + var formData = new FormData(); + formData.append("file", $("#ajaxFile")[0].files[0]); + + $.ajax({ + url : "{% url 'profile_update' %}" + , type : "POST" + , processData : false + , contentType : false + , data : formData + , dataType: "json" + , success:function(obj) { + let uuid = obj.uuid; + console.log(uuid); + $('.profile_img').attr('src','{% get_media_prefix %}' + uuid); + console.log($('.profile_img').attr('src')); + + } + }); + } + + +</script> + + +<!-- Option 1: Bootstrap Bundle with Popper --> +<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" + integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" + crossorigin="anonymous"> + + +</script> + +<!-- Option 2: Separate Popper and Bootstrap JS --> +<!-- +<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script> +<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script> +--> + +</body> +</html> \ No newline at end of file diff --git a/campics_/templates/jinstagram/profile.html b/campics_/templates/jinstagram/profile.html index 33cf4a58304451170e3d16dedf295d1fd620122a..824231672f3b89d341774dd69bb7750353317e49 100644 --- a/campics_/templates/jinstagram/profile.html +++ b/campics_/templates/jinstagram/profile.html @@ -1,651 +1,149 @@ +<!-- static 로딩 --> +{% load static %} + <!doctype html> -<html lang="en"> -<head> - {% load static %} - <!-- Required meta tags --> +<html lang="ko"> + <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> - - <!-- Bootstrap CSS --> - <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" - integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> - + <title>포토존</title> + <link href="{% static '/css/bootstrap.css' %}" rel="stylesheet" > + <link rel="stylesheet" href="{% static '/bootstrap-icons-1.8.2/bootstrap-icons.css' %}"> + <!-- <script src="{% static '/jquery/jquery.min.js' %}"></script> --> + <script src="{% static '/js/bootstrap.min.js' %}"></script> + <!-- 요기에 구글 머티리얼 아이콘 --> <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"> - <!-- jquery 사용하기 위해 --> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> - - <title>여기에 진스타그램 만들꺼임 </title> -</head> - -<style> - .main_body { - display: flex; - justify-content: center; - padding-top: 50px; - z-index: 1; - background-color: #FAFAFA; - } - .sub_body{ - display: flex; - justify-content: center; - flex-direction: column; - min-width: 780px; - } - - span { - padding-right: 5px; - } - - .feed_name { - padding: 10px; - display: flex; - align-items: center; - } - - .row_feed { - width: 240px; - height: 240px; - object-fit: cover; - margin: 10px; - } - - .feed_name_txt { - font-size: 14px; - padding: 0px 10px; - font-weight: bold; - } - - .profile_box { - width: 40px; - height: 40px; - border-radius: 70%; - overflow: hidden; - } - - .navi_profile_box { - width: 30px; - height: 30px; - border-radius: 70%; - overflow: hidden; - cursor: pointer; - } - - .profile_img { - width: 100%; - height: 100%; - object-fit: cover; - } - - .modal { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - display: none; - flex-direction: column; - align-items: center; - justify-content: center; - background: rgba(0, 0, 0, 0.8); - backdrop-filter: blur(1.5px); - -webkit-backdrop-filter: blur(1.5px); - } - - .modal_window { - background: white; - backdrop-filter: blur(13.5px); - -webkit-backdrop-filter: blur(13.5px); - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.18); - width: 800px; - height: 600px; - position: relative; - } - - .modal_title { - display: flex; - flex-direction: row; - justify-content: space-between; - font-weight: bold; - font-size: 20px; - border-bottom: 1px solid rgba(0, 0, 0, 0.18); - } - - .modal_title_side { - margin: 5px; - flex: 0 0 40px; - text-align: center; - } - - .modal_image_upload { - outline: 2px dashed black; - outline-offset: -10px; - transition: all .15s ease-in-out; - width: 798px; - height: 548px; - text-align: center; - line-height: 548px; - } - - .modal_image_upload_content { - outline: 2px dashed black; - outline-offset: -10px; - text-align: center; - transition: all .15s ease-in-out; - width: 500px; - height: 548px; - } - - .modal_image_content { - display: flex; - flex-direction: row; - } - - .modal_content_write { - display: flex; - flex-direction: column; - border-left: 1px solid rgba(0, 0, 0, 0.18);; - } - - .feed_content_textarea { - resize: none; - width: 294px; - border: none; - } - - .navi_icons { - padding-right: 18px; - font-size: 28px; - cursor: pointer; - } - - .big_profile_box { - width: 150px; - height: 150px; - border-radius: 70%; - overflow: hidden; - margin: 30px; - } - -</style> - -<body> - -<div style="min-width: 1024px"> - <!-- 상단 내비게이션 바 --> - <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom" - style="width: 100%;height: 50px;position: fixed;z-index: 9999"> - <div class="container" style="min-width: 800px"> - <img class="go_home" style="height: 30px; object-fit: contain;cursor: pointer" - src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png"> - <input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search"> - <div style="display: flex; flex-direction: row; align-items: center; "> - <span class="material-icons navi_icons go_home">home</span> - <span id="add_feed" class="material-icons-outlined navi_icons">add_box</span> - <span class="material-icons-outlined navi_icons">explore</span> - <span class="material-icons-outlined navi_icons "> - favorite_border - </span> - <div class="dropdown" style="position: relative; z-index: 9999"> - <div class="navi_profile_box" id="dropdownMenuButton1" - data-bs-toggle="dropdown" aria-expanded="false"> - <img class="profile_img" - src="{% get_media_prefix %}{{ user.thumbnail }}"> + <!-- jquery 사용하기 위해 --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> + </head> + + <body> + <div class="container"> + <!-- Page Top Start --> + <div class="fixed-top"> + <div class="text-bg-primary py-1" > + <div class="row align-middle"> + <div class="col col-2 text-start"> + <a href="{% url 'login' %}" class="btn btn-sm fs-4 fw-bold text-light "> + <i class="bi bi-arrow-bar-left fs"></i> + </a> </div> - - <ul class="dropdown-menu" style="left: -130px" aria-labelledby="dropdownMenuButton1"> - <li><a class="dropdown-item" href="#">프로필</a></li> - <li><a class="dropdown-item" href="#">저장됨</a></li> - <li> - <hr class="dropdown-divider"> - </li> - <li><a class="dropdown-item" href="{% url 'logout' %}">로그아웃</a></li> - </ul> + <div class="col col-8 text-center "> + <span class="fs-3 fw-normal align-middle" >{{ user.univ }}</span> + </div> + <div class="col col-2 text-end" > + <a href="#" class="btn btn-sm fs-4 fw-bold text-light "> + <i class="bi bi-filter fs"></i> + </a> + <a href="#" class="btn btn-sm fs-4 fw-bold text-light "> + <i class="bi bi-filter fs"></i> + </a> + </div> + </div> </div> </div> - </nav> - - <!-- 바디 영역 --> - <div class="main_body"> - <div class="sub_body"> - <!-- 프로필 영역 --> - <div style="display: flex; flex-direction: row"> - <div class="big_profile_box"> - <img class="profile_img" - src="{% get_media_prefix %}{{ user.thumbnail }}"> - </div> - <div style="display: flex; flex-direction: column; margin: 40px 60px"> - <div class="mb-3" style="display: flex; flex-direction: row;"> - <div style="font-size: 24px"> {{ user.user_id }} </div> - <div> - <button id="button_write_feed" type="button" - style="margin-left: 10px;font-size: 14px;width: 120px; border: 1px solid silver; background-color: transparent" onclick="ajaxFileUpload()"> - 프로필사진 변경 - </button> - <input id="ajaxFile" type="file" onchange="ajaxFileChange()" name="profile" style="display: none"> + <!-- Page Top End --> + <!-- Page Content Start --> + <div class="mt-5"> + {% for feed in feed_list %} + <div class="row " style="display: flex; flex-direction: row"> + {% for row_feed in feed.row_feed_list %} + <div class="col col-4 g-1"> + <a href="boarddetail.html"><img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}" width="400px" height="300px"></a> </div> + {% endfor %} + </div> + {% endfor %} + </div> + + + <!-- Page Content end --> + <!-- Page bottom Start --> + <div class="fixed-bottom"> + <div class="text-bg-primary py-1" > + <div class="row align-middle"> + <div class="col col-2 text-center"> + <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light" alt="my univ"> + <i class="bi bi-view-list fs"></i> + </a> </div> - <div class="mb-3" style="display: flex; flex-direction: row; margin-right: 100px"> - <div style="margin-right: 30px;"> 게시물 <span style="font-weight: bold"> {{ feed_count }} </span></div> - <div style="margin-right: 30px"> 팔로워 <span style="font-weight: bold"> {{ follower_count }} </span></div> - <div style="margin-right: 30px"> 팔로우 <span style="font-weight: bold"> {{ following_count }} </span></div> - </div> - <div style="display: flex; flex-direction: row"> - <div style="font-size: 18px;font-weight: bold"> {{ user.name }} </div> + <div class="col col-2 text-center"> + <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light" alt="all"> + <i class="bi bi-view-stacked fs"></i> + </a> </div> - - </div> - </div> - <!-- 중앙 메뉴 --> - <div style="font-size: 14px;padding: 0 140px;border-top: 1px solid silver; display: flex;width: 100%; flex-direction: row; justify-content: space-evenly"> - <div target_id="menu_feed" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px; border-top: 1px solid gray;font-weight: bold"> <span class="material-icons-outlined" style="font-size: 16px"> -grid_on -</span> 게시물 </div> - <div target_id="menu_bookmark" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px;font-weight: lighter"> <span class="material-icons-outlined" style="font-size: 16px"> -bookmark_border -</span> 저장됨 </div> - <div target_id="menu_taged" class="menu_content" style="display: flex; flex-direction: row; align-items: center;padding-top: 10px;font-weight: lighter"> <span class="material-icons-outlined" style="font-size: 16px"> -assignment_ind -</span>태그됨 </div> - </div> - <!-- 하단 컨텐츠 --> - <div id="menu_feed" class="menu_content_box" style="display: flex; flex-direction: column"> - {% for feed in feed_list %} - <div style="display: flex; flex-direction: row"> - {% for row_feed in feed.row_feed_list %} - <div> - <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}"> - </div> - {% endfor %} + <div class="col col-2 text-center"> + <a href="{% url 'ranking' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="ranking"> + <i class="bi bi-list-ol fs"></i> + </a> </div> - {% endfor %} - </div> - <div id="menu_bookmark" class="menu_content_box" style="display: none; flex-direction: column"> - {% for feed in bookmark_feed_list %} - <div style="display: flex; flex-direction: row"> - {% for row_feed in feed.row_bookmark_feed_list %} - <div> - <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}"> - </div> - {% endfor %} + <div class="col col-2 text-center"> + <a href="{% url 'profile' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="my list"> + <i class="bi bi-tags fs"></i> + </a> </div> - {% endfor %} - </div> - <div id="menu_taged" class="menu_content_box" style="display: none; flex-direction: column"> - {% for feed in feed_list %} - <div style="display: flex; flex-direction: row"> - {% for row_feed in feed.row_feed_list %} - <div> - <img class="row_feed" src="{% get_media_prefix %}{{ row_feed.image }}"> - </div> - {% endfor %} + <div class="col col-2 text-center"> + <!-- <span id="add_feed" class="btn btn-sm fs-3 fw-bold text-light" alt="등록"> + <i class="bi bi-plus-circle fs"></i> + </span> --> + <span id="add_feed" class="btn btn-sm fs-3 fw-bold text-light " alt="등록"> + <i class="bi bi-plus-circle fs"></i> + </span> + <!-- <a href="add.html" id="add_feed" class="btn btn-sm fs-3 fw-bold text-light " alt="등록"> + <i class="bi bi-plus-circle fs"></i> + </a> --> </div> - {% endfor %} - </div> - </div> - - </div> - - -</div> -<div id="modal_add_feed" class="modal modal_overlay"> - <div class="modal_window"> - <div class="modal_title"> - <div class="modal_title_side"></div> - <div> 새 게시물</div> - <div class="modal_title_side"> - <span id="close_modal" class="close_modal material-icons-outlined" style="font-size: 30px"> - close - </span> - </div> - </div> - <div class="modal_image_upload"> - <span style="text-align: center"> 사진을 여기에 끌어다 놓으세요. </span> - - </div> - </div> -</div> - -<div id="modal_add_feed_content" class="modal modal_overlay_content"> - <div class="modal_window"> - <div class="modal_title"> - <div class="modal_title_side"></div> - <div style="margin: 5px"> 새 게시물</div> - <div class="modal_title_side"> - <span id="close_modal" class="close_modal material-icons-outlined" style="font-size: 30px"> - close - </span> - </div> - </div> - <div class="modal_image_content"> - <div id="input_image" class="modal_image_upload_content"> - - </div> - <div class="modal_content_write"> - <div class="feed_name"> - <div class="profile_box"> - <img id="input_profile_image" class="profile_img" - src="{% get_media_prefix %}{{ user.thumbnail }}"> + <div class="col col-2 text-center"> + <a href="univserach.html" class="btn btn-sm fs-3 fw-bold text-light " alt="대학검색"> + <i class="bi bi-search fs"></i> + </a> </div> - <span id="input_user_id" class="feed_name_txt"> {{ user.user_id }} </span> - <span id="input_email" style="display: none"> {{ user.email }} </span> - </div> - <div style="height: 440px"> - <textarea id="input_content" class="feed_content_textarea form-control col-sm-5" rows="10" - placeholder="설명을 입력하세요..."></textarea> - </div> - <div style="width: 100%; text-align: center"> - <button id="button_write_feed" type="button" class="btn btn-primary" style="width: 268px"> 공유하기 - </button> </div> </div> </div> - + <!-- Page bottom End --> </div> -</div> -<!-- Optional JavaScript; choose one of the two! --> -<script> - // 모달 띄우기 코드 - const modal = document.getElementById("modal_add_feed"); - const buttonAddFeed = document.getElementById("add_feed"); - buttonAddFeed.addEventListener("click", e => { - modal.style.top = window.pageYOffset + 'px'; // top을 이용해 시작 y위치를 바꿔줌 - modal.style.display = "flex"; - document.body.style.overflowY = "hidden"; // 스크롤 없애기 - }); - - <!-- jquery 부분 --> - <!-- @@@댓글 달기 --> - $('.write_reply').click(function () { - console.log($(this).prev().val()); - console.log($(this).attr('feed_id')); - let success = false; - let content = $(this).prev().val(); - let feed_id = Number($(this).attr('feed_id')); - - $.ajax({ - url: "/content/reply/create", - data: { - email: '{{ user.email }}', - user_id: '{{ user.user_id }}', - content: content, - feed_id: feed_id - }, - method: "POST", - dataType: "json", - async: false, - success: function (data) { - alert(data.message); - success = true - }, - error: function (request, status, error) { - let data = JSON.parse(request.responseText); - console.log(data.message); - alert(data.message); - } - }); - console.log(success) - if (success == true) { - $(this).parent().prev().append('<span class="feed_txt"><b> {{ user.user_id }} </b> ' + content + ' </span>'); - } - }); + + - <!-- @@@좋아요 누르기 --> - $('.favorite_icon').click(function () { - console.log($(this).prev().val()); - console.log($(this).attr('feed_id')); - let success = false; - let icon = $.trim($(this).html()); - console.log('지금현재 상태 : ' + icon); - let is_like = false; - if (icon == 'favorite_border') { - is_like = true; - } - let feed_id = Number($(this).attr('feed_id')); +<script> + // 상세페이지 이동 코드 + $('#button_join').on('click',()=>{ + console.log('클릭했다.'); + let user_id = $('#user_id').val(); + let password = $('#password').val(); + let nickname = $('#nicknickname').val(); + let univname = $('#univname').val(); + + console.log('아이디 :' + user_id + ', 비밀번호 :' + password + ', 닉네임 :' + nickname + ', 학교이름 :' + univname); $.ajax({ - url: "/content/like", + url: "/user/join", data: { - email: '{{ user.email }}', - is_like: is_like, - feed_id: feed_id + user_id: user_id, + password: password, + nickname: nickname, + univname: univname }, method: "POST", dataType: "json", - async: false, - success: function (data) { - alert(data.message); - success = true + success: function (data){ + alert(data.message); + location.replace("{% url 'login'%}"); }, - error: function (request, status, error) { + error:function (request, status, error){ let data = JSON.parse(request.responseText); console.log(data.message); alert(data.message); } }); - console.log(success) - if (success == true) { - console.log(is_like) - if (is_like) { - $(this).html('favorite'); - let like_count_object = $(this).parent().parent().next().find('p').find('span'); - let like_count = Number(like_count_object.html()); - like_count_object.html(like_count + 1); - console.log(like_count); - } else { - $(this).html('favorite_border'); - let like_count_object = $(this).parent().parent().next().find('p').find('span'); - let like_count = Number(like_count_object.html()); - like_count_object.html(like_count - 1); - console.log(like_count); - } - } - }); - - - $('.close_modal').on("click", () => { - closeModal(); - }); - - function closeModal() { - $('.modal').css({ - display: 'none' - }); - $(document.body).css({ - overflowY: 'visible' - }); - }; - - $('.modal_image_upload') - .on("dragover", dragOver) - .on("dragleave", dragOver) - .on("drop", uploadFiles); - - function dragOver(e) { - e.stopPropagation(); - e.preventDefault(); - - if (e.type == "dragover") { - $(e.target).css({ - "background-color": "black", - "outline-offset": "-20px" - }); - } else { - $(e.target).css({ - "background-color": "white", - "outline-offset": "-10px" - }); - } - }; - - let files; - - function uploadFiles(e) { - e.stopPropagation(); - e.preventDefault(); - console.log(e.dataTransfer) - console.log(e.originalEvent.dataTransfer) - - e.dataTransfer = e.originalEvent.dataTransfer; - - files = e.dataTransfer.files; - if (files.length > 1) { - alert('하나만 올려라.'); - return; - } - - if (files[0].type.match(/image.*/)) { - $('#modal_add_feed_content').css({ - display: 'flex' - }); - $('.modal_image_upload_content').css({ - "background-image": "url(" + window.URL.createObjectURL(files[0]) + ")", - "outline": "none", - "background-size": "contain", - "background-repeat": "no-repeat", - "background-position": "center" - }); - $('#modal_add_feed').css({ - display: 'none' - }) - } else { - alert('이미지가 아닙니다.'); - return; - } - }; - - $('#button_write_feed').on('click', () => { - const image = $('#input_image').css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'); - const content = $('#input_content').val(); - const profile_image = $('#input_profile_image').attr('src'); - const user_id = $('#input_user_id').text(); - const email = $('#input_email').text(); - - const file = files[0]; - - let fd = new FormData(); - - fd.append('file', file); - fd.append('image', image); - fd.append('content', content); - fd.append('profile_image', profile_image); - fd.append('user_id', user_id); - fd.append('email', email); - - if (image.length <= 0) { - alert("이미지가 비어있습니다."); - } else if (content.length <= 0) { - alert("설명을 입력하세요"); - } else if (profile_image.length <= 0) { - alert("프로필 이미지가 비어있습니다."); - } else if (user_id.length <= 0) { - alert("사용자 id가 없습니다."); - } else { - writeFeed(fd); - console.log(files[0]); - } - }); - - function writeFeed(fd) { - $.ajax({ - url: "/content/upload", - data: fd, - method: "POST", - processData: false, - contentType: false, - success: function (data) { - console.log("성공"); - }, - error: function (request, status, error) { - console.log("에러"); - }, - complete: function () { - console.log("무조건실행"); - closeModal(); - location.reload(); - } - }) - }; - - $('.menu_content').click(function (event){ - $('.menu_content').css({ - 'border-top': 'none', - 'font-weight' : 'lighter' - }); - $(this).css({ - 'border-top' : '1px solid gray', - 'font-weight' : 'bold' - }); - - $('.menu_content_box').css({ - display : 'none' - }); - - let target_id = $(this).attr('target_id') - - $('#'+target_id).css({ - display : 'flex' - }); - }); - - $('.go_home').on("click", () => { - location.replace('/'); }); - - function ajaxFileUpload() { - // 업로드 버튼이 클릭되면 파일 찾기 창을 띄운다. - $("#ajaxFile").click(); - } - - function ajaxFileChange() { - // 파일이 선택되면 업로드를 진행한다. - ajaxFileTransmit(); - } - - function ajaxFileTransmit() { - var formData = new FormData(); - formData.append("file", $("#ajaxFile")[0].files[0]); - - $.ajax({ - url : "{% url 'profile_update' %}" - , type : "POST" - , processData : false - , contentType : false - , data : formData - , dataType: "json" - , success:function(obj) { - let uuid = obj.uuid; - console.log(uuid); - $('.profile_img').attr('src','{% get_media_prefix %}' + uuid); - console.log($('.profile_img').attr('src')); - - } - }); - } - - -</script> - - -<!-- Option 1: Bootstrap Bundle with Popper --> -<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" - integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" - crossorigin="anonymous"> - - </script> - -<!-- Option 2: Separate Popper and Bootstrap JS --> -<!-- -<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script> -<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script> ---> - -</body> + </body> </html> \ No newline at end of file diff --git a/campics_/templates/jinstagram/ranking.html b/campics_/templates/jinstagram/ranking.html index fcfbb37b3be3bd67d2482b3c6463f5e3f1b8b439..f05e692c3d5c4f7ad2e495972d992e25a5ef9276 100644 --- a/campics_/templates/jinstagram/ranking.html +++ b/campics_/templates/jinstagram/ranking.html @@ -9,8 +9,10 @@ <title>순위</title> <link href="{% static '/css/bootstrap.css' %}" rel="stylesheet" > <link rel="stylesheet" href="{% static '/bootstrap-icons-1.8.2/bootstrap-icons.css' %}"> - <script src="{% static '/jquery/jquery.min.js' %}"></script> + <!-- <script src="{% static '/jquery/jquery.min.js' %}"></script> --> <script src="{% static '/js/bootstrap.min.js' %}"></script> + <!-- jquery 사용하기 위해 --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> @@ -51,6 +53,7 @@ <tbody> {% for univ in univ_list %} <tr> + <td class="align-middle">1</td> <td class="align-middle">{{univ.univ}}</td> <td class="align-middle">{{univ.score}}</td> </tr> @@ -65,29 +68,29 @@ <div class="text-bg-primary py-1" > <div class="row align-middle"> <div class="col col-2 text-center"> - <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light" alt="my univ"> + <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light" alt="my univ"> <i class="bi bi-view-list fs"></i> </a> </div> <div class="col col-2 text-center"> - <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light" alt="all"> + <a href="{% url 'main' %}" class="btn btn-sm fs-3 fw-bold text-light" alt="all"> <i class="bi bi-view-stacked fs"></i> </a> </div> <div class="col col-2 text-center"> - <a href="ranking.html" class="btn btn-sm fs-3 fw-bold text-light " alt="ranking"> + <a href="{% url 'ranking' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="ranking"> <i class="bi bi-list-ol fs"></i> </a> </div> <div class="col col-2 text-center"> - <a href="imgboard.html" class="btn btn-sm fs-3 fw-bold text-light " alt="my list"> + <a href="{% url 'profile' %}" class="btn btn-sm fs-3 fw-bold text-light " alt="my list"> <i class="bi bi-tags fs"></i> </a> </div> <div class="col col-2 text-center"> - <a href="add.html" class="btn btn-sm fs-3 fw-bold text-light " alt="등록"> + <span id="add_feed" class="btn btn-sm fs-3 fw-bold text-light " alt="등록"> <i class="bi bi-plus-circle fs"></i> - </a> + </span> </div> <div class="col col-2 text-center"> <a href="univserach.html" class="btn btn-sm fs-3 fw-bold text-light " alt="대학검색"> diff --git a/campics_/templates/jinstagram/univserach.html b/campics_/templates/jinstagram/univsearch.html similarity index 100% rename from campics_/templates/jinstagram/univserach.html rename to campics_/templates/jinstagram/univsearch.html diff --git a/campics_/user/migrations/0007_univ.py b/campics_/user/migrations/0007_univ.py new file mode 100644 index 0000000000000000000000000000000000000000..9667105e4bd00c15b81463ee2301fd0c1e281bbf --- /dev/null +++ b/campics_/user/migrations/0007_univ.py @@ -0,0 +1,23 @@ +# Generated by Django 4.0.4 on 2022-06-01 02:41 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('user', '0006_auto_20211014_1134'), + ] + + operations = [ + migrations.CreateModel( + name='Univ', + fields=[ + ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), + ('univ', models.CharField(max_length=15)), + ], + options={ + 'db_table': 'univ', + }, + ), + ] diff --git a/campics_/user/migrations/0008_user_univ.py b/campics_/user/migrations/0008_user_univ.py new file mode 100644 index 0000000000000000000000000000000000000000..b24aa889978061587391fd8abcc313f81d2b9dd3 --- /dev/null +++ b/campics_/user/migrations/0008_user_univ.py @@ -0,0 +1,20 @@ +# Generated by Django 4.0.4 on 2022-06-01 07:43 + +from django.db import migrations, models +import django.utils.timezone + + +class Migration(migrations.Migration): + + dependencies = [ + ('user', '0007_univ'), + ] + + operations = [ + migrations.AddField( + model_name='user', + name='univ', + field=models.CharField(default=django.utils.timezone.now, max_length=15), + preserve_default=False, + ), + ] diff --git a/campics_/user/models.py b/campics_/user/models.py index e0a79f1a939ac037edc3b45b808f9d760427403b..8685cf407ada3edf3fe7788d92c2c3f607aad9b8 100644 --- a/campics_/user/models.py +++ b/campics_/user/models.py @@ -8,7 +8,7 @@ class User(AbstractBaseUser): email = models.EmailField(verbose_name='email', max_length=100, blank=True, null=True, unique=True) user_id = models.CharField(max_length=30, blank=True, null=True) thumbnail = models.CharField(max_length=256, default='default_profile.jpg', blank=True, null=True) - univ = models.CharField(max_length=30) + univ = models.CharField(max_length=15) USERNAME_FIELD = 'id' REQUIRED_FIELDS = ['user_id'] @@ -24,5 +24,23 @@ class User(AbstractBaseUser): db_table = 'users' +class Follow(models.Model): + follower = models.EmailField(verbose_name='email', max_length=100) + following = models.EmailField(verbose_name='email', max_length=100) + is_live = models.BooleanField(default=False) + + class Meta: + db_table = 'follow' + constraints = [ + models.UniqueConstraint(fields=['follower', 'following'], name='follower-following') + ] + indexes = [ + models.Index(fields=['follower']), + models.Index(fields=['following']), + ] + class Univ(models.Model): - univ = models.CharField(max_length=30) + univ = models.CharField(max_length=15) + + class Meta: + db_table = 'univ'