new
emile
10 months ago
parent
cd43080d10
commit
2e044ece76
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,18 @@
|
||||
# Generated by Django 4.2.5 on 2024-07-09 07:50
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('osinacore', '0095_delete_customuser'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='status',
|
||||
name='date_time',
|
||||
field=models.DateTimeField(blank=True, null=True),
|
||||
),
|
||||
]
|
||||
Binary file not shown.
@ -0,0 +1,203 @@
|
||||
{% load static %}
|
||||
|
||||
<link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
|
||||
|
||||
<!-- EMOJI PICKER POPUP CONTAINER -->
|
||||
<div class="w-full h-full fixed bg-black bg-opacity-50 inset-0 flex justify-center items-center p-5 z-20 hidden"
|
||||
id="emojiPickerContainer">
|
||||
<div class="w-[500px] bg-gray-100 rounded-md shadow-md p-5 relative">
|
||||
<div class="w-[28px] h-[28px] rounded-full bg-white border border-gray-100 shadow-md flex justify-center items-center p-2 absolute top-5 right-5 text-secondosiblue cursor-pointer hover:bg-secondosiblue hover:text-white duration-300"
|
||||
id="closeEmojiPicker">
|
||||
<i class="fa fa-close"></i>
|
||||
</div>
|
||||
|
||||
<p class="text-xl text-secondosiblue text-center mt-3">Add Reaction</p>
|
||||
{% csrf_token %}
|
||||
<!-- EMOJIS CATEGORIES BAR -->
|
||||
<div class="w-full px-3 py-1 bg-gray-200 rounded-md flex gap-2 items-center mt-5">
|
||||
<div class="w-[30px] rounded-full selectedEmojiCategory p-1 emoji-category cursor-pointer hover:scale-105 duration-300"
|
||||
data-category="smiley">
|
||||
<img src="{% static 'images/emojis/smiley.png' %}" class="w-full">
|
||||
</div>
|
||||
|
||||
<div class="w-[30px] rounded-full p-1 emoji-category cursor-pointer hover:scale-105 duration-300"
|
||||
data-category="nature">
|
||||
<img src="{% static 'images/emojis/animal.png' %}" class="w-full">
|
||||
</div>
|
||||
|
||||
<div class="w-[30px] rounded-full p-1 emoji-category cursor-pointer hover:scale-105 duration-300"
|
||||
data-category="food">
|
||||
<img src="{% static 'images/emojis/food.png' %}" class="w-full">
|
||||
</div>
|
||||
|
||||
<div class="w-[30px] rounded-full p-1 emoji-category cursor-pointer hover:scale-105 duration-300"
|
||||
data-category="activities">
|
||||
<img src="{% static 'images/emojis/activities.png' %}" class="w-full">
|
||||
</div>
|
||||
|
||||
<div class="w-[30px] rounded-full p-1 emoji-category cursor-pointer hover:scale-105 duration-300"
|
||||
data-category="travel">
|
||||
<img src="{% static 'images/emojis/travel.png' %}" class="w-full">
|
||||
</div>
|
||||
|
||||
<div class="w-[30px] rounded-full p-1 emoji-category cursor-pointer hover:scale-105 duration-300"
|
||||
data-category="flags">
|
||||
<img src="{% static 'images/emojis/flags.png' %}" class="w-full">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EMOJIS CONTAINER -->
|
||||
<div class="mt-5 emoji-container">
|
||||
|
||||
<!-- SMILEYS -->
|
||||
<div class="emoji-category-container" id="smileyContainer">
|
||||
<h1 class="uppercase text-secondosiblue">Smileys & People</h1>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-center gap-1 mt-2 emojisContainer text-[22px]">
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😄</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😅</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😁</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🤣</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😂</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😊</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😇</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😉</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🥰</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😭</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😍</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🤪</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🤔</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😏</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😒</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🙄</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😴</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🥳</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">😎</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🙁</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NATURE -->
|
||||
<div class="emoji-category-container hidden" id="natureContainer">
|
||||
<h1 class="uppercase text-secondosiblue">Animals & Nature</h1>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-center gap-1 mt-2 emojisContainer text-[22px]">
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🌹</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🌷</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">💐</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🌸</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🍀</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🥀</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🌼</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🌺</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🦋</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🐌</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🐎</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🐆</p>
|
||||
<p class="cursor-pointer hover:scale-105 duration-500">🦁</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FOOD -->
|
||||
<div class="emoji-category-container hidden" id="foodContainer">
|
||||
</div>
|
||||
|
||||
<!-- ACTIVITIES -->
|
||||
<div class="emoji-category-container hidden" id="activitiesContainer">
|
||||
</div>
|
||||
|
||||
<!-- TRAVEL -->
|
||||
<div class="emoji-category-container hidden" id="travelContainer">
|
||||
</div>
|
||||
|
||||
<!-- FLAGS -->
|
||||
<div class="emoji-category-container hidden" id="flagsContainer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full flex flex-col py-3 users-activities fadeInAndUp" data-userId="{{ status.staff.user.id }}">
|
||||
<div class="w-full flex flex-col justify-center items-start gap-3 bg-gray-50 pt-2 px-2 pb-6 rounded-md relative">
|
||||
<div class="w-full flex justify-between items-center gap-2">
|
||||
<div class="flex justify-start gap-2 cursor-pointer userRecentActivitiesButton"
|
||||
data-modal-url="{% url 'userrecentativities' status.staff.user.id %}">
|
||||
<div class="relative w-fit rounded-full">
|
||||
<div class="w-[45px] h-[45px] rounded-full">
|
||||
<img src='{{status.staff.image.url}}' alt="user profile"
|
||||
class="w-full h-full object-cover rounded-full">
|
||||
</div>
|
||||
|
||||
<div id="connected"
|
||||
class="w-[12px] h-[12px] absolute rounded-full bg-green-600 bottom-0 right-0 border-2 border-white">
|
||||
</div>
|
||||
<div id="not-connected"
|
||||
class="w-[12px] h-[12px] absolute rounded-full bg-red-500 bottom-0 right-0 border-2 border-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-sm text-secondosiblue font-semibold">{{status.staff.user.first_name}}
|
||||
{{status.staff.user.last_name}}</h1>
|
||||
{% if status.time_ago == '0min ago' %}
|
||||
<p class="text-sm text-gray-500">Just Now</p>
|
||||
{%else %}
|
||||
<p class="text-sm text-gray-500">{{ status.time_ago}}</p>
|
||||
{%endif%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="cursor-pointer hover:scale-105 duration-500 transition-transform emojiPicker"
|
||||
data-status-id="{{latest.status.id}}">
|
||||
<img src="{% static 'images/icons/reactionicon.png' %}" class="w-[30px]">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="w-full">
|
||||
<p class="text-sm {% if 'Completed' in status.text %} text-green-700 {% else %} text-secondosiblue {% endif %}">{{status.text}}</p>
|
||||
|
||||
{% if status.task.project %}
|
||||
<a href="{% url 'detailed-project' status.task.project.project_id %}">
|
||||
<div class="w-full flex justify-end items-center mt-1 text-gray-400 hover:text-secondosiblue duration-300 cursor-pointer">
|
||||
<p class="text-xs font-light">{{status.task.project}}</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Add comment section -->
|
||||
<div class="w-full h-fit flex justify-between items-center border border-gray-200 rounded-md relative">
|
||||
<input type="text" placeholder="Add Comment..."
|
||||
class="outline-none text-gray-500 px-3 w-full text-sm h-[40px] rounded-tl-md rounded-bl-md">
|
||||
<button
|
||||
class="w-fit absolute right-0 h-full px-3 py-2 bg-osiblue border border-osiblue hover:bg-white hover:text-osiblue duration-300 rounded-tr-md rounded-br-md text-white text-[12px]">
|
||||
<i class="fa fa-send"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes fadeInAndUp {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0px); }
|
||||
}
|
||||
.fade-in-up {
|
||||
animation: fadeInAndUp 0.6s ease;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
@ -0,0 +1,27 @@
|
||||
// WebSocket connection for new statuses
|
||||
const ws_theme = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
const newStatusesSocketUrl = `${ws_theme}://${window.location.host}/ws/new-statuses/`;
|
||||
const newStatusesSocket = new WebSocket(newStatusesSocketUrl);
|
||||
|
||||
newStatusesSocket.onopen = () => {
|
||||
console.log('WebSocket connection to new statuses established');
|
||||
};
|
||||
newStatusesSocket.onmessage = function(e) {
|
||||
const data = JSON.parse(e.data);
|
||||
if (data.event_type === 'new_status') {
|
||||
const activityDiv = document.getElementById('activitiesContainer');
|
||||
console.log(activityDiv);
|
||||
activityDiv.insertAdjacentHTML('afterbegin', data.html);
|
||||
}
|
||||
};
|
||||
|
||||
newStatusesSocket.onclose = () => {
|
||||
console.log('WebSocket connection to new statuses closed');
|
||||
};
|
||||
|
||||
newStatusesSocket.onerror = (error) => {
|
||||
console.log('WebSocket error:', error);
|
||||
};
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue