added color for new feed

This commit is contained in:
PhilReact 2023-10-10 22:06:44 -05:00
parent fac7ae9004
commit 35b71ea311
9 changed files with 88 additions and 50 deletions

View File

@ -44,7 +44,7 @@ import './start-minting.js'
import './notification-view/notification-bell.js'
import './notification-view/notification-bell-general.js'
import './friends-view/friends-side-panel-parent.js'
import './friends-view/save-settings-qdn.js'
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@ -560,6 +560,7 @@ class AppView extends connect(store)(LitElement) {
</span>
</div>
<div style="display:flex;align-items:center;gap:20px">
<save-settings-qdn></save-settings-qdn>
<friends-side-panel-parent></friends-side-panel-parent>
<notification-bell></notification-bell>
<notification-bell-general></notification-bell-general>

View File

@ -137,7 +137,6 @@ class AddFriendsModal extends LitElement {
async updated(changedProperties) {
if (changedProperties && changedProperties.has('editContent') && this.editContent) {
console.log('this.editedContent', this.editContent)
this.userSelected = {
name: this.editContent.name ?? '',
}
@ -150,7 +149,6 @@ class AddFriendsModal extends LitElement {
}
render() {
console.log('hello2', this.editContent)
return html`
<div class="modal-overlay ${this.isOpen ? '' : 'hidden'}">
<div class="modal-content">

View File

@ -330,7 +330,6 @@ getMyNode(){
async goToFeedLink(){
try {
console.log('this.link', this.link)
let newQuery = this.link
if (newQuery.endsWith('/')) {
newQuery = newQuery.slice(0, -1)
@ -423,7 +422,6 @@ getMyNode(){
render() {
console.log('this.feedItem', this.feedItem)
let avatarImg
const avatarUrl = `${this.nodeUrl}/arbitrary/THUMBNAIL/${this.resource.name}/qortal_avatar?async=true&apiKey=${this.myNode.apiKey}`;
avatarImg = html`<img

View File

@ -12,7 +12,8 @@ const maxResultsInMemory = 300;
class FriendsFeed extends connect(store)(LitElement) {
static get properties() {
return {
feed: {type: Array}
feed: {type: Array},
setHasNewFeed: {attribute:false}
};
}
constructor(){
@ -88,7 +89,6 @@ this.loadAndMergeData();
getMoreFeed(){
if(!this.hasInitialFetch) return
console.log('getting more feed')
if(this.feedToRender.length === this.feed.length ) return
this.feedToRender = this.feed.slice(0, this.feedToRender.length + 20)
this.requestUpdate()
@ -101,7 +101,6 @@ this.loadAndMergeData();
threshold: 1,
};
// identify an element to observe
console.log('this', this.viewElement, this.downObserverElement)
const elementToObserve = this.downObserverElement;
// passing it a callback function
const observer = new IntersectionObserver(
@ -114,11 +113,9 @@ this.loadAndMergeData();
}
observerHandler(entries) {
console.log({entries})
if (!entries[0].isIntersecting) {
return;
} else {
console.log('this.feedToRender', this.feedToRender)
if (this.feedToRender.length < 20) {
return;
}
@ -131,7 +128,6 @@ this.loadAndMergeData();
const url = `${this.endpoints[endpointIndex].url}&limit=${count}&offset=${offset}`;
const res = await fetch(url)
const data = await res.json()
console.log({data})
return data.map((i)=> {
return {
...this.endpoints[endpointIndex],
@ -248,6 +244,13 @@ this.loadAndMergeData();
this.feed = [...allData]
this.feedToRender = this.feed.slice(0,20)
this.hasInitialFetch = true
if(allData.length > 0){
const created = allData[0].created
let value = localStorage.getItem('lastSeenFeed')
if (((+value || 0) < created)) {
this.setHasNewFeed(true)
}
}
}
@ -255,7 +258,6 @@ this.loadAndMergeData();
render() {
console.log('ron', this.feed)
return html`
<div class="container">
<div id="viewElement" class="container-body" style=${"position: relative"}>
@ -368,10 +370,8 @@ function executeMethodInWorker(methodString, externalArgs) {
export async function updateCustomParamsWithMethods(schema,resource) {
console.log({schema, resource})
for (const key in schema.customParams) {
const value = schema.customParams[key];
console.log({value})
if (value.startsWith("**methods.") && value.endsWith("**")) {
const methodInvocation = value.slice(10, -2).split('(');
const methodName = methodInvocation[0];
@ -382,9 +382,7 @@ export async function updateCustomParamsWithMethods(schema,resource) {
name: resource.name,
service: resource.service
}
console.log({newResource})
const methodResult = await executeMethodInWorker(schema.methods[methodName], newResource);
console.log({methodResult})
schema.customParams[key] = methodResult;
}
}
@ -443,31 +441,8 @@ export function replacePlaceholders(template, resource, customParams) {
"getShortId": "return resource.identifier.split('-post-')[1];",
"getBlogId": "const arr = resource.identifier.split('-post-'); const id = arr[0]; return id.startsWith('q-blog-') ? id.substring(7) : id;"
}
// methods: {
// getShortId: function(resource) {
// console.log({resource})
// const str = resource.identifier
// const arr = str.split('-post-')
// const shortIdentifier = arr[1]
// return shortIdentifier
// },
// getBlogId: function(resource) {
// console.log({resource})
// const str = resource.identifier
// const arr = str.split('-post-')
// const id = arr[0]
// let blogId = ""
// if (id.startsWith('q-blog-')) {
// blogId = id.substring(7);
// } else {
// blogId= id;
// }
// return blogId
// }
// }
}
]
}
// export const schema = JSON.stringify(schema2, null, 2); // 2 spaces indentation

View File

@ -4,7 +4,8 @@ import './friends-side-panel.js';
class FriendsSidePanelParent extends LitElement {
static get properties() {
return {
isOpen: {type: Boolean}
isOpen: {type: Boolean},
hasNewFeed: {type: Boolean}
};
}
@ -12,6 +13,7 @@ class FriendsSidePanelParent extends LitElement {
constructor() {
super();
this.isOpen = false
this.hasNewFeed = false
}
static styles = css`
.header {
@ -42,14 +44,22 @@ class FriendsSidePanelParent extends LitElement {
}
`;
setHasNewFeed(val){
this.hasNewFeed = val
}
render() {
return html`
<mwc-icon @click=${()=> {
this.isOpen = !this.isOpen
}} style="color: var(--black); cursor:pointer;user-select:none"
if(this.isOpen && this.hasNewFeed){
localStorage.setItem('lastSeenFeed', Date.now());
this.hasNewFeed = false
this.shadowRoot.querySelector("friends-side-panel").selected = 'feed'
}
}} style="color: ${this.hasNewFeed ? 'green' : 'var(--black)'}; cursor:pointer;user-select:none"
>group</mwc-icon
>
<friends-side-panel ?isOpen=${this.isOpen} .setIsOpen=${(val)=> this.isOpen = val}></friends-side-panel>
<friends-side-panel .setHasNewFeed=${(val)=> this.setHasNewFeed(val)} ?isOpen=${this.isOpen} .setIsOpen=${(val)=> this.isOpen = val}></friends-side-panel>
`;
}

View File

@ -8,7 +8,8 @@ class FriendsSidePanel extends LitElement {
return {
setIsOpen: { attribute: false},
isOpen: {type: Boolean},
selected: {type: String}
selected: {type: String},
setHasNewFeed: {attribute: false}
};
}
@ -115,7 +116,7 @@ class FriendsSidePanel extends LitElement {
<friends-view></friends-view>
</div>
<div class="${this.selected === 'feed' ? 'active-content' : 'default-content'}">
<friends-feed></friends-feed>
<friends-feed .setHasNewFeed=${(val)=> this.setHasNewFeed(val)}></friends-feed>
</div>
<!-- ${this.selected === 'friends' ? html`<friends-view></friends-view>` : ''}

View File

@ -215,7 +215,6 @@ class FriendsView extends connect(store)(LitElement) {
}
onClose(){
console.log('hello100')
this.isLoading = false;
this.isOpenAddFriendsModal = false
this.editContent = null
@ -223,7 +222,6 @@ class FriendsView extends connect(store)(LitElement) {
}
render() {
console.log('friends', this.userSelected);
return html`
<div class="container">
<div id="viewElement" class="container-body" style=${"position: relative"}>
@ -257,7 +255,6 @@ class FriendsView extends connect(store)(LitElement) {
this.userSelected = result;
this.isOpenAddFriendsModal = true
console.log({result});
this.userFound = [];
this.userFoundModalOpen = false;
}}

View File

@ -0,0 +1,60 @@
import { LitElement, html, css } from 'lit';
import '@material/mwc-icon';
import './friends-side-panel.js';
class SaveSettingsQdn extends LitElement {
static get properties() {
return {
isOpen: {type: Boolean}
};
}
constructor() {
super();
this.isOpen = false
}
static styles = css`
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid #e0e0e0;
}
.content {
padding: 16px;
}
.close {
visibility: hidden;
position: fixed;
z-index: -100;
right: -1000px;
}
.parent-side-panel {
transform: translateX(100%); /* start from outside the right edge */
transition: transform 0.3s ease-in-out;
}
.parent-side-panel.open {
transform: translateX(0); /* slide in to its original position */
}
`;
render() {
return html`
<mwc-icon @click=${()=> {
this.isOpen = !this.isOpen
}} style="color: var(--black); cursor:pointer;user-select:none"
>save</mwc-icon
>
`;
}
}
customElements.define('save-settings-qdn', SaveSettingsQdn);

View File

@ -221,8 +221,6 @@ class Chat extends LitElement {
}
render() {
console.log('chatHeads', this.chatHeads)
console.log('chatHeadsObj', this.chatHeadsObj)
return html`
<div class="container clearfix">
<div class="people-list" id="people-list">