andreas83/socialnetwork

Laravel and Vue.JS powerd social network

socialnetwork's Issues

new content type featured article

Right now we have different content types like Video, Upload, WWW, Img, Generic...

I like to add another one: Article.

Required fields:
title
image
description
content (with simple WYSIWYG editor)

and of cause the usual meta information (author, created, modified, comments, likes)

Also we need a new route for this, something like:

/article/title/+id

Hook / Slot System

We properly need a hook / slot system.
This can be useful for extension programming, think about do something before/after a method is called.

Something like
$obj->addHook((obj)$user, "save", (obj)$plugin, "sendmail");

This triggers the method "sendmail" from Object $plugin,
while the save method from $user object is called.

Open Questions:

1. How to handle parameters.
2. Option for pre / after hook

@besn @chilimatic @neuron303 your input is always highly appreciated!

Server error 500

Getting error 500 on http://www.dasmerkendienie.com/hash/test and when I try to install it on my own server. What could be wrong?

Blank Post

I have latest Version online and blank Post is now bug.

Create Random-Slideshow in the home/jumbotron

As a nice "splash/landingpage" feature we should display a random !!SFW!! slideshow on the start page

should we support mp4 too?

@besn @chilimatic @neuron303

some apple boys not able to play webm, so we could transcode every video to mp4 too.
is it worth the effort/disc space, your opinion please?!

mentions @me and #hashtag autocompleter

would be cool, if someone like to help me implementing a fb and twitter like mention box.

useful resources:
http://yuku-t.com/jquery-textcomplete/

Update/Edit Content

Right now its not possible to edit/update

• Sourcecode
• Pictures
• Uploaded Files
• Website (Title, Description, Pic)
  You can only edit the text at the beginning on each content type.

Report post & basic admin panel

Might be useful to add a basic function that allows users to report posts, and then have some sort of a admin panel where you can review these reports and either delete the post or keep it.

Upload + Mentions

Right now files with spaces are not available anymore.

would be cool to extend the existing functionality, so we could reuse the filenames for mentions.

example:
hi @besn here is the +filename you requested.

Mobile - off canvas menu

Someone have time to create a mobile off canvas menu ?

Example (i lilke side slide):
http://tympanus.net/Development/OffCanvasMenuEffects/

Fileupload

Right now you can upload any document to /public/upload
We should somehow prevent uploading or executing php and other potentially dangerous filetypes

Documentation API

We need a API documentation.

database.sql faild on line 48

Which is: modified DATETIME

CREATE TABLE  Hashtags (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `hashtag` VARCHAR(255) NOT NULL,
  `pop` int(10) unsigned NOT NULL,
   modified DATETIME
   PRIMARY KEY (`id`), UNIQUE(`hashtag`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

Syntax Code Highlighting

Input

text
<code> my_cool_function() </code>

output

text

expected result

text

my_cool_function();

The source of the trouble is the #hashtag replacer,
we need to distinguish between the code and regular text block

nodes = domNode.querySelectorAll('.text>span');
        if (nodes.length > 0) {
            for (var i = 0; i < nodes.length; i=i+1) {
                if(nodes[i].childNodes.length>0)
                {
                    if(typeof(nodes[i].childNodes[0].nodeValue)=="string")
                    {
                        //todo: fix the repalcement so text block does not overwrite the code block
                        $(nodes[i]).html(nodes[i].childNodes[0].nodeValue.replace(/#(\S*)/g,'<a class="hash" href="/hash/$1">#$1</a>'));

                    }
                    console.log(nodes[i].childNodes[0].nodeType);
                }

            }
        }
´´´

admin panel aka automated generic backend

We need an admin panel, with at least minimum generic functions like create, read, update, delete.
I do not plan to create a separate controller, template for each model, instead i would love
to generate the admin panel from meta data.
in example we could use doc code inside the model to describe the data other frameworks use config array or yaml

What we need to generate an admin panel

1. Authentication for privileged users
   Done
2. We need to know which model should be editable
   Can be done via doc code or another declarative way. Other idea highly welcome too!
3. We need to define which properties are visible and editable also validation will be an issue.

iam still thinking about a nice way how to render specific properties (like datetime picker, wyswyg editor or upload fields)

Page system, User details

Maybe system for creating fan pages would be great, also if user profile could be filled with user details, such as location, bio, work, etc...

Class 'transformer\TransformerFactory' not found

While trying to share some youtube video ie.
https://youtu.be/yfCt35RTR-U

i got following error:
Fatal error: Class 'transformer\TransformerFactory' not found in /home/lissi/dev/SocialNetwork/app/controller/DataController.php on line 713

@chilimatic its maybe a good time to rewrite the autoloader so it match psr-4 ?

http://www.php-fig.org/psr/psr-4/

Random button works only on stream page

Score does not work

real one page app

While developing the new group feature it turned out, that
extending and modifying the existing react structure is extremely inflexible and complex.
in my opinion the main reason is, the missing controller and routing component.
on the long run we should rewrite the structure and add at least some sort of routing
also i need a clean solution for communication between components aka controller.

i really like to address this issue on the next refactoring release,
in the meantime please don't hesitate and make code and or feature suggestions.

Order data by score

I like to order the Post by Score (on a daily basis)

What i did so far,
select Content.id, count(Score.id) as score from Content left join Score on Content.id=Score.content_id group by Content.id order by DATE(from_unixtime(Content.date)), score asc

This works pretty well, until i fetch some more data via limit offset...

Database Table Score

mysql> desc Score;
+------------+-------------------+------+-----+---------+----------------+
| Field      | Type              | Null | Key | Default | Extra          |
+------------+-------------------+------+-----+---------+----------------+
| id         | int(10) unsigned  | NO   | PRI | NULL    | auto_increment |
| user_id    | int(10) unsigned  | NO   | MUL | NULL    |                |
| content_id | int(10) unsigned  | NO   |     | NULL    |                |
| type       | enum('add','sub') | NO   |     | NULL    |                |
| date       | int(10) unsigned  | NO   |     | NULL    |                |
+------------+-------------------+------+-----+---------+----------------+
5 rows in set (0,00 sec)

Maybe it makes sense to pre count the score in Content, so the left join will not nessesary while fetching new data. But this would just improve read performance.

Another problem is, right now we fetch x posts from given id!
In example 10 posts from id 12040, this will return us 12039, 12038 ... and so on.
this works pretty well, because our data is ordered by id.

with the new feature, the result is not ordered by id anymore.
so the result could look like 12037, 12040, 12039 .....

Right now we would use the last id, and fetch 10 more posts while scrolling.
In this scenario, we would fetch several post twice.
But if we fetch, 10 post from the lowest id (i.e. 12037) we may miss some post too.

@neuron303 @chilimatic @besn any hints ?

Searchbar (enter button does not work)

Notification system

We should have a Notification system.

Notifications are:
Some of my friends posted something
Some of my firends liked/disliked something
Someone liked my Post
Someone comment on my Post

Garbage Collection:
We should remove any notifications after 7 days

Maybe some special system notification have longer ttl.

create database migration manager

We need a manager to

• save the current state of the database
• imports the migration scripts

this is so we don't get inconsistent with the environment differences in the database.
and we can build a live system from scratch without legacy dummy data.

Improve open graph parsing

some websites don't have any opengraph information, so
i try to find the good old meta tags title, keyword, description...
for image i search for the first img tag, which is in most cases the logo.
but the url inside is sometimes, relative or absoloute, sometimes absoloute but without protocol and so on...
so the challenge here is to have better fallback mechanism.

`function og_parser($url){

    //check for og tag
    $data = array("type" => "www", "url"=>$url);
    $ch = curl_init();
    $optArray = array(
        CURLOPT_URL => $url,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_USERAGENT=>'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13',
    );
    curl_setopt_array($ch, $optArray);
    $result = curl_exec($ch);

    $dom = new DOMDocument;
    @$dom->loadHTML($result);
    foreach ($dom->getElementsByTagName('meta') as $tag) {
        if ($tag->getAttribute('property') === 'og:image') {
            $data['og_img'] = $tag->getAttribute('content');
        }
        if ($tag->getAttribute('property') === 'og:title') {
            $data['og_title'] = $tag->getAttribute('content');
        }
        if ($tag->getAttribute('property') === 'og:description') {
            $data['og_description'] = $tag->getAttribute('content');
        }
        if($tag->getAttribute('name') == 'description')
        {
          $data['alt_description']= $tag->getAttribute('content');  
        } 

    }

    //fallback (while no opengraph tags exist, we use title tag, and meta description)
    if(!isset($data['og_title'])){
         $data['og_title'] =  $dom->getElementsByTagName('title')->item(0)->textContent;
    }
    if(!isset($data['og_description']) && isset($data['alt_description']) && !empty($data['alt_description'])){
         $data['og_description'] =  $data['alt_description'];
    }

    if(!isset($data['og_img']))
    {
        $base=$dom->getElementsByTagName('base');
        if($base->length>0)
            $base =  $dom->getElementsByTagName('base')->item(0)->attributes->getNamedItem("href")->value;
        else
            $base=$url;

        if($dom->getElementsByTagName('img')->length>0)
            $imgSrc=$dom->getElementsByTagName('img')->item(0)->attributes->getNamedItem("src")->value;

        if(substr($imgSrc, 0, 4)=="http")
            $data['og_img'] = $imgSrc;
        else
            $data['og_img'] = $base.$imgSrc;
    }
    return $data;
}`

Auth Cookie

after login you get an auth cookie/token, this is used for notifications and chat etc.
now this works fine until you authenticate with the same account on another's computer.
then the old auth cookie get invalid and the websocket server dont know who you are anymore.
We could use the session variable to renew the auth cookie/token,

create integration tests

at the beginning integration tests for the API would be cool

content

• post content
• get content
• put aka update content
• delete content

comment

• post comment
• get comment

Plaintext

Not sure if you are aware of it but .cfg files are readable in the browser, it is therefore possible to read the config files in app\config. Might be a bad idea since passwords are stored there.

Blank Post

Hello, ist this bug?
Get With 0 Charakter Posting....

endless loading on ios safari

Groups

would be cool to create, manage groups plus invite users to group...
maybe a permission system is required too.

help with code add my json

jquery
`$(function() {

var container = $("#placeholder");

// Determine how many data points to keep based on the placeholder's initial size;
// this gives us a nice high-res plot while avoiding more than one point per pixel.

var maximum = container.outerWidth() / 2 || 300;

//

var data = [];

function getRandomData() {

    if (data.length) {
        data = data.slice(1);
    }

    while (data.length < maximum) {
        var previous = data.length ? data[data.length - 1] : 50;
        var y = previous + Math.random() * 10 - 5;
        data.push(y < 0 ? 0 : y > 100 ? 100 : y);
    }

    // zip the generated y values with the x values

    var res = [];
    for (var i = 0; i < data.length; ++i) {
        res.push([i, data[i]])
    }

    return res;
}

//

series = [{
    label: "down",
    data: getRandomData(),
    lines: { fill: true }
}];

//

var plot = $.plot(container, series, {
    grid: {
        borderWidth: 1,
        minBorderMargin: 20,
        labelMargin: 10,
        backgroundColor: {
            colors: ["#fff", "#e4f4f4"]
        },
        margin: {
            top: 8,
            bottom: 20,
            left: 20
        },
        markings: function(axes) {
            var markings = [];
            var xaxis = axes.xaxis;
            for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 2) {
                markings.push({ xaxis: { from: x, to: x + xaxis.tickSize }, color: "rgba(232, 232, 255, 0.2)" });
            }
            return markings;
        }
    },
    xaxis: {
        tickFormatter: function() {
            return "";
        }
    },
    yaxis: {
        min: 0,
        max: 110
    },
    legend: {
        show: true
    }
});

// Create the demo X and Y axis labels

var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
    .text("Response Time (ms)")
    .appendTo(container);

// Since CSS transforms use the top-left corner of the label as the transform origin,
// we need to center the y-axis label by shifting it down by half its width.
// Subtract 20 to factor the chart's bottom margin into the centering.

yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20);

// Update the random dataset at 25FPS for a smoothly-animating chart

setInterval(function updateRandom() {
    series[0].data = getRandomData();
    plot.setData(series);
    plot.draw();
}, 40);

});`

my php

`<?php

$int="em2"; 
session_start(); 

$rx[] = @file_get_contents("/sys/class/net/$int/statistics/rx_bytes"); 
$tx[] = @file_get_contents("/sys/class/net/$int/statistics/tx_bytes"); 
sleep(1); 
$rx[] = @file_get_contents("/sys/class/net/$int/statistics/rx_bytes"); 
$tx[] = @file_get_contents("/sys/class/net/$int/statistics/tx_bytes"); 

$tbps = $tx[1] - $tx[0]; 
$rbps = $rx[1] - $rx[0]; 

$round_rx=round($rbps/1024, 2); 
$round_tx=round($tbps/1024, 2); 

$time=date("U")."000"; 
$_SESSION['rx'][] = "[$time, $round_rx]"; 
$_SESSION['tx'][] = "[$time, $round_tx]"; 
$data['label'] = $int; 
$data['data'] = $_SESSION['rx']; 
# to make sure that the graph shows only the 
# last minute (saves some bandwitch to) 
if (count($_SESSION['rx'])>60) 
{ 
    $x = min(array_keys($_SESSION['rx'])); 
    unset($_SESSION['rx'][$x]); 
} 

# json_encode didnt work, if you found a workarround pls write me 
# echo json_encode($data, JSON_FORCE_OBJECT); 

echo ' {"label":"'.$int.'","lines": { fill: true },"data":['.implode($_SESSION['rx'], ",").']} '; 
?>`

split components from react.jsx into smaller chunks

Right now to much stuff happens in one file (react.jsx).
We should split the components into smaller chunks, i.e.

Rendering

Content Box with following types:

• Video
• Websites
• Sourcecode
• Images
• File uploads

Functions

1.) Sharing Box
2.) Comment Box
3.) Like/Dislike Box
4.) Scroll Event

Upload any file

I figured it's possible to upload any file as avatar/upload any file on posting. This means .html files can be uploaded and used. I tried to upload a PHP file to test if that worked but it didn't. Which is good.

Anyways, restrict avatar uploads to only jpg, jpeg, png and bmp extension?

Responsive video breaks layout in mobile

Example:
http://www.dasmerkendienie.com/permalink/15407

Test:
In video breaks the layout on smaller displays.

Two accounts on same e-mail

It's possible to have two or more accounts on same e-mail with different passwords. Check my accounts "merfin" and "martin. I can't really remember how I did it, but I think I just created them on same e-mail.

Vagrant container

I think its a good idea to have a docker container.

Basic Chat System

Original: Als Nutzer möchte ich mich mit den anderen Nutzern die online sind unterhalten können :) "story style" ;)

English: As user i like to communicate with other Users who are Online right now :)

Reduce amount of ajax request

Right now there are two ajax calls for every content element (comment and like), so while scrolling
there are maybe hundreds of requests going on.
I'am quite curios if it feels faster or slower when we switch from many ajax request to just one...

Another alternative could be a general switch to web sockets.

Groups / Permission and friends

we have already a public stream
/public/stream

now we like to have a private stream for all members of a group
/groupname/stream

So new features will be:

Group->Create
Group->Delete
User->AddToGroup
User->RemoveFromGroup

admin planen login

Hol to Logins to admin panel?

render newlines in stream text as linebreaks

example: http://dasmerkendienie.com/permalink/15349

Webm not replaced anymore

WebVideoTransformer is identical to VimeoTransformer.

Namespace Issues

new psr-4 autoloading, or to be more specific, the namespace
breaks the existing function from Backend.

Would be cool if there is such thing like:

use SocialNetwork\app\model*

Any idea to solve this issue @chilimatic ?

upload Images Not work

Hello, upload avatar Work fine, only Problem With post images please help

create build script in phing

Create a build script in phing that

• check if composer exists
• check if npm exists
• triggers composer and npm update / install
• triggers bower
• triggers phpunit
• triggers a database migration script state

add @todo tags

we need a overview which part of the application needs to be refactored.
i already added @todo tags with my thoughts, please share your idea with me too.
the goal is to improve code readability, so it will be much easier for other to contribute, to maintain, extend and so on. There are plenty of other code smells, please help me to reduce them.

remove old other project code remnants

we need to clean up the old code so we don't have any other pre-projects remnants in there

Reset password function

Would be useful to have a reset password function, I pretty much forgot my password on the demo and thought of it from that.