feeds-fun 0.1.1 → 0.3.0

package/README.md

@@ -6,3 +6,5 @@
 - Then filter and sort news how you want.
 
 Service is up and running at https://feeds.fun
+
+Documentation can be found in the repository: https://github.com/Tiendil/feeds.fun

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [

package/src/components/EntryForList.vue

@@ -41,7 +41,9 @@
 
       <template v-if="showTags">
         <br />
-        <tags-list :tags="entry.tags" />
+        <tags-list
+          :tags="entry.tags"
+          :contributions="entry.scoreContributions" />
       </template>
 
       <div

package/src/components/FfunTag.vue

@@ -77,7 +77,8 @@
   .tag {
     display: inline-block;
     cursor: pointer;
-    padding: 0.25rem;
+    padding: 0.1rem;
+    margin-right: 0.2rem;
     white-space: nowrap;
   }
 
@@ -92,4 +93,12 @@
   .tag.excluded {
     background-color: #ffcccc;
   }
+
+  .tag.positive {
+    color: darkgreen;
+  }
+
+  .tag.negative {
+    color: darkred;
+  }
 </style>

package/src/components/RulesList.vue

@@ -7,7 +7,9 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="rule in rules">
+      <tr
+        v-for="rule in rules"
+        :key="rule.id">
         <td>
           <rule-score-updater
             :score="rule.score"

package/src/components/TagsFilter.vue

@@ -13,6 +13,11 @@
         @tag:deselected="onTagDeselected" />
     </ul>
 
+    <input
+      type="text"
+      placeholder="Input part of tag..."
+      v-model="tagNameFilter" />
+
     <ul
       v-if="displayedTags.length > 0"
       style="list-style: none; padding: 0; margin: 0">
@@ -39,6 +44,9 @@
 
 <script lang="ts" setup>
   import {computed, ref} from "vue";
+  import {useTagsStore} from "@/stores/tags";
+
+  const tagsStore = useTagsStore();
 
   const selectedTags = ref<{[key: string]: boolean}>({});
 
@@ -48,6 +56,8 @@
 
   const showEntries = ref(showFromStart.value);
 
+  const tagNameFilter = ref("");
+
   function tagComparator(a: string, b: string) {
     const aCount = properties.tags[a];
     const bCount = properties.tags[b];
@@ -101,6 +111,16 @@
       return selectedTags.value[tag] !== true;
     });
 
+    values = values.filter((tag) => {
+      const tagInfo = tagsStore.tags[tag];
+
+      if (tagInfo === undefined || tagInfo.name === null) {
+        return tag.includes(tagNameFilter.value);
+      }
+
+      return tagInfo.name.includes(tagNameFilter.value);
+    });
+
     values.sort(tagComparator);
 
     values = values.slice(0, showEntries.value);

package/src/components/TagsList.vue

@@ -9,7 +9,7 @@
       v-for="tag of displayedTags"
       :key="tag"
       :uid="tag"
-      :mode="!!selectedTags[tag] ? 'selected' : null"
+      :mode="tagMode(tag)"
       :count="entriesStore.reportTagsCount[tag]"
       count-mode="tooltip"
       @tag:clicked="onTagClicked" />
@@ -41,7 +41,7 @@
 
   const selectedTags = ref<{[key: string]: boolean}>({});
 
-  const properties = defineProps<{tags: string[]}>();
+  const properties = defineProps<{tags: string[]; contributions: {[key: string]: number}}>();
 
   const tagsNumber = computed(() => {
     return properties.tags.length;
@@ -55,6 +55,32 @@
     return preparedTags.value.slice(0, showLimit.value);
   });
 
+  function tagMode(tag: string) {
+    if (!!selectedTags.value[tag]) {
+      return "selected";
+    }
+
+    // return null;
+
+    if (!properties.contributions) {
+      return null;
+    }
+
+    if (!(tag in properties.contributions)) {
+      return null;
+    }
+
+    if (properties.contributions[tag] == 0) {
+      return null;
+    }
+
+    if (properties.contributions[tag] > 0) {
+      return "positive";
+    }
+
+    return "negative";
+  }
+
   const preparedTags = computed(() => {
     const values = [];
 
@@ -63,6 +89,17 @@
     }
 
     values.sort((a, b) => {
+      const aContributions = Math.abs(properties.contributions[a] || 0);
+      const bContributions = Math.abs(properties.contributions[b] || 0);
+
+      if (aContributions > bContributions) {
+        return -1;
+      }
+
+      if (aContributions < bContributions) {
+        return 1;
+      }
+
       const aCount = entriesStore.reportTagsCount[a];
       const bCount = entriesStore.reportTagsCount[b];
 

package/src/logic/enums.ts

@@ -90,3 +90,17 @@ export const FeedsOrderProperties = new Map<FeedsOrder, {text: string; orderFiel
   [FeedsOrder.Loaded, {text: "loaded", orderField: "loadedAt", orderDirection: "desc"}],
   [FeedsOrder.Linked, {text: "added", orderField: "linkedAt", orderDirection: "desc"}]
 ]);
+
+export enum RulesOrder {
+  Tags = "tags",
+  Score = "score",
+  Created = "created",
+  Updated = "updated"
+}
+
+export const RulesOrderProperties = new Map<RulesOrder, {text: string; orderField: string; orderDirection: string}>([
+  [RulesOrder.Tags, {text: "tags", orderField: "tags", orderDirection: "asc"}],
+  [RulesOrder.Score, {text: "score", orderField: "score", orderDirection: "desc"}],
+  [RulesOrder.Created, {text: "created", orderField: "createdAt", orderDirection: "desc"}],
+  [RulesOrder.Updated, {text: "updated", orderField: "updatedAt", orderDirection: "desc"}]
+]);

package/src/logic/types.ts

@@ -114,6 +114,7 @@ export class Entry {
   readonly tags: string[];
   readonly markers: e.Marker[];
   readonly score: number;
+  readonly scoreContributions: {[key: string]: number};
   readonly scoreToZero: number;
   readonly publishedAt: Date;
   readonly catalogedAt: Date;
@@ -127,6 +128,7 @@ export class Entry {
     tags,
     markers,
     score,
+    scoreContributions,
     publishedAt,
     catalogedAt,
     body
@@ -138,6 +140,7 @@ export class Entry {
     tags: string[];
     markers: e.Marker[];
     score: number;
+    scoreContributions: {[key: string]: number};
     publishedAt: Date;
     catalogedAt: Date;
     body: string | null;
@@ -149,6 +152,7 @@ export class Entry {
     this.tags = tags;
     this.markers = markers;
     this.score = score;
+    this.scoreContributions = scoreContributions;
     this.publishedAt = publishedAt;
     this.catalogedAt = catalogedAt;
     this.body = body;
@@ -181,6 +185,7 @@ export function entryFromJSON({
   tags,
   markers,
   score,
+  scoreContributions,
   publishedAt,
   catalogedAt,
   body
@@ -192,6 +197,7 @@ export function entryFromJSON({
   tags: string[];
   markers: string[];
   score: number;
+  scoreContributions: {[key: string]: number};
   publishedAt: string;
   catalogedAt: string;
   body: string | null;
@@ -210,6 +216,7 @@ export function entryFromJSON({
       throw new Error(`Unknown marker: ${m}`);
     }),
     score: score,
+    scoreContributions: scoreContributions,
     publishedAt: new Date(publishedAt),
     catalogedAt: new Date(catalogedAt),
     body: body
@@ -221,24 +228,30 @@ export type Rule = {
   readonly tags: string[];
   readonly score: number;
   readonly createdAt: Date;
+  readonly updatedAt: Date;
 };
 
 export function ruleFromJSON({
   id,
   tags,
   score,
-  createdAt
+  createdAt,
+  updatedAt
 }: {
   id: string;
   tags: string[];
   score: number;
   createdAt: string;
+  updatedAt: string;
 }): Rule {
+  tags = tags.sort();
+
   return {
     id: toRuleId(id),
     tags: tags,
     score: score,
-    createdAt: new Date(createdAt)
+    createdAt: new Date(createdAt),
+    updatedAt: new Date(updatedAt)
   };
 }
 
@@ -311,7 +324,7 @@ export function tagInfoFromJSON({
 }
 
 export function noInfoTag(uid: string): TagInfo {
-  return {uid, name: null, link: null, categories: []};
+  return {uid, name: uid, link: null, categories: []};
 }
 
 export type UserSetting = {

package/src/logic/utils.ts

@@ -37,3 +37,23 @@ export function timeSince(date: Date) {
 
   return `${yearsPast}y`;
 }
+
+export function compareLexicographically(a: string[], b: string[]) {
+  for (let i = 0; i < Math.min(a.length, b.length); i++) {
+    const comparison = a[i].localeCompare(b[i]);
+
+    if (comparison !== 0) {
+      return comparison;
+    }
+  }
+
+  if (a.length > b.length) {
+    return 1;
+  }
+
+  if (a.length < b.length) {
+    return -1;
+  }
+
+  return 0;
+}

package/src/stores/globalSettings.ts

@@ -26,6 +26,9 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
   const feedsOrder = ref(e.FeedsOrder.Title);
   const failedFeedsFirst = ref(false);
 
+  // Rules
+  const rulesOrder = ref(e.RulesOrder.Tags);
+
   watch(mainPanelMode, (newValue, oldValue) => {
     router.push({name: mainPanelMode.value, params: {}});
   });
@@ -69,6 +72,7 @@ export const useGlobalSettingsStore = defineStore("globalSettings", () => {
     userSettings,
     info,
     feedsOrder,
-    failedFeedsFirst
+    failedFeedsFirst,
+    rulesOrder
   };
 });

package/src/values/Score.vue

@@ -36,7 +36,7 @@
   .score {
     display: inline-block;
     cursor: pointer;
-    padding: 0.25rem;
+    padding: 0.1rem;
     background-color: #c1c1ff;
   }
 </style>

package/src/views/RulesView.vue

@@ -1,13 +1,20 @@
 <template>
-  <side-panel-layout :reload-button="false">
+  <side-panel-layout :reload-button="true">
     <template #main-header>
       Rules
       <span v-if="rules">[{{ rules.length }}]</span>
     </template>
 
+    <template #side-menu-item-2>
+      Sorted by
+      <config-selector
+        :values="e.RulesOrderProperties"
+        v-model:property="globalSettings.rulesOrder" />
+    </template>
+
     <rules-list
       v-if="rules"
-      :rules="rules" />
+      :rules="sortedRules" />
   </side-panel-layout>
 </template>
 
@@ -15,8 +22,10 @@
   import {computed, ref, onUnmounted, watch} from "vue";
   import {computedAsync} from "@vueuse/core";
   import {useGlobalSettingsStore} from "@/stores/globalSettings";
+  import _ from "lodash";
+  import * as utils from "@/logic/utils";
   import * as api from "@/logic/api";
-  import * as t from "@/logic/types";
+  import type * as t from "@/logic/types";
   import * as e from "@/logic/enums";
 
   const globalSettings = useGlobalSettingsStore();
@@ -28,6 +37,60 @@
     globalSettings.dataVersion;
     return await api.getRules();
   }, null);
+
+  const sortedRules = computed(() => {
+    if (!rules.value) {
+      return null;
+    }
+
+    const orderProperties = e.RulesOrderProperties.get(globalSettings.rulesOrder);
+
+    if (!orderProperties) {
+      throw new Error(`Invalid order properties: ${globalSettings.rulesOrder}`);
+    }
+
+    const orderField = orderProperties.orderField;
+    const direction = {asc: -1, desc: 1}[orderProperties.orderDirection];
+
+    if (direction === undefined) {
+      throw new Error(`Invalid order direction: ${orderProperties.orderDirection}`);
+    }
+
+    let sorted = rules.value.slice();
+
+    sorted = sorted.sort((a: t.Rule, b: t.Rule) => {
+      if (globalSettings.rulesOrder === e.RulesOrder.Tags) {
+        return utils.compareLexicographically(a.tags, b.tags);
+      }
+
+      const valueA = _.get(a, orderField, null);
+      const valueB = _.get(b, orderField, null);
+
+      if (valueA === null && valueB === null) {
+        return utils.compareLexicographically(a.tags, b.tags);
+      }
+
+      if (valueA === null) {
+        return 1 * direction;
+      }
+
+      if (valueB === null) {
+        return -1 * direction;
+      }
+
+      if (valueA < valueB) {
+        return 1 * direction;
+      }
+
+      if (valueA > valueB) {
+        return -1 * direction;
+      }
+
+      return utils.compareLexicographically(a.tags, b.tags);
+    });
+
+    return sorted;
+  });
 </script>
 
 <style></style>