diff --git a/core/language/us.json b/core/language/us.json index e43bec41..18631964 100644 --- a/core/language/us.json +++ b/core/language/us.json @@ -1193,6 +1193,7 @@ "friend13": "Feed", "friend14": "Remove friend", "friend15": "Feed settings", - "friend16": "Select the Q-Apps you want updates from, especially those related to your friends." + "friend16": "Select the Q-Apps you want updates from, especially those related to your friends.", + "friends17": "Friends" } } \ No newline at end of file diff --git a/core/src/components/app-view.js b/core/src/components/app-view.js index cb12b505..7be45ec4 100644 --- a/core/src/components/app-view.js +++ b/core/src/components/app-view.js @@ -560,7 +560,7 @@ class AppView extends connect(store)(LitElement) {
- + diff --git a/core/src/components/friends-view/add-friends-modal.js b/core/src/components/friends-view/add-friends-modal.js index 20973871..0f420d85 100644 --- a/core/src/components/friends-view/add-friends-modal.js +++ b/core/src/components/friends-view/add-friends-modal.js @@ -12,6 +12,7 @@ import '@material/mwc-dialog'; import '@material/mwc-checkbox'; import { connect } from 'pwa-helpers'; import { store } from '../../store'; +import '@polymer/paper-spinner/paper-spinner-lite.js' class AddFriendsModal extends connect(store)(LitElement) { static get properties() { @@ -27,7 +28,8 @@ class AddFriendsModal extends connect(store)(LitElement) { editContent: { type: Object }, onClose: { attribute: false }, mySelectedFeeds: { type: Array }, - availableFeeedSchemas: {type: Array} + availableFeeedSchemas: {type: Array}, + isLoadingSchemas: {type: Boolean} }; } @@ -41,7 +43,8 @@ class AddFriendsModal extends connect(store)(LitElement) { this.nodeUrl = this.getNodeUrl(); this.myNode = this.getMyNode(); this.mySelectedFeeds = []; - this.availableFeeedSchemas = [] + this.availableFeeedSchemas = []; + this.isLoadingSchemas= false; } static get styles() { @@ -53,6 +56,7 @@ class AddFriendsModal extends connect(store)(LitElement) { --mdc-dialog-content-ink-color: var(--black); --mdc-dialog-min-width: 400px; --mdc-dialog-max-width: 1024px; + box-sizing:border-box; } .input { width: 90%; @@ -145,9 +149,11 @@ class AddFriendsModal extends connect(store)(LitElement) { box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; z-index: 1001; border-radius: 5px; - max-height: 80vh; - overflow: auto; + display: flex; + flex-direction:column; } + + .modal-overlay.hidden { display: none; } @@ -155,7 +161,7 @@ class AddFriendsModal extends connect(store)(LitElement) { width: 36px; height: 36px; display: flex; - align-items: center; + align-items: center; } .app-name { @@ -168,6 +174,30 @@ class AddFriendsModal extends connect(store)(LitElement) { border-radius: 5px; margin-bottom: 10px; } + .inner-content { + display: flex; + flex-direction: column; + max-height: 75vh; + flex-grow: 1; + overflow: auto; + } + + .inner-content::-webkit-scrollbar-track { + background-color: whitesmoke; + border-radius: 7px; + } + + .inner-content::-webkit-scrollbar { + width: 12px; + border-radius: 7px; + background-color: whitesmoke; + } + + .inner-content::-webkit-scrollbar-thumb { + background-color: rgb(180, 176, 176); + border-radius: 7px; + transition: all 0.3s ease-in-out; + } `; } @@ -250,10 +280,10 @@ class AddFriendsModal extends connect(store)(LitElement) { async getAvailableFeedSchemas() { try { + this.isLoadingSchemas= true const url = `${this.nodeUrl}/arbitrary/resources/search?service=DOCUMENT&identifier=ui_schema_feed&prefix=true`; const res = await fetch(url); const data = await res.json(); - if (data.error === 401) { this.availableFeeedSchemas = []; } else { @@ -264,13 +294,17 @@ class AddFriendsModal extends connect(store)(LitElement) { this.availableFeeedSchemas = result; } this.userFoundModalOpen = true; - } catch (error) {} + } catch (error) {} finally { + this.isLoadingSchemas= false + } } render() { return html`
+
+

${this.editContent @@ -297,7 +331,7 @@ class AddFriendsModal extends connect(store)(LitElement) { ?checked=${this.willFollow} >

-
+
-
+
-
+
-
+

${translate('friends.friend15')}

${translate('friends.friend16')}

+ ${this.isLoadingSchemas ? html` +
+ +
+ ` : ''} ${this.availableFeeedSchemas.map((schema) => { const isAlreadySelected = this.mySelectedFeeds.find( (item) => item.name === schema.name @@ -401,6 +440,7 @@ class AddFriendsModal extends connect(store)(LitElement) { `; })}
+
diff --git a/core/src/components/friends-view/feed-item.js b/core/src/components/friends-view/feed-item.js index 9c88affa..ebc01d23 100644 --- a/core/src/components/friends-view/feed-item.js +++ b/core/src/components/friends-view/feed-item.js @@ -84,11 +84,24 @@ export class FeedItem extends connect(store)(LitElement) { width: 100%; box-sizing: border-box; cursor: pointer; + font-size: 16px; } .avatar { - width: 42px; - height: 42px; + width: 36px; + height: 36px; + border-radius:50%; + overflow: hidden; + display:flex; + align-items:center; } + .avatarApp { + width: 30px; + height: 30px; + border-radius:50%; + overflow: hidden; + display:flex; + align-items:center; + } .feed-item-name { user-select: none; color: #03a9f4; @@ -433,14 +446,14 @@ getMyNode(){ const avatarUrl = `${this.nodeUrl}/arbitrary/THUMBNAIL/${this.resource.name}/qortal_avatar?async=true&apiKey=${this.myNode.apiKey}`; avatarImg = html``; let avatarImgApp const avatarUrl2 = `${this.nodeUrl}/arbitrary/THUMBNAIL/${this.appName}/qortal_avatar?async=true&apiKey=${this.myNode.apiKey}`; avatarImgApp = html``; return html` @@ -473,7 +486,7 @@ getMyNode(){ } ${this.status.status === 'READY' && this.feedItem ? html`
-
+
${avatarImg}
${this.resource.name}
@@ -481,7 +494,7 @@ getMyNode(){

${this.feedItem.title}

-
+
${avatarImgApp}
{ try { @@ -99,42 +100,49 @@ class FriendsFeed extends connect(store)(LitElement) { } + async getEndpoints(){ + const dynamicVars = { + + } + const schemas = await this.getSchemas() + const friendList = JSON.parse(localStorage.getItem('friends-my-friend-list') || "[]") + console.log({friendList}) + const names = friendList.map(friend => `name=${friend.name}`).join('&'); + if(names.length === 0){ + this.endpoints= [] + this.endpointOffsets = Array(this.endpoints.length).fill(0); + return + } + console.log({names}) + const baseurl = `${this.nodeUrl}/arbitrary/resources/search?reverse=true&exactmatchnames=true&${names}` + let formEndpoints = [] + schemas.forEach((schema)=> { + const feedData = schema.feed[0] + if(feedData){ + const copyFeedData = {...feedData} + const fullUrl = constructUrl(baseurl, copyFeedData.search, dynamicVars); + if(fullUrl){ + formEndpoints.push({ + url: fullUrl, schemaName: schema.name, schema: copyFeedData + }) + } + } + + + }) + this.endpoints= formEndpoints + this.endpointOffsets = Array(this.endpoints.length).fill(0); + } + async firstUpdated(){ this.viewElement = this.shadowRoot.getElementById('viewElement'); this.downObserverElement = this.shadowRoot.getElementById('downObserver'); this.elementObserver(); - let schemaObj = {...schema} - const dynamicVars = { - - } - const getEndpoints = async () => { - const schemas = await this.getSchemas(schemaList) - const friendList = JSON.parse(localStorage.getItem('friends-my-friend-list') || "[]") - console.log({friendList}) - const names = friendList.map(friend => `name=${friend.name}`).join('&'); - console.log({names}) - const baseurl = `${this.nodeUrl}/arbitrary/resources/search?reverse=true&exactmatchnames=true&${names}` - let formEndpoints = [] - schemas.forEach((schema)=> { - const feedData = schema.feed[0] - if(feedData){ - const copyFeedData = {...feedData} - const fullUrl = constructUrl(baseurl, copyFeedData.search, dynamicVars); - if(fullUrl){ - formEndpoints.push({ - url: fullUrl, schemaName: schema.name, schema: copyFeedData - }) - } - } - - - }) - this.endpoints= formEndpoints - this.endpointOffsets = Array(this.endpoints.length).fill(0); - } + + try { - await getEndpoints() + await this.getEndpoints() this.loadAndMergeData(); this.getFeedOnInterval() @@ -151,6 +159,15 @@ this.getFeedOnInterval() this.requestUpdate() } + async refresh(){ + try { + await this.getEndpoints() + this.reFetchFeedData() + } catch (error) { + + } + } + elementObserver() { const options = { @@ -293,7 +310,7 @@ this.getFeedOnInterval() async reFetchFeedData() { // Resetting offsets to start fresh. this.endpointOffsets = Array(this.endpoints.length).fill(0); - + await this.getEndpoints() const oldIdentifiers = new Set(this.feed.map(item => item.identifier)); const newData = await this.initialLoad(); @@ -502,42 +519,4 @@ export function replacePlaceholders(template, resource, customParams) { -export const schemaList = [{ - identifier: 'ui_schema_feed', - name: 'Q-Blog', - service: 'DOCUMENT' -}] - export const schema = { - name: "Q-Blog", - defaultFeedIndex: 0, - feed: [ - { - id:"post-creation", - version: 1, - updated: 1696646223261, - title: "Q-Blog Post creations", - description: "blablabla", - search: { - query: "-post-", - identifier: "q-blog-", - service: "BLOG_POST", - exactmatchnames: true - }, - click: "qortal://APP/Q-Blog/$${resource.name}$$/$${customParams.blogId}$$/$${customParams.shortIdentifier}$$", - display: { - title: "$${rawdata.title}$$" - }, - customParams: { - blogId: "**methods.getBlogId(resource)**", - shortIdentifier: "**methods.getShortId(resource)**" - }, - "methods": { - "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;" - } - - } - ] -} -export const listSchemas = [schema] diff --git a/core/src/components/friends-view/friends-side-panel-parent.js b/core/src/components/friends-view/friends-side-panel-parent.js index 91812664..eff202dc 100644 --- a/core/src/components/friends-view/friends-side-panel-parent.js +++ b/core/src/components/friends-view/friends-side-panel-parent.js @@ -1,6 +1,10 @@ import { LitElement, html, css } from 'lit'; import '@material/mwc-icon'; import './friends-side-panel.js'; +import '@vaadin/tooltip'; +import { get } from 'lit-translate'; + + class FriendsSidePanelParent extends LitElement { static get properties() { return { @@ -49,7 +53,7 @@ class FriendsSidePanelParent extends LitElement { } render() { return html` - { + { this.isOpen = !this.isOpen if(this.isOpen && this.hasNewFeed){ localStorage.setItem('lastSeenFeed', Date.now()); @@ -59,6 +63,13 @@ class FriendsSidePanelParent extends LitElement { }} style="color: ${this.hasNewFeed ? 'green' : 'var(--black)'}; cursor:pointer;user-select:none" >group + + this.setHasNewFeed(val)} ?isOpen=${this.isOpen} .setIsOpen=${(val)=> this.isOpen = val}> `; diff --git a/core/src/components/friends-view/friends-side-panel.js b/core/src/components/friends-view/friends-side-panel.js index 070696be..812e8dda 100644 --- a/core/src/components/friends-view/friends-side-panel.js +++ b/core/src/components/friends-view/friends-side-panel.js @@ -99,6 +99,13 @@ class FriendsSidePanel extends LitElement { `; + refreshFeed(){ + + this.shadowRoot.querySelector('friends-feed').refresh() + + + } + render() { return html`
@@ -109,7 +116,7 @@ class FriendsSidePanel extends LitElement {
{ - this.shadowRoot.querySelector('friends-feed').reFetchFeedData() + this.refreshFeed() }} style="color: var(--black); cursor:pointer;">refresh { this.setIsOpen(false) @@ -119,7 +126,7 @@ class FriendsSidePanel extends LitElement {
- + this.refreshFeed()}>
this.setHasNewFeed(val)}> diff --git a/core/src/components/friends-view/friends-view.js b/core/src/components/friends-view/friends-view.js index a024b124..db7437a5 100644 --- a/core/src/components/friends-view/friends-view.js +++ b/core/src/components/friends-view/friends-view.js @@ -41,7 +41,8 @@ class FriendsView extends connect(store)(LitElement) { userFound: { type: Array}, isOpenAddFriendsModal: {type: Boolean}, editContent: {type: Object}, - mySelectedFeeds: {type: Array} + mySelectedFeeds: {type: Array}, + refreshFeed: {attribute: false} }; } static get styles() { @@ -222,10 +223,14 @@ class FriendsView extends connect(store)(LitElement) { } this.setMySelectedFeeds(val.mySelectedFeeds) this.userSelected = {}; + this.shadowRoot.getElementById('sendTo').value = '' this.isLoading = false; this.isOpenAddFriendsModal = false this.editContent = null this.setMyFriends(this.friendList) + if(!isRemove && this.friendList.length === 1){ + this.refreshFeed() + } } setMyFriends(friendList){ localStorage.setItem('friends-my-friend-list', JSON.stringify(friendList));